Comments on: How to Implement Google +1 Button for Social Sharing

By: Amiya

Amiya — Wed, 19 Jun 2013 08:31:56 +0000

Wohh..you just save me, i forget to add render call code which resulted problem in 1+ button’s vertical-align in Sharebar social sharing button.

Very useful article.
Thanks.

By: Joydeep

Joydeep — Wed, 27 Jun 2012 04:51:07 +0000

In reply to Sougata.

Hi Sougata,

Itemscope is there in the HTML tag , where we are declaring it as an Article via Schema.

itemscope itemtype=”http://schema.org/Article”>

Note: in case snippet data is missing, G+ will pick up the Title tag and Meta Description tag.

By: Sougata

Sougata — Mon, 25 Jun 2012 09:29:51 +0000

Hey Joydeep ,
Though your post has a G+ share bubble but i didnt find the itemscope in the HTML tag … is it mandatory or am i missing something ?

By: Joydeep

Joydeep — Wed, 28 Mar 2012 12:38:11 +0000

In reply to Javier.

Hi Javier, if you can share any URL (jsf) I can look for the problem.
Any runtime issue or syntax issue or something else.

By: Javier

Javier — Mon, 26 Mar 2012 17:07:22 +0000

Hi,

I’m having a problem trying to use META tags into a jsf, I’m using som jsf templates an when I try to add meta properties to use g+ or facebook they doesn’t seems to work because, no image is showed neither the message, do you have any solution?

Thanks

Javo

By: Joydeep Deb

Joydeep Deb — Wed, 14 Dec 2011 03:05:20 +0000

In reply to Tara. Tara if you see the source code of any web page, the first line you will see is DTD - Document Type Definition (something like below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> And the second line (syntax) is your HTML code (something like below) <html xmlns="http://www.w3.org/1999/xhtml" > This is the HTML tag you need to add the the {itemscope itemtype="http://schema.org/Article"} code.

By: Tara

Tara — Tue, 13 Dec 2011 15:38:21 +0000

what is the html tag? You said add “” to the html tag but I’m not sure what that is.

By: Joydeep

Joydeep — Tue, 13 Dec 2011 03:26:25 +0000

In reply to Tara. Hi Tara, It is really simple, when you put +Snippet you need to first modify your <html> tag.


<html itemscope itemtype="http://schema.org/Article">

Add the following meta tags inside the page <head>


<meta itemprop="name" content="Your Page Title/Heading Goes Here" / >
<meta itemprop="description" content="Your Meta Description Goes Here..." / >
<meta itemprop="image" content="http://www.example.com/images/cool-image.png" / >

Add the below code, wherever you want to place the button on-page


<!-- Place this tag where you want the +1 button to render --> <g:plusone annotation="inline"></g:plusone>

Call these JavaScript files to support G+ button


<!-- Place this render call where appropriate -->
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>

Let me know if it works now. Thanks, Joydeep

By: Tara

Tara — Sun, 11 Dec 2011 12:29:42 +0000

Where does the +Snippet get added? I added it to my head but it’s not working.

By: Joydeep

Joydeep — Thu, 15 Sep 2011 04:10:09 +0000

Hi Adam, unfortunately you cannot do so, not only with Google +1 but any other social sharing button (E.g. Facebook Like, Twitter Tweet, Digg, LinkedIn etc)

They all use their own set of script to track the clicks, registered users etc.