How To Add Facebook LIKE Button To Your Blog(Blogger/Blogspot)


If you are a blogger, adding the Facebook LIKE button to your blog will surely help in building more traffic to your blog. Today, I am sharing with you the simple steps to take in adding the button to your blogger blog.

I now have the button on my blog (towards the end of each post) and when anybody likes the post on my blog, once the person clicks on the LIKE BUTTON, the link to the article gets posted on the facebook's wall of the person. Just imagine if the person has a lot of friends on facebook. Facebook will notify ALL his/her friends that the person LIKES the article. If he/her friends get attracted by the title of the article, am sure you will agree with me that they will definite click to check out the article, which simply means MORE TRAFFIC FOR YOUR BLOG.

So, How Do I Add It To My Blog?

First, I will give you the code for the button and then you will have to decide where to add it in your blog posts.

Facebook Like Button Code :

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
    </b:if>


So, Where DO I Put This Code?

Before you apply any changes to your blog, always BACK UP YOUR BLOGGER TEMPLATE.

In my blog, I decided to put the LIKE button below my blog posts, so that the person reading my blog post might find it easier to LIKE the article once he /she finishes reading the blog post.

So, Login to your blog, In your dashboard click 'Layout' > 'Edit Html' > Tick the 'Expand Widget Templates' box.

Inside the EDIT HTML box, you will need to find this highlighted code <div class='post-footer'>

To easily find the code, PRESS Ctrl and F on your keyboard. You should now see a search bar appearing, down on the webpage (You will easily see this if you use Mozilla Firefox browser).

In the search box, copy and paste the code above ( <div class='post-footer'> ) and click find.

Once you are able to locate the code, PASTE the facebook LIKE button code directly below / under <div class='post-footer'>

Click on SAVE TEMPLATE and then preview any of your blog posts. You should now see the FACEBOOK LIKE BUTTON below your blog post. Try it by clicking on it and the link to your blog should appear on your facebok wall.

Thats All.

You can also add it to different locations. It all depends on you.

If you want to add it before your blog posts, you can add it BEFORE <data:post.body/>
If you want to add it below your blog posts titles, you can add it BELOW <div class='post-header-line-1'>
If you want to add it below your blog posts, you can add it UNDER <data:post.body/>

I hope it works..


If you have any question to ask or just want to appreciate this piece of information, kindly make use of the comment form below this article on my blog.

In my future posts, I will be writing more extensively about more hacks you can add to your blogger blog and also ways you can drive more traffic to your blog.

So, for you not to miss those and and also my future free Ebooks, freebies, articles and be getting them right inside your email inbox even when you are not on the internet, kindly go to http://feedburner.google.com/fb/a/mailverify?uri=SecretInfos-Ogbongeblog and enter your email. Once entered, you will have to check your email INBOX or SPAM FOLDER for a confirmation email containing a confirmation link.

Once you verify your email by clicking on the confirmation link in the message, YOU WILL NEVER MISS MY FUTURE ARTICLES AND FREEBIES AGAIN.

Wait, there is probability that you are reading this article on another website which is not my blog. If that is the case,then you will not be able to see links to the RELATED ARTICLES for this article. To check out the related articles, gently go to my blog, www.ogbongeblog.com

Cheers !!!.




Comments

  1. Hi, I really like your post how to ad facebook like button to your blog. I need it. This is your big effort. Thanks.

    ReplyDelete
  2. @Wasim... Thanks so much for the compliment. I hope you have subscribed to the blog.. I will check your templates site too

    ReplyDelete
  3. Hi
    I stumbled on ur blog thru one of my fellow bloggers link...and i must say it has been very helpful...i really dont drop comments on other blogs but i must say ur teaching have been GREATLY helpful...keep us the good work...am a new fanatic visitor to ur blog.

    ReplyDelete
  4. wow!..glad i just attracted a fanatic visitor. Thanks for ur comment. Will keep trying my best to add more useful content. cheers!

    ReplyDelete
  5. Bros,im short of words..keep up your good works..im a newbie into blogging,and your posts has helped me alot!

    ReplyDelete
  6. HI, nice post.any idea of how to add the Facebook like icon to mobile templates on blogger?

    ReplyDelete

Post a Comment

We Love To Hear From You But Don't Spam Us With Links!

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post or you're trying to ask question about an old post, please drop it at our discussion platform here.

THANKS.