Facebook are withdrawing the feature to add a Like Box to your website on June 23rd 2015*. Any existing Facebook Like Boxes on websites will cease to work on this date. (*Source: Facebook)

I’m sure you’ve seen plenty of Like Boxes on your travels around websites over the past few years… they are the small widget that often appear in sidebars, that enable you to like that person’s Facebook page from within their site. It differs from a single Like Button, as the addition of the page’s profile images, number of likes, and thumbnail photos of friends who have liked the page.

Here is an example of a Facebook Like Box as shown on The Dogington Post website

Dogington Post Facebook Like Box

Facebook Like Box as shown on The Dogington Post website

If you have one of these boxes on your site, then keep reading…

With the demise of the Like Box widget, comes the release of the Facebook Page Plugin. This new plugin will enable you to embed your Facebook page into your website, so your website visitors will be able to interact with your business page without leaving your site.

Having gone through the process of installing this new plugin, to embed my Facebook business page into my website, here follows the process I followed, so you can embed your Facebook page into your website too.

#1: Firstly, go HERE to customise your settings to create the Javascript code for your website.

In the first box, you are asked for your Facebook Page URL. So open a new tab, go to your Facebook page, and copy what appears after the ‘/’

facebook.com/[copy this part of the address]

E.g. My page URL is facebook.com/veronicampullen – veronicampullen is what I paste in box 1.

#2: Next you’re asked for your desired width and height for your embedded page.

This will differ for everyone, and if you get it wrong, you can change the width and height later with a simple tweak of the code. I’ll show you how at the end of this post.

Because my embed will appear in my sidebar, I selected a width of 310px and a height of 200px

#3:  Now you’ll be asked to choose your customisations for your box (if any) by selecting to;

  • Include small images of friends who have liked your page (I chose to include these)
  • Hide the cover photo (I left this box unchecked)
  • Show page posts (I left this box unchecked)

#4: Finally, click on the “Get Code” button to generate the Javascript code.

That was the easy part, now for the not so easy…!

Now you’ve created the code, a pop up window will appear with two sets of Javascript code. The first set of code needs to be added to the <body> area of your website. The second set of code is to be added where you want your embedded page to appear on your website.

#5: Installing Javascript to the <body> area of your WordPress website:

To get started, log into your WordPress dashboard.

Where you get access to this area in your dashboard will differ depending on the setup of your website. Unless you’re familiar with where your website’s <body> area is located, you might have to call in outside help from your website developer.

In my dashboard, I found it under the theme’s javascript settings> dynamic custom> javascript (but I did have to ask my web dev for help!)

#6: Installing Javascript where you want your embedded Facebook page to appear on your website

If you installed your Like Box originally, you may already be familiar with the ‘Widgets’ area of your dashboard. If you would like your Facebook page to be embedded into your sidebar, then you’ll need to edit the widget that contains the original Like Box code – or add a new widget.

Your ‘Widgets’ are located within your WP dashboard under ‘Appearances’ > Widgets

If you already have the Like Box in your sidebar, locate your sidebar area, and open up the widget that contains the code for the Like Box. Overwrite this code with the second/bottom set of code Facebook gave you above – and save your changes.

If you don’t already have the Like Box in your sidebar, drag over a ‘text’ widget to your sidebar area, and paste the second/bottom set of code in that text widget – save.

#7: Editing the width and height of your embedded page within the code.

The second/bottom set of code that we’ve just pasted to your text widget in step #6 above, will look like this;

<div class=”fb-page” data-href=”https://www.facebook.com/youruniqueusername” data-width=”320″ data-height=”200” data-hide-cover=”false” data-show-facepile=”true” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/youruniqueusername”><a href=”https://www.facebook.com/youruniqueusername”>Name of Facebook Page</a></blockquote></div></div>

The section highlighted in bold contains the height and width your specified at step #3, so if you later realise that your widget is an incorrect size, simply edit the numbers shown within the ” ” here – increasing the number to make the embed larger, or decrease the number if it is too wide/tall.

Hopefully you do now have your Facebook page embedded on your website, but please do seek help from a Website Developer if you are unsure at steps 5, 6, and 7. Oh by the way, I would recommend that you take a back up of your website before you begin step #5… just in case you should break something! 🙂

Leave me a comment below to let me know how you get on, and if you found this blog post helpful, please do share with your friends via the share buttons below.

Veronica Pullen

Veronica Pullen

The Mile-Deep Marketing Queen at Apples to Oranges Ltd
Veronica Pullen, AKA The MIle-Deep Marketing Queen helps coaches, trainers, consultants, mentors, experts, speakers, and therapists to attract your ideal, like-minded clients from your 'Mile-Deep' Facebook marketing, networking, group challenges, and ads.
Veronica Pullen
Veronica Pullen
Veronica Pullen