Need help? Check out our Support site, then


Google+ publisher code with badge and +1 button

  1. 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.

    <br /> <!-- Place this tag where you want the +1 button to render --><br /> <div class="g-plusone"></div></p> <p><!-- Place this tag where you want the badge to render --><br /> <a href="https://plus.google.com/117182699411387789980?prsrc=3"><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;" /></a></p> <p>

    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

  2. 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?

  3. Thank you! Here's the script with the Google+ profile URL:

    <!-- Place this tag where you want the badge to render --><br /> <a href="https://plus.google.com/113063168752458402394?prsrc=3"><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>

  4. 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>

  5. *Be sure to remove the spaces in the "a" tags at the beginning and end of the code!

  6. climbingthemountain
    Member

    Great piece of code! Thanks a lot for it

  7. Awesomeness!!! Thank you so much!! I thought My whole site was going to be left behind while the world moves on!

  8. 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

  9. 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:

    <a href="https://plus.google.com/115390556129800757747?prsrc=3"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a><br />

    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

  10. 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...

  11. 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!

  12. Brilliant! Thanks a lot.. :)

  13. 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>

  14. Sorry, momfy, about the autocorrect to comfy. ;-)

  15. 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

  16. I have a problem, the "<script>" tags are being removed from my text widget. any idea?

  17. and also, the badge only is visible and not the +1 button. unlike from momfy wordpress com both are being displayed. Thanks in advance

  18. Scripts are not allowed here for security reasons. They will always be stripped.

  19. 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.

  20. Go to your Dashboard->Settings->Sharing and add the G+ button there.

  21. can anyone tell me how to customise the +1 button just for the blog link.... i mean http://www.valobashavalobashi.wordpress.com this is the url of my blog.. so when anyone press the "+1" button i want my blog URL to be "+1"'d.... it means my "blog" will be highlighted in the google search result, not any content of my blog.... can anyone help me?

  22. Do you mean you want all +1's to go to your main blog URL>?

  23. GREAT help

    Thx

    DETart - http://detart.wordpress.com/

  24. Thanks for this! Worked perfectly when I used the code rbong posted (minus spaces).

  25. thehippygardener
    Member

    I'm completely confused! I've tried several times to get this to work. The only option that WILL work is if I choose Icon only as the Type. But I'd like it to be the full badge. The code that the badge generator is giving me looks nothing like what is posted here or in the comments here, so I really don't know what to highlight and do. Given that it's a wordpress.com blog I don't know where or how to post anything in the "header" area. This is the code it's giving me (maybe it will show up correctly in this comment):

    <!-- Place this tag in the <head> of your document -->
    <script type="text/javascript">
    window.___gcfg = {lang: 'en'};
    (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>

    <!-- Place this tag where you want the badge to render -->
    <g:plus href="https://plus.google.com/113813546623352105834" rel="author" width="300" height="69"></g:plus>

  26. thehippygardener
    Member

    Nevermind that last post.....I got it to work finally. Sorry.

Topic Closed

This topic has been closed to new replies.

About this Topic