February 3, 2015

How to Add Facebook Follow Button for Your Website




What are your prerequisites when it comes to connecting with someone on Facebook? Probably, from acquaintances to close family and friends. May be, no prerequisites at all. Yet, some of you may just like me - keep in touch with a small circle of loving family and friends. Still... Have you got a growing list of pending friend requests awaiting your confirmation?


Facebook Follow


Don't you wish if you could elaborate why you don't accept every friend request? I did. Some even called me egoistic, for not wanting to befriend with them on Facebook ;)

But those days are over now. If you watch whom you connecting with, and still care about the people who interested in hearing more from you, you may find Facebook's Follow feature is the best solution available right now. Instead of sending and awaiting for their friend requests to be approved, they can get your public updates immediately in their news feed.

We have already covered the topic on how you can let anyone follow your updates on Facebook. Hence I don't think we should be talking about this feature all over again.

Now here I'm gonna talk about extending this feature out of Facebook - to the web. Especially if you manage a blog or website.


Follow Button


If someone interested in following your updates on Facebook, he / she has to come over to your Facebook profile and follow you. But if you are a publisher, now you can invite people to follow your updates from your blog / website - following made easy.

Facebook has a social plugin reserved for this exact feature - Facebook Follow Button.

Hmm... You may have known it as Subscribe button. Then Facebook wanted to name it as Follow to resonate better with people.

"We are updating the Subscribe button to become the Follow button, because we found it is a term that resonates better with people who use Facebook. No change is required to your code. All apps will automatically be migrated to the new button."

Implementing Facebook Follow plugin allows your readers and visitors to subscribe to your Facebook updates while they are on your site. Saves the hassle, isn't it? They don't have to visit your Facebook profile and next time, they will find your public updates wandering in their Facebook News Feed.

Facebook's Follow button is similar to its Like plugins, and following you on Facebook is one click away. But keep in mind that this plugin works only for your personal profile. For your business / brand pages, still you have to implement Facebook Like Box or Button plugin.

Are you ready to invite people whom want to hear more from you? Let's take a look how you can implement the Follow button.


Before You Go:

* You need to enable Facebook Follow feature prior to the implementation of this plugin. If you don't have Follow feature enabled, read Let Anyone Follow Your Social Updates on Facebook.

* Unless if you have Facebook JavaScript SDK integrated with your site, you have to implement it. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.


Steps:

Now it's a matter of placing the personalized code snippet where you want it to be rendered. Pick your preferred code snippet and place where you want your plugin to be appreared.

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:follow href="[URL of Your Profile]" width="[Width in Pixels]" show_faces="[Enable / Disable Showing Faces]" colorscheme="[Color Scheme of Plugin]" font="[Font Family]"></fb:follow>


HTML5 Markup

<div class="fb-follow" 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:follow 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:follow>


HTML5 Markup

<div class="fb-follow" 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:follow 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:follow>


HTML5 Markup

<div class="fb-follow" 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/MayuraDeSilva

   - Width of Follow Plugin

Specify the width of your follow plugin here in pixels.

   - Enable / Disable Showing Faces of Followers

If you wish to show faces of your current followers 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 Follow plugin. You can leave it blank if you wish it to use the default font family.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.