Facebook offer a social plugin for websites which represent Facebook page of the site and visitors can easily like Facebook page - Facebook Like Box. Facebook Like Box is a popular social plugin you could find on most blogs or websites. It will enable users to like your fan page with a single click while on your blog or website and display how many fans on that particular page. The plugin can be personalized to display faces of existing fans and Facebook page stream too. It is very convenient for visitors who are interested in future updates to subscribe. Would you like to add it for your own site and gain more likes for your Facebook fan page while let them stay connected with your updates?
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 for you.
Steps:
1. You just need to add this code to your website. Either use XFBML code or HTML5 code as you prefer.
Note: If you are a Blogger user, add your plugin 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:like-box href="[URL of Your Facebook Fan Page]" width="[Width in Pixels]" height="[Height in Pixels]" colorscheme="[Like Box Color]" show_faces="[Enable/Disable Showing Faces of Fans]" border_color="[Color of Border]" stream="[Enable/Disable Stream]" header="[Enable/Disable Header]"></fb:like-box>
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-like-box" data-href="[URL of Your Facebook Fan Page]" data-width="[Width in Pixels]" data-height="[Height in Pixels]" data-show-faces="[Enable/Disable Showing Faces of Fans]" data-border-color="[Color of Border]" data-stream="[Enable/Disable Stream]" data-header="[Enable/Disable Header]"></div>
Color Indication Information
- URL of Your Facebook Fan Page
- Width of Facebook Like Box Plugin in Pixels
- Height of Facebook Like Box Plugin in Pixels
Just specify height of your like box in pixels. Else you can leave it blank and let plugin decide the height automatically.
- Color Scheme of Like Box
Here you are eligible to select the color scheme of the Facebook like box. Either specify light or dark here as you prefer.
- Show Profile Pictures of Fans
You can show off profile pictures of your fans through your like box. Specify true if you would like to display faces, or else specify false here.
- Color of Facebook Like Box Border
Specify border color of the like box here, either using hex color value or just specify color name.
- Display Steam of Your Fan Page
Specify true if you would like to display stream of your public fan page or else specify false.
- Facebook Like Box Header
You can elect to display default header with label 'Find Us on Facebook' here. Either specify true or false as you prefer.
A very good and informative article indeed . It helps me a lot to enhance my knowledge, I really like the way the writer presented his views. I hope to see more informative and useful articles in future. buy facebook live stream viewers
ReplyDelete