"You Might Also Like" Slideup Facebook Widget for Blogger

you-might-also-like-facebook-recommendation-blogger

Add "You Might Also Like" Sliding-up Facebook Recommendation Widget to Blogger

Blogs suck when visitors leave them soon after entering or without viewing any other pages than the landing page. "You Might Also Like Facebook Sliding Up Recommendation Box" is one of the great Blogger widgets which shows random posts from your Blogger blog to your visitors in a sliding-up box. This widget uses the data from your Facebook shared content and recommends random posts to your visitors. To add this "You might also like" widget to your Blogger blog, you need to create an application on Facebook. Don't worry, it is very easy and free to create an application on Facebook. If you already have created an application for your blog URL before, skip this step and use the required details in the final step. If you haven't created an application yet, follow below steps to create your Facebook application:

Create a Facebook Application for Your Blogger Blog

1. Visit application section of Facebook Developers at https://developers.facebook.com/apps. You will reach the screen as shown in the below screenshot. Click on "+Create New App" link near right top corner of the page.
facebook-api-for-you-might-also-like
2. After clicking on +Create New App, you will receive a popup box asking you to provide name for your application. Write desired name in the App Name field and click on Continue. Leave the second box empty.
facebook-api-blogger-you-might-also-like-widget
3. In the next box, type in the correct words to proceed.
4. Now you need to set the URL of your blog for your created application. You will reach a screen like the below screenshot where click on Website with Facebook login, enter URL of your blog and then Save the changes.
you-might-also-like-facebook-recommendation-blogger
The App ID of your application is required which is displayed under your application name like it is shown at the top of above screenshot.

Now you have completed the first step. In the second and final step, you will need to edit HTML of your Blogger blog's template. To do it, follow the below procedure.

Edit Your Blogger Template to Add "You Might Also Like" Box

1. Login to your Blogger dashboard, select your blog and click on Template from sidebar and download a full backup of your template by clicking on Back/Restore before editing it. Do it always before editing the code to prevent any loss.
backup-restore-blogger-template
 2. After you download the backup of your template, you can now edit the HTML without any fear. Click on Edit HTML to proceed
edit-blogger-template

3. Now press Ctrl+F, find <html and replace it with the below code
<html xmlns:fb='http://ogp.me/ns/fb#'
4. Now find <head> and paste the below code just after it
<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 != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
5. Finally, find <body> and paste the below code just after <body> by modifying the App Key and other highlighted details
<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=419805298092921';
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>
    </script>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='60' side='right' site='http://supportivehands.net' trigger='40%'/></div>
    </b:if></b:if>
Replace brown highlighted number with your Facebook Application ID which you have created earlier. Red highlighted digit is the number of recommended posts to be shown and the blue highlighted number specifies the seconds after which the box slides up automatically. This duration is counted from the time when your visitor enters your blog. The lime colored URL will be obviously your blog's URL.

Need any help? If you need any help in adding this box to your Blogger blog, we can assist you for free. Comment below or contact us.

Labels: , ,