Facebook Recommendation Box to Engage Your Visitors For Longer Time

Facebook Recommendation Box to Engage Your Visitors For Longer Time



Facebook is excel in social networking world that has given huge outcomes and Aids for the web developer as well as bloggers. First time it was limited to social networking then started chatting and finally introducing dozen of developing tools that help Site owner to promote, traffic diverting and many more. We are already well-known about Facebook recommendation Bar that recommend some posts to your visitors. And now it has introduced Recommendations Box that is able to display your posts random basis. We know about a popular widget blogger ‘Random Posts’ widget, similarly Facebook has introduced this widget by the name Recommendations Box. The positive site of this widget is it don’t take extra time to load like Random Post widget. And whenever a visitors will click on new pages the Recommendations Box will display different posts randomly that will help you to increase your page visits.

To install this is very simple just you have to add your domain name and beside of this you may configure App ID and Action types. However we don’t need this two item right now. So let see how to add Recommendations Box in your Blog. 

Step 1 Click On Facebook Recommendation Box

blogger tips

Step 2 Write Your Domain name and your post will be display instantly in right box. 

you can choose Color Scheme light or Dark as well as change Font according your taste. 

Step 3 Now Click on Get Code. A popup window will come with code. You have to choose the Codes 

from HTML 5. And copy the code from Box 1.

Facebook tricks

Step 1 Now Click on -> Template -> Edit HTML

Step 2 Now Find this code <body> by pressing  Ctrl + F

Step 3  Paste the Copied code  Below/after <body> and save your template

 Example: The Code will be like below- 

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 4 Again Go to your Layout tab.

Step 5 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 6 Now Copy the code from Box 2 under HTML 5 Popup window and paste it in 

"HTML/JavaScript" Gadget and Save it.

 Example: The Code Will be like below-

<div class="fb-recommendations" data-site="www.bloggerspice.com " data-width="300" data-height="300" data-header="false" data-font="lucida grande"></div>

Final Output will like below Image-


If you are having any problem to install it just leave a comment below I will try to response as earliest possible time. Cheer's!!!
Open Comment Box
Diego Torres says: 7/11/2013

Please, we need you to help us!

We are trying to load the facebook recommendations widget api as iframe in our ajax loaded page.

The first time We load the page, the facebook's script works, but if We go back to the menu and back to this page where widget is located, then it doesnt load it?

How to solve it?

Mohammad Fazle Rabbi says: 7/11/2013

Hi Toress..It sometime happen if you are using same jquery file several time. I mean duplicate of same file. And send me your site address I will check it. Thanks

Contact Form


Email *

Message *