Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

“You Might Also Like” Slideup Facebook Widget for Blogger

2 min read

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 red highlighted value with your Facebook Application ID which you have created earlier. The 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 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.

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Facebook Like Widget for Websites, WordPress and Blogger

The Facebook Like widget, which I have brought for you today is unique and coolest among its kind of widgets and plugins and you...
Rehmat Alam
1 min read

How to Add “Contact Me” Form and Sticky Button…

Google’s Blogger is though providing a brilliant free blog hosting, but some limitations are also there on Blogger. One of these limitations is, Blogger...
Rehmat Alam
2 min read

Attractive Floating Social Media Buttons Widget for Blogger

Are you searching for a social media profiles widget for your blogspot blog? If yes, then my recommended social media widget will surely make...
Rehmat Alam
2 min read

8 Replies to ““You Might Also Like” Slideup Facebook Widget for Blogger”

Leave a Reply

Your email address will not be published. Required fields are marked *