How To Add The Facebook ‘Subscribe’ Button To Your...

Toward the end of last year, Facebook released their new ‘Subscribe’ button to webmasters, allowing people to embed the button on their own blog or website.

The subscribe function in Facebook allows you to follow updates from people who you’re not friends with. Any Facebook user can now broadcast themselves to a public group of followers, Twitter-style, while reserving private status updates for their Facebook friends.

So if you’re a WordPress blogger and want to use Facebook to expand your reach, adding the subscribe button to your site is a pretty logical idea.

Adding the subscribe button to your site

Step One

You need to allow people to subscribe to your Facebook profile. If you haven’t yet done this, read the instructions here.

If you’re trying to build a public following on Facebook, it’s a good idea to customize your profile URL. By default, your URL is just a bunch of numbers, but you can go to www.facebook.com/username and change it to something more memorable.

Featured Plugin - Start your own Quora / StackOverflow / Yahoo Q&A site

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.

Find out more

Step Two

Venture over to the Facebook Developer site, where you can get the code for your own subscribe button.

The process is fairly self-explanatory. You need to enter your own Facebook profile URL for the subscribe link. (For the purposes of this tutorial, I’m just using Mark Zuckerberg’s URL, which is listed by default).

You’ll need to play around with the color and width settings to get the right look for your own WordPress theme. You can also choose from three different display formats: standard, button count and box count.

Step Three

Once you’ve got the dimensions and display format right, you need to choose how you will embed the ‘subscribe’ button on your site. You have three options: HTML5, XFBML and IFRAME.

Using the HTML5 or XFBML code will give you greater control over how the button looks on your site, but it’s a more involved process. You’ll need to hack around in your template files and add the JavaScript SDK. You’ll also need a Developer App ID from Facebook, which can be obtained here.

If you just want a basic solution and don’t need to do any serious customization, go for the IFRAME option. This HTML code can be placed straight on your site, wherever you want the button to display.

Featured Plugin - Host sites, get paid, just like WordPress.com

If you've ever wondered how you could offer a paid site management and hosting service, then this is the plugin for you. Offer a freemium or paid service, for any niche you like, it's powered Edublogs.org to success already!

Find out more

The end result

I’ve added the IFRAME code to a sidebar widget in the Twenty Eleven theme, and this is what it looks like:

You'll probably never have as many subscribers as old Zuckerberg . . . sorry

And that’s all there is to it. Your readers can now sign up for your public updates on Facebook, directly from your WordPress blog.

Looking for more WordPress-Facebook integration tools? Check out Ultimate Facebook from WPMU DEV. This plugin is regularly updated and has everything you’ll ever need to connect your WordPress site harmoniously with Facebook.

_{Photo: Mr. Guillotine.}

15 Responses to How To Add The Facebook ‘Subscribe’ Button To Your WordPress Site


this tutorial is useful. it helped me

afsal January 19, 2012 at 3:05 am

i have a doubt. how to subscribe our website. this subscribe is only for the user. i need my website is subscribe

afsal January 19, 2012 at 3:07 am
- Reply
  
  Hi Afsal,
  
  I don’t think it’s currently possible to let people subscribe to your blog updates through Facebook. Perhaps at some point the future!
  
  Cheers
  Tim
  
  Tim Gregg January 20, 2012 at 5:39 am
Pingback: Web Watching Eustema » “Segui gli aggiornamenti”: usare Facebook come se fosse Twitter

What type of widget did you put the iFrame (or HTML code) into? I currently have the Oulipo theme on my wordpress blog. I don’t see any widgets that allow HTML codes (other than the Text one, but HTML codes dont seem to work with it.)
Can you help me out?

Thanks,
Erika

Erika January 30, 2012 at 11:21 am
- Reply
  
  Hey Erica,
  
  I was using the text widget in this example. Have you double-checked that the iframe HTML won’t work on your site, using the standard WordPress text widget?
  
  Let us know if you still can’t get it working.
  
  Cheers,
  Tim
  
  Tim Gregg January 30, 2012 at 2:38 pm
  - Reply
    
    Thanks for responding Tim!
    For some reason it still won’t work. Is it just that the theme I have won’t allow HTML widgets?
    
    When I do the HTML5 code in the Text widget, it displays on my blog as just the HTML writing.
    When I do the iframe HTML in the Text widget, it displays as a link to the url.
    
    Erika January 30, 2012 at 11:48 pm
    - Reply
      
      Hey Erica, just checked out your blog and it looks like you’ve got the subscribe button working now. Everything under control?
      
      Tim Gregg February 2, 2012 at 4:50 pm
      - Actually, the way I did that was just took a screen shot of what my subscribe button would look like through the facebook generator & then img linked it to my page. haha
        
        But I’m still unable to do it through the html code. It worked with Google+ & Linkedin, but for some reason not Facebook?
        
        Erika February 7, 2012 at 12:11 pm
  - Reply
    
    Hi Tim,
    
    I am having the same problem Erika had. I c/p the iFrame code into the “Text” widget on WordPress and all it does it post a link to the subscribe button.
    
    Help Please!
    :)
    
    Jessica Smith February 24, 2012 at 2:54 pm
    - Reply
      
      Hmm have you tried using a different ‘layout style’ for the subscribe button? There are three you can choose from when you create the button on the Facebook Developer site.
      
      Tim Gregg February 27, 2012 at 3:54 pm

Done thanks!

Anita

anita February 2, 2012 at 8:22 am
- Reply
  
  You’re welcome!
  
  Tim Gregg February 2, 2012 at 4:51 pm
  - Reply
    
    Hi Tim,
    Trouble!! I was ting to add the like button and then the subscribe button went off!
    
    I tried again adding it and it wasnt showing any more on the screen..
    Could it be my template?? If so why did it show initially but not now?
    
    Confused!
    http://www.myweddingnigeria.com
    
    dupe gopaldresg February 21, 2012 at 12:43 pm

Help me. When I use the subscription button. I asked “Confirm”. Why do I see that?

David Cervantes February 16, 2012 at 2:23 pm

Click on a tab to select how you'd like to leave your comment

Twitter
Facebook
Google