Put a Facebook widget on your website – with official Facebook code

As with most things on the internet there are many different ways to put a Facebook widget on your website. However, it does not make all those ways the correct way.

Putting a Facebook widget on your website has many advantages. The biggest one is giving your web users an element that they recognize to easily find and become your follower on Facebook. Facebook widgets also show your web users how many of their other friends and other people already like your content. This helps build trust between your brand and your user. 

As with most things on the internet there are many different ways to put a Facebook widget on your website. However, it does not make all those ways the correct way. I found this out in my early days of developing by using a WordPress plugin to display my Facebook widget when a plugin for this purpose is really unnecessary. So here’s a quick guide on how to put a Facebook widget on your website: 

Get The Code From Facebook

If you Google for “Facebook widget” the first result you will see will be for a plugin. Normally I like plugins, they make things really simple in most cases, but I know that having too many installed can be a bad thing and slow performance. So instead we will want to get our very small, very clean, code snippet directly from Facebook. 

The Facebook for developers social plugins page is filled with options for widgets that you can chose from. 

For pages click the “Page Plugin” and then you will be presented with a small form to configure your options: 

Add the required information in and hit Get Code

Place the Facebook widget code on your website

There are two options for placing the code on your website. The first is with a snippet of JavaScript, the second is with code for an iframe. The iframe code is easier to implement if you are not familiar with the code/structure of your website. 

For the iframe code just select the IFrame option at the top, copy the code, and past it anywhere in your website where you want it to work. For example, if you have a WordPress site, this code will work in a text widget, on a page, or in a blog post. 

The preferred way, with the JavaScript snippet, is only slightly more difficult. It requires that 2 pieces of code be added into your website. First, you must add the actual script. Copy the code in step 2 and place it in your template just beneath the opening <body> tag. 

Most WordPress themes will have an admin area where you can place this code so it doesn’t get deleted when you update your theme. But to hardcore it into your WordPress site all you have to do is navigate from the dashboard, to the appearance menu, then to the editor. 

Dashboard > Appearance > Editor 

From here you must locate the template file that creates your themes header. In this file you will locate the opening <body> tag and insert your Facebook JavaScript SDK code directly underneath. Once saved you will now have to insert the code that actually renders the widget.

Copy the code from step 3. This code can be placed anywhere on your website. 

All in all this should only take you 5-10 minutes and is an easy way to nurture your businesses social following. A key to a successful business in the internet age is using the appropriate social channels to build your audience and drive conversions. If you ever have any questions about developing business through social media just contact me, but good luck getting your widget into place! 

Btw, I did this entirely from my phone but accessing my WP Admin thru my browser and editing my theme template file with my code. So these steps are definitely mobile friendly. Like my page below! 

💕 Lauren Alyce 

Tags: ,

Leave a reply