Friday, July 26, 2013

How to Add Facebook Like Box to Blogger With Pictures: No HTML Editing Required.

If you liked our article, Like us back.

So you are here because for the love of you every other article on the internet that requires you to add a "Facebook like Box" with Pictures to your blogger blog, requires that you go into the template profile and find some header or footer and place some snippet of code that God knows does what to the functionality of your blog?. And God forbid if you were to miss understand and mess up the process. Rest assure this article will have you up and running in less than five (5) minutes with no need to edit any HTML code. Lets get started:
You need a Facebook like box looking something like this:


My sample



1. First create a Fan Page on Facebook(or Facebook profile), if you have already preferably in the name of your blog go on to the second step.

2. Go to Facebook developers like box page and fill-out the like box customization signup, be sure to fill out all the information:

Like Box customization wizard.


For the Facebook  page URL go to your your fan page or Facebook profile and log in and copy the address from the address bar and paste it in the first highlighted area similar to above pic:

Address Bar info-copy this from Facebook

Make sure the: Show faces box is checked, you may experiment with the light and dark color scheme based on what best fits your theme. Leave the height alone unless you are aiming for a specific height, also after testing you may come back and adjust the width to your liking or if you know the width you can go ahead and plug it into the width in the box now. Keep an eye on the preview to get your like box as you desire.When satisfied click get code and select "IFRAME" and highlight and copy the code:


3. Next log into your Blogger.com account dashboard and go to settings, layout option and select add Gadget and paste the IFRAME code there:

Select Layout.

Select add a Gadget.

Select HTML/JavaScript

Paste IFRAME Code in the highlighted area

4. save the newly added code, and move it to a position you desire or leave it in place. Save the layout and visit your page to see the brand new like box with pictures,remember to change anything including the width simply go back to Facebook developers and adjust the settings and recopy the code and the changes will apply. Hope that helps, any question feel free to ask in the comments below.


You may Also like: 


How to Add Google Analytics Code to Blogger.com- The simple and effective Way,No HTML Coding Skills Required.





No comments:

Related Posts Plugin for WordPress, Blogger...