Add Facebook Like Box at The Bottom Of Posts


imageFacebook like box is a great plugin that lets Facebook users to indirectly subscribe to your blog updates via their Facebook accounts. Your website visitors will receive your blog updates on their Facebook Homepage. Before you add the Facebook like box below blogger posts or on any part of your blog, you will need to create a Facebook Like Page by reading this tutorial,

You can see this box appearing below all my posts. This is a better area to place your like box than the sidebar because it is the next thing your readers will see after having read your post. So this area can increase the number of your blog likes. Lets get to work then!

Adding Facebook Like Box Below Blogger Posts

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand widget Templates" box
  4. Search for this,

<data:post.body/>

Just after it paste the code below,

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744&amp;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/>

 

Make this change please:

  • Replace the bolded blue text with your Facebook Like Page Link (Do not include http://)
  • In your Page URL replace all back slashes i.e ( / ) with %2F

for example if your Like Page URL looks like this,

Facebook Page URL

then after replacing the back slashes with %2F it will look like this,

www.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744

 

  •     To change the width, just adjust the value 590

5.   Save your template and you are done!

If you faced any problems just let me know. Peace and Blessings.

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

42 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Added. But you will need to add the following extra code:


    .
    .
    ACTUAL CODE HERE
    .
    .

    ReplyDelete
  2. Hehe the code didn't came??
    Here it is.. Should display this time..

    Added. But you will need to add the following extra code:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    .
    .
    ACTUAL CODE HERE
    .
    .
    </b:if>

    ReplyDelete
  3. @sam

    Yes smart brother. This will hide the box on homepage. Thanks for reminding others. :>

    ReplyDelete
  4. what does the links to this post post option and create a link do?

    ReplyDelete
  5. Hy.i making now a blog..i tried your code and dosn`t work for me..i make step by step and still don`t.must to integrate the script in one widget?ty

    ReplyDelete
  6. I foud a solution..i puted all that code in one widget and now it works...thanx

    ReplyDelete
  7. thanks ... i used the same way to put a feedburner ms .

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. I done it, but it came at the end of every post, i want to put at right side of my blog, please help me regarding this,

    thanks in anticipation

    ReplyDelete
  10. this apear on top of my blog wht i do.

    ReplyDelete
  11. I tried this but it doesn't appear on my post :( please help! http://travel-on-a-shoe-string.blogspot.com

    ReplyDelete
  12. Is there a blog tutorial how to add facebook page to the blog homepage? I want to add it on my blog here-Jamb Admission List Thanks

    ReplyDelete
  13. Do you have the code and instructions to post outside of my blog posts (on the sidebar). I understand why it makes sense to post inside the blog post, but not all of my posts are read, but my home page is the first one viewers see. Thanks!

    ReplyDelete
  14. Worked like a charm!! Mega love!

    ReplyDelete
  15. it worked.thanks bro.best wushes from pakistan:)

    ReplyDelete
  16. Thanks Mohd.. I have applied it to my blog but tweaked it & it gives excellent result. Also, provided with complete graphical presentation "How to DIY". I have also solved the problem of not having Like Page ID. Have a look at my Blog & let me know what do you think of the same.

    http://www.yourbloggingtips.com/2012/03/facebook-like-box-widget-for-blogger.html

    ReplyDelete
  17. Like your tutorial very much. It means a lot for a beginner like me

    ReplyDelete
  18. hai,

    i am unble get the like box below the posts. please help me

    ReplyDelete
  19. well.. i couldn't put it in the right place...
    my looks like this : gadgetneed.blogspot.com

    ReplyDelete
  20. yar ye

    4 STEP VLI CHEZ HI NH NILI RAHI EDIT hTML am :(
    kitne nechey hain any rough estimate ?

    ReplyDelete
  21. Help, please, I can't do for my blog: www.mkvfilms.net

    ReplyDelete
  22. thank you so much. keep up the good work.

    ReplyDelete
  23. i am fully follow this rule but not show a facebook like box in my blog please inform me

    ReplyDelete
  24. Master,dosen't work so Far in Mine...........help Please

    ReplyDelete
  25. it's work very well man...but i do this trick on my blog, suddenly my facebook comment has disappeared! can you help me on this? :(

    ReplyDelete
  26. Your tips are always awesome but when i clicked on like button n entered email & pwd than page gets refresh n nothing happens than if i clicked again it shows confirm link than its liked, Means i have to clicked two times. plz check it.
    My blog:- http://iwebtechexpert.blogspot.in/

    ReplyDelete
  27. i applied this widget but its preventing my pages of privacy and contact to load only aloneplease se pages on my blog you will understand http://friendstechworld.blogspot.in/

    ReplyDelete
  28. hello sir,i have a little problem on this because when i try to seach the i found 4 of them and i don't know which of them i select and put the code beside them.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. Hi,

    I'm using your codes to work on my blog
    However i meet some problem!

    Can i know how we can change the position? Where and what must i add?
    Can we just open a html/javascript page and insert the on top coder given?

    Thank you so much!
    Do send me an email to ohjesika.gmail.com

    ReplyDelete
  31. Hi There, It worked great for me, but in stead of "kind of Contact section" of my blog it appeared at the end of the posts. :(
    I guess, I should add it somewhere else in stead of BODY but I dont know where. Will you help me with it, please? thank you.

    ReplyDelete
  32. Its nice... but I want to put Like but for Blog post..
    So when any one hit like button then that notification should be post on wall...

    Can we put link of blog post instead of fp page for like ?

    http://female-modeling-photos.blogspot.in/2013/02/very-beautiful-sexy-model-photo-in.html

    this is link i want to put... so is it possible? - See more at: http://www.mybloggertricks.com/2011/05/add-facebook-like-and-send-button-to.html?showComment=1362050485648#c1942554414250330348

    ReplyDelete
  33. Yes. I did work for me. However it is appearing inside each article. I am looking this to appear on the home page. Can you please help. Here is my blog link for your reference http://visionofinspiring.blogspot.in/

    Looking forward to your reply...

    ReplyDelete
  34. Amiable articles and the blogs really helped me a lot, thanks for the valuable information.hacker un compte facebook

    ReplyDelete
  35. thanks a lot friend..
    my blog
    http://polymerprocess.blogspot.com/

    ReplyDelete
  36. An enormous round of applause, continue the great work.
    increase facebook likes

    ReplyDelete