Facebook Recommendation Box to Engage Your Visitors For Longer Time

Facebook Recommendation Box to Engage Your Visitors For Longer Time

Comments: 2


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!!!

Related Post

Speak Your Mind

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

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *