Sunday, 26 February 2012

Adding Twitter, FB Like and Google +1 Buttons for Individual Blogger Posts

This post’s more than a week late.  Sorry.  Actually, a friend blogger has sent me a message via Facebook asking me to create a tutorial regarding adding an FB Like button on her blog posts.  Feeling guilty, I’ve thought of hitting three birds with one stone so here it goes… Twitter, FB Like and Google +1 buttons for individual blogger posts.  Do not you worry.  This is really easy!

1.] Sign In to your Blogger account 

2.] In your Dashboard, choose the blog where you want to place the buttons

3.] Click Layout

4.] Find the Blog Posts Box and click Edit

blogposts

5.] A new tiny window will appear.  Click Show Share Buttons then click Save

sharebuttons 

6.] Now, Click Template 

7.] Click Edit HTML

[REMINDER: Be sure to always Save a Copy of your template/Download Full Template first before editing just in case something goes really wrong.]

8.] If you are given this info:
”Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features. We recommend using the Template Designer first, where you can Add CSS under the Advanced section.”
    --- simply click PROCEED because you’ve saved a copy of your template, right?

9.] Click Expand Widgets 

10.] Look for this code:

<data:post.body/>

or this:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

   --- to easily locate it, on your keyboard, click Ctrl + F at the same time.  A tiny box will appear on your screen.  Paste the above code in the box and click the up and down arrows.

11.] Once you’ve found the code [if you have multiple, always try the first one], insert this:
Note: [Paste the code ABOVE <data:post.body/> to place the buttons below the post title.  Paste the code BELOW <data:post.body/> to place the buttons after the post.]

<div style='float:right'>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
<script type='text/javascript'>      tweetmeme_url=&#39;<data:post.url/>&#39;;       tweetmeme_style = &#39;compact&#39;;       tweetmeme_source =&#39;YourTwitterUsername&#39;;       </script>       <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/> </div>

  --- Remember to change the info in RED with your twitter username.  Do NOT remove any other symbols such as the & and ; or else your code will not work.  Your buttons will look like this:

compactbuttons

Note: If in case you only want to add a certain button, only copy the code needed without deleting the codes in GREEN.

   --- Gray - Facebook Like Button
   ---
Yellow - Twitter Button
   --- Pink - Google +1 Button

12.] Do NOT Save yet.  Click PREVIEW first to check if the buttons appear.  It might appear on top or below the post.  If you like what you see, now is the time to Save your template.

Google +1 Button NOT showing?

>>> If in case your Google +1 button does not show up, you have to do this:
   --- Go to Edit Template, Check Expand Widgets and look for this code:

</body>

>>> ABOVE it, add this code:

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

>>> Now, click PREVIEW.  The Google +1 button should now appear on your blog posts.  If you like what you see, Save the template.

That’s it!  Enjoy your buttons and start sharing the love!

Answer/s to question/s:

Reply to Chel:

To have the buttons neatly arranged on the right side of the post, use the code below instead.  If you want it to float to the left, change right to left and if you want it in the center, change right to center.

<div style='float:right'><b:if cond='data:post.isFirstPost'>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like><script type='text/javascript'>      tweetmeme_url=&#39;<data:post.url/>&#39;;       tweetmeme_style = &#39;compact&#39;;       tweetmeme_source =&#39;YourTwitterUsername&#39;;       </script>       <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script><g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/></div>


12 comments:

  1. Mine's a mess. What code did you add to make the buttons neatly arranged on the right side?

    Thank you!

    http://chelinumerable.blogspot.com/

    ReplyDelete
    Replies
    1. Chel,

      You'll find the reply to your question at the bottom of the post. I've added the answer there since some HTML codes are not allowed here in the comment section.

      Hope it helps :)

      Delete
  2. This is helpful for me Maxi! I bookmarked it and will do this once I find time. Thanks Maxi!

    ReplyDelete
    Replies
    1. Thank you Cacai. Hope it helps. Buzz me if you need help :)

      Delete
  3. done adding FB like button on all my blogger blogs! thanks for the share!

    ReplyDelete
    Replies
    1. Hello Yuuki.

      Checked your blog and FB Liked the latest post. It's working! Yipee!

      Delete
    2. thanks but i cant see the FB button on individual posts...nasa main page lang sya...

      Delete
    3. Oh. Ang weird. :( Try mo ulit. I changed a few things para mas madali.

      Delete
    4. thanks! will try again...

      Delete
  4. my 4th visit here .i tried your tutorials for FB like.I put it below my post title then remove it again after a day and now I was thinking of putting it back later. thanks for this.

    ReplyDelete
  5. Oh, thanks for this! I've been meaning to add these 3 important buttons on each of my posts. I was actually going to ask you personally about it, good thing that I saw this link on filblogatw.

    ReplyDelete

data:newerPageTitle data:olderPageTitle data:homeMsg
Related Posts Plugin for WordPress, Blogger...