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!!!
Facebook Recommendation Box to Engage Your Visitors For Longer Time
4 Stars stars - "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 th...

Post a Comment

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?

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *