Oct 132015
 

Display Facebook Pages In WordPress Using Suffusion Theme post will show you in simple steps how to display your Facebook pages on your website.

This post shows you how to display your Facebook fan pages on your WordPress website. I created this very simple tutorial to guide you so you don’t have to use a plugin.

Some of you will use plugins which work very well and they do the job, however some of you might not want to use a plugin and prefer the manual way. Facebook have come a long way with their code and it has simplified the process a lot. It is very easy nowadays to display the Fan Page into your website or blog using Facebook code.

The are only a few steps you need to carry out which should be easy for you if you have basic WordPress knowledge and you follow my instructions below.

Display Facebook Pages In WordPress Using Suffusion Steps

Step 1 ) First go to the following URL Page Plugin to have access to the settings.

Step 2 ) The following image displays a few fields for you to fill out. The name of each of the following fields below are self explanatory.

Fields To Setup:

  • Facebook Page URL
  • Width
  • Height
  • Use Small Header
  • Hide Cover Photo
  • Show Page Posts
  • Adapt to plugin container width
  • Show Friend’s Faces  display-facebook-page-suffusion-settings

Step 3 ) The following image Your Plugin Code shows you the code you need to copy and paste into your website. You can copy and paste the code in a text widget, a page or post.

It is important that you follow the instructions found below in the image. You need to copy and paste the JavaScript SDK code on your page once and the Facebook Page code where you want it to appear.

display-facebook-page-suffusion-settings-code

Step 4 ) For this tutorial I chose a post, you can choose a widget or page if you like. Remember to choose Text editor. I like working with text editor mode when it comes to pasting any code. The Visual editor sometimes does not play well with the code.

In the image below I named my post Facebook Fan Page, very original correct! Of course you will use a different name. The following code <div id=”fb-root”></div> is taken from the JavaScript code as illustrated above.

display-facebook-page-suffusion-code-pasted

Step 5 ) To paste the JavaScript code into Suffusion backend go to Appearance -> Suffusion Options -> Back-end. Locate the following header Custom Footer JavaScript and paste the JavaScript code you copied from Facebook. See image below.

Note: Don’t include the <script> tags. Or else you will get an error and or your feed will not display.

display-facebook-page-suffusion-code-pasted-backend

Facebook Page Extra Settings

Step 6 ) On the Facebook page you will see a table with extra settings. These settings allow you to control the display of the plugin.

The plugin is adaptive, which means that the width will always adjust to the Parent div container. This makes the plugin responsive.

In the example below the parent controls the outlay of the child code “Facebook fan page code”. When the parent is displayed in a small device like smartphone or tablet the child container will also adjust to the width.

Note: Your theme must be responsive to get a better result. If your theme is not responsive you should install a plugin to display your website in a responsive way.

Example:

<div parent container>

“Code goes here = <div Facebook fan page> code</div>

</div>

Step 7 ) If everything goes well and you have followed all my steps above, you should see your fan page displayed. It will look similar to what you see in the following image.

display-facebook-page-suffusion-frontend

That’s how simple it is to display your Fan page on your WordPress website using Suffusion theme.

I will be updating this post from time to time. So make sure you come back to view the latest results.

Enjoy

More Facebook Tutorials:

Facebooktwittergoogle_plus
Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)