Did you integrate Facebook plugins on your blog or website? The truth is nowadays Facebook social platform is integrated with our lives. Everyone knows Facebook. Most of us had no idea about social media before this milestone in 2004 - Birth of Facebook. But now it's the place where we used to meet our friends and family to share everything in digitized format.
If a friend found something interesting on the web, then he will share it on Facebook. Then it will be shared by many other people who linked to that person too. With the help of a Facebook plugin, would you like to display what content have been shared on Facebook mostly?
As we share our interests at Facebook, most likely we know about our friends and their interests. If we see an interesting post or article shared on a Friend's Facebook wall, we tend to click on it and go through. So the content recommended by friends or people who we know, tend to get more reactions.
That's what Facebook Recommendation plugin focused in too. Whenever a visitor lands on a blog or website where the Recommendation plugin has been implemented, it will personalize the most shared posts, articles or pages and prioritize the links shared by visitors's friends first with the names of friends. But if the visitor doesn't logged in to Facebook when he/she visit your site, the most shared content will show off instead. So, by implementing this plugin, you can gain more exposure to your content and it will carry more social interaction for your content.
Before You Go:
* Unless if you implemented Facebook JavaScript SDK in your site, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.
* Make sure you have implemented Facebook like button on your site to appear user likes or recommendations on Recommendation Box. Read Add Facebook Like Button for Your Website.
That's what Facebook Recommendation plugin focused in too. Whenever a visitor lands on a blog or website where the Recommendation plugin has been implemented, it will personalize the most shared posts, articles or pages and prioritize the links shared by visitors's friends first with the names of friends. But if the visitor doesn't logged in to Facebook when he/she visit your site, the most shared content will show off instead. So, by implementing this plugin, you can gain more exposure to your content and it will carry more social interaction for your content.
Before You Go:
* Unless if you implemented Facebook JavaScript SDK in your site, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.
* Make sure you have implemented Facebook like button on your site to appear user likes or recommendations on Recommendation Box. Read Add Facebook Like Button for Your Website.
Steps:
The implementation is simple enough. Insert Facebook Recommendations plugin code to your website and you are good to go. You can either use XFBML or HTML5 markup.
Note: If you are a Blogger user and wanna add this plugin as a element, add your code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.
XFBML Markup
<fb:recommendations site="[URL of Your Site]" width="[Width in Pixels]" height="[Height in Pixels]" header="true" colorscheme="light" linktarget="_blank" border_color="[Border Color]" font="[Font Family]"></fb:recommendations>
Note: The XFBML markup of this plugin may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.
xmlns:fb="http://ogp.me/ns/fb#"
i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">
HTML5 Markup
<div class="fb-recommendations" data-site="[URL of Your Site]" data-width="[Width in Pixels]" data-height="[Height in Pixels]" data-header="true" data-colorscheme="light" data-linktarget="_blank" data-border-color="[Border Color]" data-font="[Font Family]"></div>
Color Indication Information:
- URL of Your Site
Enter the URL of your blog or website here.
- Width of Recommendations Box
Specify width of the recommendation box in pixels here.
- Height of Recommendations Box
Specify height of the recommendation box in pixels here.
- Enable/Disable Header
Here you can decide that you wanna keep default header or not. By default the header is n the plugin. If you wanna get rid of header, specify false here.
- Color Scheme of Recommendations Box
You can change color scheme of your plugin here. By default, the plugin use light color scheme and if you wanna apply dark color scheme, specify dark here.
- Link Target
Specify where to open the links shown in recommendations plugin. By default it uses _blank to open links in a new browser window or tab. Else you can set this value either _top or _parent.
- Border Color
Specify the border color of Recommendations plugin. Set it blank to use default border color.
- Font Family
You can set the font family to be used in Recommendation plugin. You can leave it blank if you wish it to use default font family.
Enjoy :-)
I tried to remove the border on my site. Seems like facebook did some kind of update which made the border appear regardless of using "data-border-color".
Is there any way to make it work now?
Hi Myrko,
Lately I couldn't change the border color of Facebook Like Box too. However it's possible now.
Seems it's with Facebook Recommendation Box now. I've been trying to change the border, but no luck mate. It keeps default border and you may try again in few days :)
Cheers...
Hi very nice post ! only one thing
The Awesome commenter widget you are using, have you made it by yourself because if possible can you suggest such widget to me
thank you
Tushar
its is really cool!
Hi Tushar,
Thanks mate :)
Well, I haven't create that widget but it was available for users having Disqus comment system on their blogs mate. If you are using Disqus on your blog, you can have it too.
Cheers...