Build Online Store! | Penguin Panda Series - New! | 4 Rules To Make Money | SEO Settings | Facebook Popup 1, 2, 3 | Mashable 1 , 2


Monday, June 13, 2011

Add Facebook Like Box at The Bottom Of Posts


Pin It

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.


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

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 »


Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter

19 comments:

Comment Page :
samsexy98 on 10:19 AM, June 14, 2011 said... #

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


.
.
ACTUAL CODE HERE
.
.

samsexy98 on 10:20 AM, June 14, 2011 said... #

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>

Mohammad Mustafa Ahmedzai on 1:38 AM, June 15, 2011 said... #

@sam

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

Anonymous said... #

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

adrian on 9:51 AM, July 12, 2011 said... #

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

adrian on 9:57 AM, July 12, 2011 said... #

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

محمد الدهيمي on 8:59 PM, July 27, 2011 said... #

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

Aldrin Fabay on 6:22 PM, August 30, 2011 said... #
This comment has been removed by the author.
Let's Wage a War Against Pornography in Pakistan on 11:28 PM, October 18, 2011 said... #

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

mahesh on 10:10 PM, November 25, 2011 said... #

this apear on top of my blog wht i do.

Traveller on a Shoestring on 8:10 AM, December 07, 2011 said... #

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

Legendkid on 3:55 AM, January 26, 2012 said... #

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

$hubham Meht@ on 12:02 PM, February 07, 2012 said... #

Nyc works for me..

How To Save Ur Blog From Sopa/pipa

laura@imnotatrophywife.com on 8:24 AM, February 21, 2012 said... #

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!

Arnav Attri on 11:21 PM, February 26, 2012 said... #

Worked like a charm!! Mega love!

AmalExpress on 3:39 AM, February 28, 2012 said... #

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

Nihit Dalmia on 3:49 AM, March 22, 2012 said... #

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

Lemari Abby on 12:05 AM, March 27, 2012 said... #

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

Niharika on 1:37 AM, April 30, 2012 said... #

hai,

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

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

8600+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

2601+ Followers

My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact |