Integrate Facebook on Your Website with Facebook Feed WD

Facebook ranks as the third most used website on the internet behind Google and YouTube and the most popular social media service by far. This is why it is so important to integrate Facebook into your website.

If you want integrate the service beyond a Facebook follow button and Facebook like buttons, you may want to check out Facebook Feed WD from 10Web.

This WordPress Facebook Feed plugin can be used to display a range of content from your website including Facebook feeds, events, videos, photos, and more.

In this review I will show exactly what this WordPress plugin can do.

Setting Up Facebook Feed WD

Facebook Feed WD is a GPL friendly WordPress plugin that can be downloaded from WordPress.org or installed directly via your WordPress admin area.

All of 10Web’s WordPress plugins have a similar structure. You will see the same menu links and same features crop up in their plugin interfaces. This is no bad thing as it means that when you have used one of their plugins, you will be familiar with all of them.

In my recent review of Google Maps WD, I showed how users are presented with an installation wizard when they activate the plugin.

No such installation wizard is present in Facebook Feed WD, though I understand why because Facebook Feed WD requires you to create an app on Facebook.

This is a necessary step that all Facebook WordPress plugins require. The installation process is straight-forward thanks to the installation guide the developers provide.

In order to retrieve information from your Facebook accounts, you need to acquire a Facebook App ID and App Secret. You can do this via the Facebook for Developers page.

If you haven’t already done so, register as a Facebook Developer.

Once you have a Facebook developer account, simply click on the “Add a New App” button and then select website as your platform.

Facebook for Developers
You need to add a new app in order for Facebook Feed WD to work.

On the next page you can select an existing app or create a new app for your website. You should create a new app so that you can configure everything specifically for the plugin and your website and avoid any conflictions.

Create New Facebook App ID
Name your Facebook application.

On the next page you need to enter your email address and select a category. An option is there for state that the app is the test version of another app, but you should not enable that for Facebook Feed WD.

Create New Facebook App ID
Enter your email address and select a category.

Facebook can be a little funny about what you name your app. I had to remove the reference to Facebook in my app name and then click the create button again.

Facebook Trademark
Avoid trademarks in your app name.

If you are as lucky as me you will be asked to select tigers in your security check.

Facebook Security Check
Grrrrrrrrrrrrrrrr.

Facebook decided to punish my love of tigers by not selecting the box with the zebra and lion on it and the tiger striped handbag. I suppose if the bag was made from real tiger fur I should have selected that box. My bad!

Facebook Security Check
Aren’t security checks fun kids!

Once you have completed Facebook’s fun tiger guessing game, you will be given the Javascript code for your website. You do not need to do this as the Facebook Feed WD plugin adds all the necessary code for you.

You should, however, add the URL of your website.

Setup Facebook SDK
Be sure to enter your website URL.

On the next page you are asked to test your app. Again, this step is not necessary. All we are looking for is the app ID and the app secret.

Facebook App Test
You will not need to test your app.

Facebook does not display the necessary information here. You therefore need to go to the top right-hand side of the page and select your app from your list of apps.

Select Facebook App
Select your Facebook app.

On the app dashboard you will see your app ID and app secret. You need to re-enter your Facebook password to see the app secret.

Copy both numbers down.

Facebook App Dashboard
Copy your Facebook app ID and secret numbers.

The process of creating a Facebook app for your website may seem like a pain, but it only takes a minute or two.

With the app connection information in hand, you can now complete the Facebook Feed WD Options page.

In addition to entering your app details, you can also define the feed autoupdate interval, the timezone, and the date format for posts and events.

Facebook Feed WD Options
The Facebook Feed WD options page.

Whilst we are on the subject of options, it is worth noting that 10Web have a useful option for uninstalling the database tables that are added to your WordPress database. This allows you to remove all of the data that is added to your website if you no longer need to use the plugin.

This is an option that is present in all 10Web plugins. It is a fantastic feature that I wish all WordPress developers would add to their plugins.

Uninstalling Facebook Feed WD
Facebook Feed WD gives you an option for removing all data.

As you can see, apart from acquiring your Facebook app information, there is not much to configure in the main options area. That is because everything is handled through the Facebook Feed area.

How to Create a Feed with Facebook Feed WD

After activating Facebook Feed WD you will see a menu for the plugin in your main WordPress admin menu. Click on the “Add new” button at the top of the page.

Adding a New Feed
Click to add a new feed.

In the feed creation area you will see four tabs: Main, lightbox settings, comments, and events. As with all 10Web plugins, some options are limited in the free version.

There are three types: Page, group, and profile (only in the pro version of the plugin). The options that are listed change according to the type you select.

You can define the number of posts displayed and whether posts displayed by the fans of your page are shown.

The pro version allows you to select the post type that is displayed from Facebook. For example, whether photos and videos are displayed.

Create New Facebook Feed WD
Remember to define your Facebook page URL.

There are lots of options available for displaying what information is shown from your feed. This includes author name, place name, feed name, and more.

Themes and social media sharing buttons are available if you have upgraded to Facebook Feed WD Pro.

Create New Facebook Feed WD
Edit the meta information of your Facebook content.

Photos and videos can be displayed in a lightbox. Every aspect of the lightbox can be configured. This includes whether comments, likes, and shares are displayed.

A fade effect can be applied to media. An additional dozen or so effects can be added if you have the pro version of the plugin.

Facebook Feed WD Lightbox Settings
The lightbox can play automatically if you wish.

Comments can be displayed in the same way they appear on Facebook or you can choose to display them as a stream. Replies can be disabled if you wish and you can define the order of comments.

Facebook Feed WD Comment Settings
There are a few basic options for comments.

In the events tab you choose whether certain parts of the address are shown or not.

Facebook Feed WD Events Settings
The event description length can be defined.

Once you have saved your feed, you will be taken back to the main feed list. From this page you can reorder feeds, edit feeds, publish and unpublish feeds, and delete feeds.

The shortcode for your feed can be copied from this page.

Facebook Feed WD Feed List
Copy the shortcode for your feed from the main feed list.

If you prefer, you can insert your feed onto a page on your website using a button that is added to your WordPress visual editor toolbar.

Facebook Feed WD Post Editor
You can insert feeds directly through the WordPress visual editor toolbar.

Once you add the shortcode to your website, your Facebook feed will be displayed on your website.

By default, everything from your Facebook page, group, or profile, will be displayed. If you opt for Facebook Feed WD Pro, you can only display certain post types. This is incredibly useful as it means that you can create a page on your website that only displays your Facebook photos or your Facebook videos etc.

I like the fact the featured image for each blog of my blog posts is displayed.

Facebook Feed WD Example Feed
My feed displayed the number of likes, shares, and comments.

I think it is worthwhile creating a dedicated page on your website for media. If you want to display everything from your Facebook feed, you may prefer displaying it via a widget instead.

There are not many options in the widget. You can change the widget title, select the feed, define the post count, and set its dimensions. However, by and large the widget displays the same information the main shortcode does.

Widget Options
The widget options.

I thought the output of the widget looked great. It’s a great way of promoting your Facebook page via one of your website sidebars.

Widget Example
An example of the feed being displayed via a widget.

Photos and videos look great in the lightbox. Comments can be displayed at the left-hand side of the media with video and photo controls displayed underneath. It works really well.

Lightbox Example
The Lightbox looks fantastic.

Once the feed is displayed correctly on your website, I recommend going back and editing the feed options as you will have a better understanding of what all the settings do. Enable and disable options and configure settings until you have the look you want.

Facebook Feed WD Pro

Facebook Feed WD is 100% free to use, but upgrading to Facebook Feed WD Pro unlocks many additional features.

One of the biggest reasons for upgrading is the ability to customise the design of your feed. The pro version allows you to configure every aspect of your design.

Modifying Thumbnails
You get a lot of control over how thumbnails are displayed.

The number of styling options available can be a little overwhelming. You can modify every colour, every margin, every padding, every border, and every background.

Modifying Blog Style
The total number of theme settings is impressive.

In addition to adding styling options, the pro version of Facebook Feed WD adds fifteen additional lightbox effects, additional themes, social media sharing, and more control over your feeds. It also allows you to use Facebook profiles as feeds.

Facebook Feed WD Pro Pricing
Three pricing plans are available for Facebook Feed WD Pro.

The personal license of Facebook Feed WD Pro costs $25 and offers support and updates for one website for six months. The business license costs $40 and increases support and updates to three websites for one year.

The developer license costs $60 and allows support and updates for one year for an unlimited number of websites.

If you prefer, you can purchase all 10Web WordPress plugins from only $100. It’s worth doing if you use more than one of their plugins.

Final Thoughts

If you are looking for a way to embed content from your Facebook page on your website, I recommend giving Facebook Feed WD a try. It boasts a lot of great options and once you have set up an app on Facebook for Developers, the plugin is easy to configure.

I recommend installing the free version of the plugin first to ensure that it does everything you need. You can then upgrade to the pro version if you want to unlock all of its features.

For more information on the plugin, please check out the demo and the official plugin information page.

Thanks for reading.

Kevin

If you operate a WordPress website, I encourage you to check out my Managed WordPress Hosting directory. It lists the top website hosting companies that offer specialist WordPress features such as website staging, daily backups, WordPress security, integrated content delivery networks and more.