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

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

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

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 :-)

Harleena Singh said...: Hi Mayura,

That was informative indeed :)

Usually we have the like or share options on our posts, and there are people who follow our updates, but they have to choose the follow option by visiting our Facebook profile, and then there is the subscribing option.

The follow feature you mentioned must be working for the main site (your profile of Facebook there) because once someone follows, just like anyone liking your profile, then they always like it or in this case will remain the followers till they choose to unfollow you, isn't it?

Presently I just have the Facebook share option for the posts, and haven't really put up anything other than the usual Facebook like option - I must check this one out and try it too.

Thanks for sharing it with us. Have a nice week ahead :); February 3, 2015 at 1:57 PM
Mayura De Silva said...: Hi Harleena,

I'm glad to hear you have enjoyed this post dear :)

Indeed, the follow feature is associated with your Facebook profile - allowing other people to follow your public updates without having to send your a friend request and get approved :)

Imagine following a public profile on Twitter, and it's exact the same here on Facebook. They will keep getting your public updates until they unfollow you :)

I think Facebook Follow button is apt for a About / Author page of a blog, and again you can have it besides the author name on a post / article as well :) You can be come up with many creative solutions and hope you will try it out as well.

You have a nice week ahead too dear :)

Cheers...; February 3, 2015 at 2:51 PM
Mayura De Silva said...: Hi Satya,

You're welcome, and glad to hear you have enjoyed the post mate :)

Cheers...; February 4, 2015 at 7:25 AM
Kaarunya said...: Hey :)
Wow reading the post with all the inter-linked posts seems like a tedious job but then you always make it seem so simple :p
Blogger should have widget for Facebook follow also but they just promote Google Plus :D
haha I remember how you can be when it comes to accepting friend requests :D *that's what made me laugh :) * I think if they know you they would not think like that :)
Have a great weekend :); February 6, 2015 at 8:18 PM
Mayura De Silva said...: Hi Kaarunya,

Ha ha... Imagine if all of them interlinked posts were within this post? ;) I guess that would have been even tedious for a single post. Don't you think? For those who are familiar with them, they can proceed to the steps here :)

Actually, Blogger and Google+ are products of Google dear :) But Facebook are not. Google has been integrating their social platform into their other products, so Blogger is getting enriched with Google+ features as well.

You know, that's me ;) Only on Facebook though. I have been explaining to most of 'em who asked me why didn't I accept their request, until the Follow feature comes in. That's reasonable from their point of view, but with Follow feature on, they can follow the updates anyway.

You have a lovely weekend too dear :)

Cheers...; February 7, 2015 at 4:15 AM
Kaarunya said...: haha I know :D That's how I say, you make it simple by presenting it that way always :)
I know that's why I think they are partial and promoting only their products nah :p
haha but still they would want to be friends regardless of the follow option nah :p
Take care :); February 26, 2015 at 7:51 PM
Mayura De Silva said...: You got it, Kaarunya ;) And that's very nice of you to say dear.

Yeah, as they both are from Google, we can expect it to happen at any point :) Yet Facebook plugins are easy to implement as well.

May be :D lol... Hence I make most of my updates public.

You take care as well dear :)

Cheers...; February 26, 2015 at 8:01 PM

Mayura4Ever

February 3, 2015