Facebook Subscribe Button Launches

Facebook has launched new "Subscribe button" for websites. Subscribe button is a social plugin that any site can add to give visitors the option to subscribe to contributors in one click. "The Subscribe button for websites works just like the button on Facebook; once clicked the user will begin seeing the public posts of the […]

Facebook Subscribe buttonFacebook has launched new "Subscribe button" for websites. Subscribe button is a social plugin that any site can add to give visitors the option to subscribe to contributors in one click.

"The Subscribe button for websites works just like the button on Facebook; once clicked the user will begin seeing the public posts of the person they have subscribed to in his or her News Feed," blogged Facebook.

The company notes that when clicked "The subscribe action is also shared -- allowing others to subscribe directly via the News Feed stories, and further increasing viral distribution." This gives Facebook's button a distinct advantage over Twitter's, as the action of following someone through Twitter's button doesn't appear in the main tweet stream, only a secondary stream. A "Follow" click will probably only nab you 1 follower, but a "Subscribe" click could create a viral chain that nets you many new Subscribers.

Developers can add the button to their sites via XFBML or iframe, and choose whether to display an author's Subscriber count and the faces of existing subscribers.

Here's how to add Subscribe button to your web site / blog (s)

An XFBML version uses the JavaScript SDK, and provides more versatility, such as dynamic resizing, and the ability to act on subscribe events in real time. The following code will load and initialize the JavaScript SDK with all common options. Replace YOUR_APP_ID and WWW.YOUR_DOMAIN.COM with the appropriate values. The best place to put this code is right after the opening <body>

<div id="fb-root"></div>
<script>window.fbAsyncInit=function(){FB.init({appId:"YOUR_APP_ID",channelUrl:"//WWW.YOUR_DOMAIN.COM/channel.html",status:true,cookie:true,oauth:true,xfbml:true})};(function(b){var a,c="facebook-jssdk";if(b.getElementById(c)){return}a=b.createElement("script");a.id=c;a.async=true;a.src="//connect.facebook.net/en_US/all.js";b.getElementsByTagName("head")[0].appendChild(a)}(document));</script>

Now, add the following snippet to your HTML:

<fb:subscribe href="https://www.facebook.com/zuck" width="450"></fb:subscribe>

Snippet for HTML5-compliant markup:

<div class="fb-subscribe" 
  data-href="https://www.facebook.com/zuck" data-width="450">
</div>

And the iframe version:

<iframe src="https://www.facebook.com/plugins/subscribe.php?
  href=https%3A%2F%2Fwww.facebook.com%2Fzuck
  &amp;width=450&amp;appId=APP_ID" scrolling="no"
  frameborder="0" style="border:none; overflow:hidden; width:450px;"
  allowtransparency="true">
</iframe>