Lately Facebook introduced another useful feature for everyone - Subscriptions. Subscriptions will let other users to see your public updates shared on your Facebook profile. It will help them to see your updates and conversations on their news feed and they will be able to engage with your conversations too. So people who are interested in you may find this feature much useful for them and you can share your updates beyond your friends. With that feature, now Facebook offers Subscribe plugin which allows users to subscribe to your profile from your site. Isn't that nice? Let's create a subscribe button for you and add it to your site.
Before You Go:
* You need to enable subscriptions for your profile before you implement this subscribe plugin. If you are not enabled subscriptions on your profile, allow subscriptions from your subscription tab.
* 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.
Steps:
You just need to implement Facebook subscribe button at the place where you want it to appear. Mostly it may your author/about me page or near the contributor's name. You can either use XFBML or HTML5 markups.
Notes:
* 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.
* 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#">
Standard Layout Style
XFBML Markup
<fb:subscribe href="[URL of Your Profile]" width="[Width in Pixels]" show_faces="[Enable/Disable Showing Faces]" colorscheme="[Color Scheme of Plugin]" font="[Font Family]"></fb:recommendations>
HTML5 Markup
<div class="fb-subscribe" data-href="[URL of Your Profile]" data-show-faces="[Enable/Disable Showing Faces]" data-colorscheme="[Color Scheme of Plugin]" data-font="[Font Family]" data-width="[Width in Pixels]"></div>
Button Count Layout Style
XFBML Markup
<fb:subscribe href="[URL of Your Profile]" layout="button_count" width="[Width in Pixels]" show_faces="[Enable/Disable Showing Faces]" colorscheme="[Color Scheme of Plugin]" font="[Font Family]"></fb:recommendations>
HTML5 Markup
<div class="fb-subscribe" data-href="[URL of Your Profile]" data-layout="button_count" data-show-faces="[Enable/Disable Showing Faces]" data-colorscheme="[Color Scheme of Plugin]" data-font="[Font Family]" data-width="[Width in Pixels]"></div>
Box Count Layout Style
XFBML Markup
<fb:subscribe href="[URL of Your Profile]" layout="box_count" width="[Width in Pixels]" show_faces="[Enable/Disable Showing Faces]" colorscheme="[Color Scheme of Plugin]" font="[Font Family]"></fb:recommendations>
HTML5 Markup
<div class="fb-subscribe" data-href="[URL of Your Profile]" data-layout="box_count" data-show-faces="[Enable/Disable Showing Faces]" data-colorscheme="[Color Scheme of Plugin]" data-font="[Font Family]" data-width="[Width in Pixels]"></div>
Color Indication Information
- URL of Your Facebook Profile
This is the URL of your Facebook profile.
i.e: https://www.facebook.com/Sunnyhowlader
- Width of Subscribe Plugin
Specify the width of your subscribe plugin here in pixels.
- Enable/Disable Showing Faces of Subscribers
If you wish to show faces of subscribers underneath the button, then assign true here. Else use false here.
- Color Scheme of Plugin
Either you can specify dark for dark color scheme, or light for default color scheme.
- Font Family
You can specify the font family to be used in Subscribe plugin. You can leave it blank if you wish it to use default font family.
0 comments:
Post a Comment