Add Facebook “You Might Also Like” Slider to your Blogger Blog
Before starting this Tutorial, it would be important to inform you that this Idea was first of all Published by Tricky Adesnse and thus the Idea Originally belongs to that Blog. It is among the leading blogs in the world. I am posting this tutorial here because I was consistently getting many request to provide a Tutorial to Add Facebook “You Might Also Like” Slider in Blogger. So here is the tutorial:
What this Facebook “You Might Also Like” Slider Actually Is?
It is a Facebook Application which is Popularly known as “Facebook Recommendation Bar” .It appears at the right below corner in your Blogger Blog as sliding box which recommends users about your Other related Posts.It can help you to bind your Users in your blogger for longer time.This blog is built using WordPress and I am not using this Application here but I have used it in my other blog BR TRICKS and till now, it has done a good job. A typical look of the same is shown below:It appears when User scrolls the scrollbar. However it is automatic which means there is no need to do anything manually which is a big boost for Bloggers.
How to Add this Facebook “You Might ALso Like ” Slider Box to your Blogger Blog?
As Already written above, this is a Facebook Application so First of all you will have to create an Application for your Blogger Blog at Facebook. Simply follow the below given Steps to Add this box to your Blog:- Log in to your Facebook Account and then Click on Create Facebook Application for Free
- You will see a new Screen with plenty of Options, simply click on a Button named “Create an App” .Its image is shown below:
Create Facebook App
- A new Screen will Appear with “Create New App” title.It will looks like below given image:
Facebook Create App
- As shown in Above Picture, type “My Recommendation Bar” in App Name field. There is no need to add any other field so simply Click on “Continue” button.
- A Captcha will Appear which is meant for the verification purpose. Enter the correct words and click on Continue there to bypass that screen. It will looks something like below given picture:
Facebook App Captcha
- Now you will see the Below Given Screen. Here you will have to enter some minor details about your blogger blog.
Facebook Recommendation App
- Click on “Website with Facebook Login” option. You will see a text box there. As shown in above picture, Add the url of your Blogger blog in the text box and then click on “Save Changes” button. Do not do anything else.
- Now you will see the following screen:
Facebook App ID
- Copy the “App Id” for future Use. Now you have created your Application and you need to insert it on your Blogger blog. Steps for the same are explained below.
- Go to Blogger > Log in to your Account>Template
- Backup your template. This step is recommended to protect your blog from any kind of damage.
- Click on Edit HTML > Proceed
- Search for <html and replace it with <html xmlns:fb=’http://ogp.me/ns/fb#’ .It will make your Template compatible with Facebook Recommendation bar.
- Now search for <body> and Paste the below given code just after <body> tag
<div id=’fb-root’/>
<script>
//CDATA[
(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&appId=Facebook App ID“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
//]]>
</script>
<b:if cond=’data:blog.pageType == "item"’><b:if cond=’data:blog.pageType != "static_page"’><div style=’z-index:999999; position:absolute;’>
<fb:recommendations-bar action=’like’ max_age=’0′ num_recommendations=’3′ read_time=’10′ side=’right’ site=’http://blog url‘ trigger=’40%’/></div>
</b:if></b:if>
- Now Replace Facebook App ID with your Facebook ID (15 digits) which you just created in Above Step.
- Replace http://blog url with your blog such as http://brtricks.com or typical http://xyz.blogspot.in
- Now Search for <head> tag in your Template and Paste the below given code just below the <head> tag.
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<b:if cond=’data:blog.metaDescription != ""’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
</b:if>
- Finally Save your Template and Enjoy.. Open your Blog again. You will definitely see a recommendation bar, something like:
Facebook recommendation
What are your Views about this Facebook ”You Might Also Like” Slider
Just Use it and share your views about this Slider. Is it helpful for you? Share your views by commenting below.
No comments:
Post a Comment