Quick Guide: Facebook Page Widget for WordPress 

facebook page widget for wordpress coverJust started a WordPress website? Embed Facebook on it!

Creating a Facebook page widget isn’t all that hard – All you need to do is to get a specific code generated from a specific website and pasting it.

However, some people do get it wrong and when it comes to codes, even a small error can cause ultimate failures so today, I’m going to hop on things and show you why and how.


How Does it Work? -Unraveling the Widget Mystery

If you can copy and paste, you’re halfway there.

The process is quite simple – If you want to learn how to link your WordPress Blog to a Facebook Business Page, all you need to do is to simply generate a code from Facebook’s developer site and pasting it back to your site.

There are many tutorials who will ask you to get the codes from their own “trusted sources” but the best place to get that is and always will be from Facebook itself.

This is because Facebook will give you an approved link which you can safely add to your site straightaway and apart from that, they will synchronize the widget for you automatically so that whenever you update your Facebook Page, it will also be updated on your site widget simultaneously.

You can choose to add just a simple Facebook page name, or add more choices such as adding the Facebook Feed, showing upcoming events or even both and here’s how…


5 Simple Steps to Embedding Your Facebook Page

It’s actually quite straightforward.

If you’re wondering on how to add a Facebook widget to your WordPress site, these steps will show you how to go about doing it…

Step #1 – Go to Facebook Developerfacebook page plugin google

The first step to embedding your Facebook page to your site, is getting that specific code.

Luckily for you, very simple and you can simply do that by heading to Facebook for Developers or simply by searching through Google “Facebook Page Plugin”.

Now Facebook for Developers is very huge with many different sections so make sure you search for Facebook Page plugin to get straight to that one page we are going to work on.

It doesn’t matter what type of CMS you use – Whether it’s WordPress or Wix, the code is the same as it comes from Facebook itself.

After all, it is your Facebook Page.

Once you’ve stepped into the page, we move on to…

Step #2 – Keying in your Facebook Page Detailskeying in dacebook plugin details

This is the crucial step, but you’re almost there.

Over here, you need only to fill in your Facebook Page details – Namely the Page URL, Tabs, Width, and Height.

You can leave the width and height dimensions empty if you are not sure what to put, and edit it back later on.

For the tabs section, you may leave it to the default Timeline which I’ve already written there for you and frankly, it’s what everyone else puts – or you could add in “Events” there too so that your Facebook Page widget will show that feature for your website audience to see.

I hope you’re still here with me because once all of those are filled, all you need to do next is…

Step #3 – Getting the Code of Mystery (Facebook iFrame)

facebuk iframe jeng jeng

Just click on “Get Code” and you’re there!

You’ll be brought to a popup which will lead you to 2 choices – JavaScript SDK and iFrame.

Click on iFrame and that will bring you straight to the code meant for your Facebook Page which we will need to use to add to your site.

Forget the JavaScript thing, Site developers use those for their coding stuff but for a simple WordPress blog, you need only the iFrame code which is more than enough.

Now that we’ve gotten the code, let’s get back to our website (Or your site in this case) where we’ll learn to embed.

Step #4 – Linking it to Your WordPress Site

pasting the Facebook code to your WordPress site

Now that we’ve got the code, let’s make it appear on your site.

One thing to bear in mind is that the code that you got is actually an html code which brings a popup of a Facebook page to any types of websites whatsoever.

Which means that whatever website provider that you use, you can make it appear if you paste that code into their text editor but for the sake of this guide, I’ll be showing you how to do that through WordPress since that’s the website CMS that I’m using.

From your WordPress dashboard, head over the widgets section which you can find under appearances, and from there, simply paste the code on the Text widget and voilà! Your Facebook page will appear!

Step#5 – Customize!

how i embed the facebook widget to your site

If you had left the size dimensions blank or default, chances are your Facebook widget might appear a bit disorientated.

Don’t worry, because now we’ll get straight to adjusting it.

Head over back to the Facebook Page Plugin site where you fist retrieved your code, and adjust your dimensions there.

Typical widget size is about 250px width and 300px for height but every website theme has different sizes so it’s up to you to do some trial and error with it.

i did Inspect element to find your widget dimension size

If you want an easy way to measure you image size though, you can simply right click to bring up the shortcut tab and from there, click on “Inspect”.

Once you’ve opened inspect, don’t worry about that complicated coding – You can just scroll your mouse to see the size of each of your images.

If you already have a widget on your sidebar, just measure that an you can see what the width is and from there, simply use that number on the Facebook Page Plugin and you’re set!

Here’s a video I made to help speed things up…


Oh, But it Still Doesn’t Work for Me!

Worry not, there is actually a trick that not many people know of.HTML widget error

You see, some WordPress updates or theme updates may cause some irregularities for certain codes, including Facebook.

The solution is simple, head over to your WordPress widget page and from there, paste your Facebook Page code into a different tab called “Custom HTML”.

The image above is an example of when I pasted the code on my site.

As you can see, the error detected was the fact that some of the wordings were not in lowercase.

I changed that and here’s how it goes…

HTML error fixed!

If you do that for your code, it might be the same type of error or it might be something else but either way, you can definitely detect what was wrong with the code with and from there, fix it.

Once you’ve corrected that error, everything should remain the same and your Facebook widget should be running smooth as ever.


Can I Do This on Any Other Website?


The process is pretty simple no matter the type of website – All you need to do is to simply get your Facebook Page code from the Facebook Developer page which I showed earlier and from there, just add in that code to your own respective websites.

It might be a bit different for other websites because some Content Management Systems (CMS) like Wix and Joomla does not use plugins or widgets like WordPress so it might be a tad confusing.

However, a widget is only a name and at the end of the day, it is just an text editor like any other so if you paste that on the “Text” side of the editor, you can see how the Facebook Page plugin will appear on the “Visual” side.

Go ahead and try, the Facebok code is meant to synchronize with any website type so there’s no excuse to not get it done!


Will This Slow Down My Website?

minimum number of pluginsNot so much.

As a WordPress user, you might be familiar with plugins right? Well this Facebook Page Widget trick we did, is not through a plugin.

In fact, it is a direct code embed that we simply paste straight on your website without the need of installing any plugins so the coding is faster since its direct, and it doesn’t put on much weight.

Plugins are only shortcuts that we WordPress users have as an added bonus feature and the sole purpose of that is to make our lives easier by not having to write those codes ourselves.

Because as most of you might have known, websites are all about coding which is a whole different course on its own.

In fact, universities even have courses for coding because there is a lot to learn.

However for most bloggers like me and probably you, we don’t really come from an all IT background so having to do coding manually will definitely slow down our content creation stuff.

Hence the birth of plugins.

WordPress provides us with plugins so that we can simply install some features on our site without having to create a whole different code for that.

Want to add a social media share button? Install a plugin.

Want to check your analytics? Install a plugin.

Want an easy contact form? Install a plugin.

I myself am guilty of installing many plugins throughout my period of managing this blog but after finding out how having a lot of them could slow down my website, I reduced my plugin usage.

I didn’t delete all of course, just saved some of the essential ones.

At one point, I had over 20 plugins (Crazy I know), and some of them I didn’t even know were still there or what it were used for – I just kept them because they looked awesome.

But in retrospect, an ideal plugin number that anyone should have in order to not slow down your site with those heavy data, is to have about 6-10 plugins.

As long as you keep the important ones, those should be more than enough for your site to operate at maximum capacity.


Want More WordPress hacks? -Enter the School of Bloggers!

Wealthy Affiliate Home Page

WordPress is fun but there are just so many other tricks to it that we don’t understand.

We have to end up looking for solutions in Google such as ways on how to add the social share buttons, how to connect Google Analytics, and also how to boost the SEO of each and every one of our posts.

Sounds familiar?

Introducing Wealthy Affiliate, a platform for people interested in growing their own online business or build a successful one from scratch and monetizing it.

From evergreen lessons and LIVE video training every Friday, to keyword research tools and an awesome community with friendly people managing different businesses and blogs – They have literally everything to help you succeed online.

SiteHealth for my internet Quest

The SiteHealth feature is quite awesome too as it analyzes your website for you everytime you log in and it lets you know which parts you are lacking in and what should you improve on to ensure that your site is running smooth and SEO-friendly.

As you can see from the image, my publishing frequency is quite low as I’ve been pretty occupied as of late so now that I know, I need to start putting some time aside to start creating content again every week.

I have 3 websites that I run simultaneously and as much as I think that I could handle everything on my own, I couldn’t and without a system, I got overwhelmed and I end up messing up my entire content creation schedule.

Trust me, managing a blog can be hectic the more you grow.

Although I have been a member for 3 years now, and I still am learning to master WordPress but it gets easier when you are in a community of bloggers and content creators who share the same vision and sometimes, I too share some tips from time to time to help out new bloggers like this one.

If you want to boost your WordPress blog further by optimizing it, then WA is definitely the best bet for you.


Final Word

The WordPress Facebook Widget may be simple but it can have a huge impact on your site.

It shows how transparent you are as a brand and for other visitors, they tend to feel more secure when they see how many people are following or liking your page so it’s definitely worth adding.

If you’d like to learn more cool WordPress hacks, check out my top recommended program here.

Thanks for reading, have a great day ahead!


Riaz Shah

, ,
10 comments to “Quick Guide: Facebook Page Widget for WordPress ”
  1. This is such good training! You’ve written easy to follow instructions. I didn’t know how this was possible but I can tell you that I’m going to add this widget to my sites.

    I think it’ll really help to connect my sites to social media. I assume you do this with Twitter or Pinterest also, right?

    • Hey Tommy,

      Yup! You can definitely add this for Twitter and Pinterest too. I only add Facebook though and not Twitter and Pinterest as I’m not very active on those pages yet. Glad you found the article helpful, that Facebook widget is definitely going to increase your followers!

  2. It’s great to have your social media on your website so that people are able to connect with you and get to know you.

    Thank you for sharing this easy to understand post so that everyone can see how to put their Facebook page on their site without having to be confused and stressed.

  3. Bookmarked!. Ive seen this done on a few sites and was wondering about the process, I just set up my facebook business page yesterday so ill follow your guide and link it up.
    It doesn’t look too tricky, hae played around custom widgets a bit so anybody should be able to get it done with your walkthrough Cheers!

  4. This is such good training! You’ve written easy to follow instructions. I didn’t realize this was possible but I can tell you that I’m going to add this widget to both of my sites.

    I think it’ll really help to connect my sites to social media. Can you do this with Twitter or Pinterest or is it just for Facebook?


    • you can definitely do this for Pinterest and Twitter Cheryl, all you need is that code to embed back to your site which should be pretty easy to find. Thanks for the feedback, have a great day!

Leave a Reply

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