Google publisher code with badge and 1 button
-
This is a solution I came up with for WordPress bloggers who are looking to improve their page rank in Google search results, integrate their Google Plus profiles with their WordPress blogs and improve visitor traffic from their blog to their Google+ posts and from Google+ back to their their WordPress blogs.
This solution does three things:
1) It registers you as publisher of your blog for Google+. This means that any visitors who ‘+1’ or share your blog, posts or comments using the Google+ button anywhere on the web will be ‘credited’ to you. This in turn will improve the page rank of your blog in Google’s search results;
2) It adds a ‘+1’ button to your blog. This is in addition to the +1 feature provided by WordPress in the Tools>Sharing section of your Administration area. Having this also improves your Google+ publisher compliance, which in turn gives you an edge in Google search result page ranking;
3) It provides a ‘badge’ to connect your blog back to your Google+ profile. This not only fortifies the connection between your blog and your Google+ presence (and completes your G+ publisher compliance), but also provides visitors with a single-click means to get to your posts and content on Google+. Since you’ll have a built-in audience on G+ and a significant amount of posted content available there, the opportunities for cross-traffic are obvious.
The code I wrote below has been implemented on my WordPress.com blogs and is WP-compliant. You can see it in action at momfy.wordpress.com in the upper-right column of the page.
To implement:
In the WordPress Administration area of the blog you want Google+ connectivity added to…1) Create a Text Widget and past the code below into the text area (without the CODE tags).
2) In a new browser window, go to your Google+ profile page. The URL will look like this:
https://plus.google.com/117182699411387789980/posts
3) From the URL, copy the long string of numbers. That is your Google+ profile ID.
4) Return to your Text Widget; in the code you previously pasted, look for the string of numbers similar to those you just copied. Delete the old numbers and paste the string from your Google+ profile.
5) In the code text below, the name ‘Jonathan Bates’ (my name) appears. Delete and replace with your name.
6) Save the widget and close.
7) Open your blog and confirm that you see a Google ‘+1’ button and beneath it, {your name} on {google+ image}.
8) That’s it. You’re done.Note: the Google ‘+1’ button may take a moment to appear, and may not show up until the rest of your blog has already rendered. That’s normal.
<!-- Place this tag where you want the +1 button to render -->
<div class="g-plusone"></div><!-- Place this tag where you want the badge to render -->
<span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">jonathan bates</span><span style="display:inline-block;vertical-align:top;margin-right:15px;margin-top:8px;">on</span><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;" />For more information, here are some links:
Google > +1 Button Creator
Google > Connect your site to your Google+ page
Google > Overview of the Google+ Platform
Google+ > Help Center for Google Plus
TouTube > Video > About the +1 Button -
There is no long string of numbers in that code block, just your name. Where do you place the first shorter set of code for the plus one. Inside each post?
-
Thank you! Here’s the script with the Google+ profile URL:
<!-- Place this tag where you want the badge to render -->
<span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">aloha got soul</span><span style="display:inline-block;vertical-align:top;margin-right:15px;margin-top:8px;">on</span><img style="border:0;width:32px;height:32px;" src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" /> -
Odd, the first part of the code goes missing when I publish it to the forum. If the below doesn’t show the code with the < a > tag, then be sure to “View Page Source” here or on momfy’s blog.
<!– Place this tag where you want the badge to render –>
< a style="cursor:pointer;display:inline-block;text-decoration:none;color:#333;font:13px/16px arial,sans-serif;" href="https://plus.google.com/113063168752458402394?prsrc=3" rel="publisher"><span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">aloha got soul</span><span style="display:inline-block;vertical-align:top;margin-right:15px;margin-top:8px;">on</span><img style="border:0;width:32px;height:32px;" src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" />< /a> -
-
-
Awesomeness!!! Thank you so much!! I thought My whole site was going to be left behind while the world moves on!
-
Thank you for fixing my original post — odd that the code tag didn’t work right. Sorry I didn’t catch that, but big thanks to those who picked up the slack for the workaround.
– Jonathan
-
You know what’s weird is – I followed the directions to the letter and every time I press Save in the text widget it strips out my Google ID. What in the world?
If you want just the button and not the badge/button with your name, it’s super easy.
Go here: https://developers.google.com/+/plugins/badge/config?pageId=115390556129800757747&hl=en (my Google ID as example)
Pick your badge style (the small, medium or large icon, not the small badge or the standard badge – they have Javascript).
I picked the medium size badge and I copied and pasted this part of the code they give you:
Put it in a text widget and Voila!
Pretty boring. No name, no ‘add to circles’ button. Snore. Oh well.
Unless you all tell me how to keep WP from stripping the code I guess I’m up a creek without a paddle or without a badge.
If you go to my site, you can see the various examples – don’t know how long they’ll stay there though….The one that stripped the code (my Google ID) looks good but it is inactive. Boo.
Mollie
-
Holy cr*p! I take it back!
Do NOT ask me why, but even though it stripped my Google ID, it’s working now!
I guess I didn’t wait long enough for it to render (if that’s the right word) before checking to see if it worked, which it didn’t at first.
Oh well! Now all the other numb-sculls like myself can learn from my (idiot) example.
It works now…computers, eh?
I still would like (someday) to have the ‘Add to Circles’ button thingie that goes with the real Google badge. Phooey.
Thanks for the workaround! Be patient, it works!
Never mind…
-
OK, now you are going to think I’m nuts. It was working and now it’s not. I feel like I’m losing my marbles! Aaaarrrgh!
-
-
Thank you! I altered the code a tad for my blog to make my name bold (as you did on your blog, comfy) and to make it flush right with a small margin:
<div style="text-align:right;margin-right:15px;">Follow <a href="https://plus.google.com/116875796602648173684?prsrc=3" rel="publisher"><span style="font-weight:bold;">Daniel Greene</span> <span style="margin-right:15px;">on</span><img style="border:0;width:32px;height:32px;" src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" /></a></div> -
-
Totally confused here. Can someone explain why you have this in two parts? First it says to place some code a top of document and then there is more code for where I want the “badge to render”?!?!??! Do I have to place both pices of code in my text sidebar widget? Or just one of the pieces?
Thanks – please explain slowly. I am not a WP admin or programmer
-
-
and also, the badge only is visible and not the +1 button. unlike from momfy wordpress com both are being displayed. Thanks in advance
-
-
I am trying to add g+ button to my page but facing a problem. Please give me the code to add only g+ like button to my blog page.
-
- The topic ‘Google publisher code with badge and 1 button’ is closed to new replies.
WordPress.com Forums 