Saturday, September 10, 2011

How to add Google +1 Button to Your Blog

Hop on the Google Train.  Wonder how to add a Google Plus One button to your blog?  I found these instructions from BloggerSentral.

This tutorial will show you how to add a Google +1 button to every blog post in a Blogger blog. It allows your readers to recommend your posts to their Google friends and contacts right from your blog post.

This button will +1 the containing post, regardless the page you are at. It will work on both multi-post pages (home page, archive etc.) and individual/post page etc. You will have an option whether to include a counter or not.
(If you don’t want to add the button under blog posts, there is another method: Add it to a  floating social media sharing bar)
 1 Blogger below post
Let us proceed with the tutorial:
  1. Go to Dashboard; Design; Edit HTML.
  2. Back up your template.
  3. Tick the  Expand Widget Templates checkbox on top right of the code window.
  4. Find the following code in your HTML:


    <data:post.body/>
  5. Paste the +1 button code immediately below (after) it:

    <b:if cond='data:blog.pageType != "static_page"'>

    <p>p>

    <div style='float:left;padding:10px;'>

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

    <g:plusone expr:href="data:post.url" size="standard" count="true">g:plusone>

    div>

    b:if>


  6. Configure button 
    You can configure by changing the attributes in line 5. 
    • Select the size of button by replacing the value of  size attribute with a value from the table below.
      Button size (with count) Value
      google plus one small  small
      google plus one medium  medium
      google plus one standard  standard
      google plus one tall  tall
    • You can remove the count by changing the value of count attribute from true to false.
  7. Button repositioning
    The code above positions the button on bottom left of each post. You can change the positioning if you wish.
    • Position it on top of post
      Place the button code before (instead of after).
    • Position it on the right
      Change the float in line 4 from left to right.
  8. Displaying button on static pages
    The code above doesn't display the button on static pages. To make it appear on static pages as well, remove the conditional tag -code line 2 and 8.
  9. Preview before saving. 

11 comments:

  1. Whew, looks a little complicated but thanks for the tutorial. Google +1 is something I haven't checked into it. How has your experience been so far? Increase in traffic?

    ReplyDelete
  2. It's not too bad really. They're really step by step directions.

    I haven't noticed anything yet. But it's still super new and not everyone has it. I think it'll grow. But I think it'll be all dependent on how Google does to promote it. It's Google's version of the FB Like. We'll have to see. The way I understand it, the more +1 your item, article, etc get, the better it'll show up on Google searches. It's not taking extra time for me at this time, so I'll keep it and just keep +1 myself and encouraging others to do it as well.

    ReplyDelete
  3. oh, this is super, as I didn't even understand what google+ was, though it has been compared to facebook...?
    Thanks for your comment on my post -- yes, the "clean-up" is what matters, and I only wish I were as good at that as I should be.

    ReplyDelete
  4. Thanks Sandra. Yea, I'm struggling with some "clean-up" as well. It's been rough at work and I've been quite the hurricane myself.

    ReplyDelete
  5. Thank you for the recent visit and comment on my blog. Your blog is wonderful! I love that you've shared a helpful tutorial in the mix. I look forward to visiting your shop as well. Have a great week!

    ReplyDelete
  6. You're welcome Knees and Paws. Thank you for stopping by. Hope you find something useful on my blog!

    ReplyDelete
  7. I found a little piece of code that can be embedded into an HTML widget. They must have just added it. It's in Google's directions.

    Wow, I had no idea that, once I created a page, I would have another facebook! Okay, I'm dense and late to the game. I admit it. Since I mostly added online colleagues, it's mostly marketing by others. I guess I add my own marketing.

    Do you know if there are any rules on who is going to get your posts and comments, as there are now on facebook?

    ReplyDelete
  8. Yea, this post is a bit older. + is a lot like FB, but I think more market segment friendly. To my knowledge, not like FB, but yes you can choose who sees what. When you decide to share, there should be a box that pops up that allows you to choose who can see your comment. That's what makes it such a neat marketing tool. You don't have to clutter your messaging to people it does not pertain too. I'll write about it this week.

    ReplyDelete
  9. The situation is really utilizable, especially for those who designate to ruminate the blog. But if for fill who are fascinated in the else whatsits, this website must not be useless.

    Carlos Abadi

    ReplyDelete
  10. Thanks for describing whole process. Google + button is now considered a weapon of social media marketing.

    ReplyDelete

Follow Finding Charm on Twitter

Related Posts with Thumbnails