The New Google +1 - Add All The Plus 1 Button Styles To Your Blog




| 15 comments

Google have been experimenting with their +1 (Plus One) button for a while and today they released it for websites and blogs.The plus one button lets you recommend things you like to friends and they will see your recommendations in Google search results and over time in Ads and possibly other places.In search now you can see the plus one's of your friends, contacts from Gmail, Google Reader and Google Buzz.So it makes sense to allow readers to plus one your content and recommend it to their friends.Adding the button you your blog will give the readers the option to plus you up !

Live Demos - Here are the 4 styles of the +1 Button, They Work Try Them Out !



+1 In The Default Blogger Share Buttons


Blogger users will be happy to know if you have the default share buttons enabled the plus one button may already be on your blog.Below is a screenshot You can see them working on the home page of this blog.


If you don't have them enabled here are the instructions from Blogger Buzz -

To add the +1 button to your blog, you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, the +1 button will automatically show up as a new share option.

Blogger Allow Share Buttons

You know i was never a fan of the default blogger share buttons but this does give them some merit now.

Using +1 Anywhere On All Blogs


You can also grab a standalone button to use on your blog by visiting Google +1 For Webmasters.

There are 4 sizes of button to choose from once you choose you generate two snippets of code.The script with the message "Place this tag in your head or just before your close body tag" goes directly before your blogs </head> tag and the second code goes were you want the button to appear.

Add Google +1 Above Posts, Below Posts On Blogger


Lets Look At Some Places You Can Add The +1 Button On Blogger.

You can go to the +1 for webmasters page to Get The Google +1 Button Codes but i have them here also.

Add The Script

The script only needs to be added once no matter how many times you add the button.The script is the snippet with the message "Place this tag in your head or just before your close body tag" on the +1 for webmasters page.I also have it below :

Go to your blogs Design Page > Edit Html > Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Copy and paste the following code directly Above / Before </head> then save your template.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

That's it the script is added now choose a button and add it as shown.

Small +1 Button



Small Button Code

<g:plusone size="small"></g:plusone>

Medium +1 Button



Medium Button Code

<g:plusone size="medium"></g:plusone>

Standard +1 Button



Standard Button Code

<g:plusone></g:plusone>

Tall +1 Button



Tall Button Code

<g:plusone size="tall"></g:plusone>

Add To Blogger Sidebar

On Blogger go to your Design Page > Click Add A Gadget > Choose Html/Javascript and paste in the code for the +1 button then save.

Add Above Posts On Blogger

On Blogger Go To Design > Edit Html > Tick Expand Widget Templates.

Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-header-line-1'>

Paste your +1 button code Directly Below <div class='post-header-line-1'> the save your template.

Add Below Posts On Blogger

On Blogger Go To Design > Edit Html > Tick Expand Widget Templates.

Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-footer-line post-footer-line-1'>

Paste Your +1 Button Code Directly Below <div class='post-footer-line post-footer-line-1'> then save your template.

That's Google +1, I like the concept but it remains to be seen how popular it will be and if it can challenge the similar Facebook and Twitter share buttons.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

15 comments:

  1. I already did this but nice post

    ReplyDelete
  2. I already add to my blog.. By the way thanks you for sharing

    ReplyDelete
  3. Thanx can you tell me how can i add animated yahoo smileys to my blog post as like comment box ?

    ReplyDelete
  4. VERY NICE this'll be great for traffic on your blog when searching! simply bril :D ty!

    ReplyDelete
  5. Google made it fairly easy for blogger/blogspot users (and for WP users) to add the +1 button, but for those of us still sticking with the old so-called "classic" blog*spot template, we had to figure it out for ourselves! I came up with a solution that's not 100% perfect, but it does the job! You can check it out on my blog!

    ReplyDelete
  6. @ Dave Lucas - I was going to check it out on your blog but you have your profile locked.When you say classic blogspot are you talking the old pre 2006 blogger ?

    ReplyDelete
  7. How do you make it go to the right and not the left of the post?

    ReplyDelete
  8. Never mind I just figured it out. My question now is do you need the google buzz button, if you are using this one?

    ReplyDelete
  9. Do I understand the guideline correctly, that you can Not ask readers to click on the button at all?

    ReplyDelete
  10. nice paul. l like your admin picture in your comment How I can do it at my blogger ?

    ReplyDelete
  11. Great Post Paul. I added +1 button to my blog :)

    ReplyDelete
  12. Didn't work when adding to sidebar. Oh, it worked for homepage, but the button wouldn't show at all when viewing blog posts.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. Really nice post, how about to make 'follow us on google+' button like you have?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us