This topic contains 0 replies, has 1 voice, and was last updated by 1 year, 5 months ago.
-
Posts
-
How To Add Html5 Facebook Recommendations Bar to Blogger
After publishing a post on our blog on adding HTML5 version of Facebook like box which have the potential to boost your Facebook fans, we mentioned that Facebook has lot of other plugins to offer for bloggers and website owners. So, in this post we will going to discus and adding Facebook Recommendations Bar plugin, which basically increases the page views of your blog by showing recommended posts to your readers after the reader has reached to the specified percentage of your blog page. This plugin will give recommendations of only the posts that were previously liked or shared on Facebook by anyone. The number of likes are displayed below the recommended post title with a small thumbnail. It also won’t annoy your readers because it can be expanded and collapsed and it also has a Like button which can increase the likes of your articles. Facebook previously offered a similar plugin named Recommendations Box which didn’t gain much popularity due to lack of user engagement. But this new Facebook Recommendations Bar plugin does have the potential to increase the page views and impressions which leads to increase in traffic. Today we are once again going to add the HTML5 version and not XFBML version to Blogger. IFRAME version is not supported by this plugin.
How to Install Facebook Recommendations Bar on Blogger?
The installation involves 2 steps. In the first step we will obtain the App ID and the second step is to install the plugin in Blogger. There is also something related open graph markup which we will discuss at the end of the tutorial to avoid confusions. So let’s get started.
Step 1: Obtain Facebook App ID
The Recommendation Bar plugin requires an “App ID” to work properly which is pretty easy to get. Just follow the steps.- Go to your Facebook Apps account and click the ‘Create New App’ button at the top right corner
- In the pop-up box enter the “app name” you want and “Choose a Category” and then click Create App ID button. In our case it is ‘MBB Recommendation Bar‘
- Enter CAPTCHA code and click submit
- Below page will be displayed after entering the CAPTCHA code.
- Now click Settings menu.
a. Copy the 15 digit “App ID” as shown in the image above and store it somewhere as we will need it in further steps
b. In the form, change email ID in the “Contact Email” field if you want Facebook to communicate with you on different email ID for anything related to this app.
c. Below the “BasicTab” just click “App Domains” and enter your blog URL and click Save Changes.
Step 2: Install the plugin in Blogger
Now we will install the HTML5 version in Blogger.- Go To Blogger -> Template -> Edit HTML -> Proceed
- Search For
<body>(Tip:- Use Ctrl + F to search) - Just below
<body>paste the following code
Now, remember the 15 digit App ID we saved before? Copy that and replace *************** with it and save template.
Great!!! You have now successfully installed the HTML5 version of Facebook Recommendation Bar. To test it out, just go to any of your blog post and scroll down to about 40% of the page and wait to around 10 seconds to see the recommended posts in action. This plugin will be displayed only your blog post pages and not on your home page or static pages.
Changes you can make:
- data-trigger is the attribute used to expand the Recommendations Bar after the reader has scrolled to specified percentage. We have set it to 40% and you can change that to any percent you want but make sure you don’t exceed 100
- data-read_time specifies the time the plugin will take to load after the reader has reached the specified percentage which you set above. We have kept 10 seconds which is the minimum time and you can increase it to any time in seconds.
- data-action is used to specify which verb will be display for like button. By default it is kept to ‘Like‘ though you can change it to ‘Recommend‘.
- data-num_recommendations specifies the number of recommended posts that will be displayed. We have kept it to 3. You decrease it to 1 or increase it to a maximum of 5 posts to show.
What about the Open Graph Markup?
Yea, we do remember that. Facebook says you must include the open graph markup (or you can say open graph metadata or meta tags) in your template or else the Recommendations Bar will give you an error. It is actually not compulsory but it is recommended to prevent any present or future errors. So, if you want to avoid the errors, then just paste the following code right after<head>tag and save your template.<!--OPEN GRAPH metadata STARTS--> <b:if cond='data:blog.pageType == "item"'> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta content='website' property='og:type'/> </b:if> <meta expr:content='"en_US"' property='og:locale'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <!--OPEN GRAPH metadata ENDS-->
If you were getting errors before, then it should have been solved now.
Need help?
We tried to keep the tutorial pretty simple and you may not had got any trouble in installing the plugin but if you still need any help, then just let us know in the comments and yea, don’t forget to Share this page via the social sharing button.
Cheers!!!Falow As In
You must be logged in to reply to this topic.