How to Add Google +1 Button to your Blog using Sharebar Plugin

+1 Google’s +1 button is now LIVE and you can implement the code on your blog. Instead of just copy pasting the code on your blog, try achieving the functionality of the +1 button by adding the code to a social sharing plugin.

Install and activate Sharebar before you read any further.

Step 1

Assuming you have installed the plugin and activated it, go to Plugins menu and Click on Sharebar.

Step 2

There will be a blue colored button “Add new Button,” click that.

Step 3

Paste the code from Google +1 your Website. If you like what I have, use the tall code:

<!– Place this tag in your head or just before your close body tag –>
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>
<!– Place this tag where you want the +1 button to render –>
<g:plusone size=”tall”></g:plusone>

Step 4

Once you add the code, you should have a screen like this:

+1 Button

That’s all you need to do. Please let me know by commenting below if you run in to any problems implementing the +1 Button.

  • http://www.locksleynet.com Locksley McPherson Jnr

    Thanks for sharing this!  Lots of help :)

  • Uzair

    Your article help me successfully implement +1 in the Share bar. Thank you. 

  • Dennis Smith

    Hey man! Great little tutorial. I got the +1 button working, but I was wondering if you could share how to make rounded corners on the bar, make it stay more in the center of the screen when scrolling, and how to make it scroll with you smoothly. I know it’s a lot to ask, but I haven’t found the option for that type of customization in the Share Bar settings. Thanks in advance for any help, and bravo again on the tutorial :)

  • http://twitter.com/techalam Nizam Khan

    That’s really helpful. Thanks for this wonderful post Zahid :)

  • Josh Manuel

    What a relief. I tried to add the google+1 button sometime ago, and I was told to add some html code to my functions php and doing that caused problems with my website. Unable to even load the site to reverse the changes. I had to log into my hosting control panel to delete the code before my website was able show its content. I’ve been searching for ways to add the button. You really helped me a lot. Thank you