How to Add Facebook Fan Page to Website

By now, we have learned how to create Facebook page for Business and now, it’s time to increase fans for your page. One of the tip, which I have given in my last post is Add Facebook fan page to your Website. Saying that, I mean Facebook offers a widget which you can embed in your blog, and your readers can click on like button to join your Facebook fan page. This sound super easy and this is one of the easiest way to start seeing the increase in number.

Add Facebook Fan Page to Website
  • Save

Why you should add Facebook Fan page to Website:

Facebook works as a social proof, and more number of fans you have, you are more likely to be trusted more. Also, Facebook has a huge subscriber base, when a user like your Facebook page, he will be able to see all your updates on his wall.

Update: If you are using WordPress you can either use Jetpack plugin to add Widget on your sidebar. You can also use Facebook members plugin.

Now it’s time is to make your Facebook Fan page popular and to get more fans on your fan page. You can also buy likes on Facebook and also but Fans, but such Likes and Fans won’t be the real fan and will not add much value. Your target should be converted Regular & loyal readers into your Fb page fans. There are many ways to increase your fan on your blog and we have shared some of them earlier, but one of the most effective way is by adding Facebook fan widget on your blog. This will help your readers to quickly like your fan page on Facebook without leaving your blog.

Guide to add Facebook Fan page Like Box:

Very first step is to go to Facebook social plugins page and select Page plugin. Here is a direct link to that page. Apart from Like box, I would also suggest have a look into other Facebook social plugins that could be useful to make your Website more social.

So once, you are on Facebook like box page, change the URL with your Fan page URL. For reference, in this video tutorial, I have used Page URL as Similarly, you can add your fan page. In case if you have not set up Custom URL for your fan page, do it right away.

Once you have added your URL, the preview tab will automatically start showing widget for your blog. You can make changes from settings, like specify a custom size for Facebook fan page widget. I usually, remove stream and header part as they add more into loading time. If you don’t want to show Facebook fan photo, you can hide that too from settings. Though, Facebook fan photo into your Facebook fan box, will add more personal touch  for new readers, as Facebook shows your friends photo when you browse a site using Facebook like box.

So here, is the quick screenshot of my settings:

Facebook Page plugin
  • Save

Once you have made all the settings, click on get code and you will get three code options to add the widget on your blog. Go to iFrame code and copy the code given. Now go to your WordPress or BlogSpot blog widget section and add a text widget and paste the code. If you have copied and pasted the code properly, in no time you will see your Fb fan page widget live on your blog.

This is how this widget looks on my blog sidebar:

Facebook widget on sidebar
  • Save

Personally, I have realize Fan page widget works the best to grow your followers on Facebook and more important this way, you will get more loyal readers as people who would be subscribing to your page are those who liked your content. But, there is a down side of this widget and that is load time. I have seen a drift of at least 0.8 sec after adding and removing this widget. Though I guess, you won’t mind comparimsing on the speed for getting more fans, as social media plays an important role in better ranking.

Here is  a video tutorial, which will help you understand the complete process of creating Fan box and adding it onto your Website in easy 1-2-3 step:

Do let us know if you have faced any problem while trying to add Facebook Fan page into your Website? 

Do share your experience with Facebook fan page box and do you also feel this widget adds too much into loading time?

Subscribe on YouTube

  • Save
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

21 thoughts on “How to Add Facebook Fan Page to Website”

  1. The only problem with a facebook fan page is that we cannot reserve the name of the fan page… The option to reserve was opened a few months back but now its closed
    any idea when it would be opened again??

  2. I followed the tutorial until:
    “Copy the code and add it to your Widget in wordpress or in Blogspot.”
    What widget?
    I know in Blooger you can easily add code but how do you do that in Thesis / WordPress. Exact steps, please, I’m intellectually challenged.

  3. there is no “add fanbox to your website” option below my display pic on my facebook fan page 🙁 do u know y is that so?

    1. Hey Mark
      Could you please cross-check. Coz the Code provided by widget is good enough to add Facebook Fan Page widget.

  4. I’ve been researching the Fan Box plugin and it appears that facebook has removed this option from their site. What’s strange is that there are no news articles explaining the removal…

    What they are using now is something called “badges” which you can find here:

    The one that comes closest to the Fan Box is the “pages badge”. Its smaller and not as slick looking but I guess it does the same thing.

  5. Thanks Harsh for sharing this!

    Just wanted to share 1 more tool that you and your readers could find useful. It’s called Tint, and it lets you display your Facebook profile feed or any Facebook Page feed directly onto your website/blog, WordPress, etc.

    It is helping brands keep their visitors engaged and spend longer time on their sites. There are themes, personalized options to keep it customized, and no technical expertise needed.

    If you’re interested to see more, check it out here:


  6. I added that code properly, but what it shows on my blog is just a plane white box. Where would one click to like and become a fan.

  7. sagar shirsat

    not working at all harsh. when i click on save in the widget text after pasting code it automatically turns to blank.

  8. Hi Harsh,

    I can not add my page to The issue here “SSL error” when you see my site on browse.

  9. I did as you directed, i got the code and paste on a text widget but it won’t show on my blog. Why?
    Thanks for your anticipating reply.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Share via
Copy link