Add Facebook Like Box Just Below Of Every Blogger Post - Helper Blogger

Blogger Widgets | Templates | Tutorials

Helper+Blogger+Refreshed+%25284%2529

Thursday, 10 May 2012

demo-image

Add Facebook Like Box Just Below Of Every Blogger Post

Facebook

Facebook is largest social media company in the world having alexa rank 2.If you have enough number of subscribers on facebook then just automatically publish your posts on your wall and get the traffic.Previously we shared two tutorials about adding facebook like button and twitter tweet button just below of blogger posts this time we will add a full width facebook like box below of every blogger posts.With using facebook like box your readers/visitors can like your fan page directly through your blog so that this box will increase number of your facebook fans.Now lets see how to add it to blogger blog.Also you can see the demo at the bottom of this page.

How To Add Facebook Like Box To Blogger Posts?

  1. Go to Blogger Dashboard > Design > Edit HTML
  2. First take a backup of your template
  3. Tick the expand widget check box
  4. Find for below code in your template

<data:post.body/>

Just after it paste below code

<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=570&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:570px; height:180px;" allowTransparency="true"></iframe></b:if>


  • Now replace helper.blogger with your own fan page username
  • To change width of like box,adjust the value 570
  • If you wish to change heigh of like box then just edit the value 180

Live Demo â–¼



13 comments:

  1. blank

    It didn't work for me.

    ReplyDelete
    Replies
    1. blogger_logo_round_35

      ok now find

      <div class='post-footer'>

      replacing

      <data:post.body/>

      now add 2nd code(from above post) just below of this code......

      <div class='post-footer'>

      Delete
  2. transparent

    hi i really need to have pagination for mobile view of blogger currently the look of my pagination is like this Pages (28)12345 Next but i need a pagination which look like this First 12345 Last. We all know that pagination is one of the best gadget to add more page views. Before I used First 12345 Last as i found that on the web it works for me but when i click the second page and my site is in mobile view it turns to desktop view it is not comfortable for my visitors who only using mobile phone to access my site as page is to big to grab by mobile browser. Temporarily i used Pages (28)12345 Next as i its a mobile friendly pagination. I hope you can help me. pls send me an email if you have a solution for my problem mrbrowsegierza@gmail.com. Thank you.

    ReplyDelete
  3. blank

    Wow! i was looking for this tip very long, thank u very much my dear

    ReplyDelete
  4. blank

    Now I have inserted it in to my blog,thanks a lot

    ReplyDelete
  5. appley

    Hey I can't find where to add it. If I could get help that would be awesome!

    ReplyDelete
  6. blogger_logo_round_35
  7. blank

    thank you very much

    ReplyDelete
  8. blogger_logo_round_35

    how to do, when click photo/video, the button like will appear and need to click the like button before see the photo. please assist.

    ReplyDelete
  9. blogger_logo_round_35

    hey thnx dude,its pretty cool.i just added it and its awesome.plz see it http://trickshubz.blogspot.in

    ReplyDelete
  10. blogger_logo_round_35
  11. blogger_logo_round_35
  12. blogger_logo_round_35

    These sites have most probably buy Facebook fans reached every home and made people interactive.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM

Contact Form

Name

Email *

Message *