Setting up your own Facebook Feed widget

Share
This tutorial is to show you the opportunities of Elfsight Facebook Feed app

Creating a widget, everyone desires to have it customized in a perfect way. The settings might get you mixed-up, however, we assure you that you shouldn’t worry.

Thus, this tutorial is going to show you that the process of setting a widget is really easy and moreover it’s even interesting.

Selecting a template

The first thing you come across while making your own Facebook Feed widget is template selecting.

Templates are kind of a new thing in our service that provide you with ready-made available forms that a widget can have. There are 7 different templates for Facebook Feed widget:

We have tried to cover the most popular use-cases so we’ve created templates with different layouts appropriate to each case.

Let’s take Full Width Posts template as an example and find out the ways of its customization.

Source tab

First of all our app asks you to connect to Facebook so you need to be registered at facebook.com.

To show a page there is no need to log in as this page’s owner. You can be logged under any account.

After you connect to Facebook you can start setting the widget by putting the URL of the page you want to display in the field.

Important! You can show only public pages due to the restrictions on the Facebook side.

Another thing you should pay attention to is the format of the link to set as a source.

You can choose any from the following variants for your widget to start working:

– https://www.facebook.com/CalvinKlein/

– https://www.facebook.com/36143771015/

– 36143771015

– CalvinKlein

Layout tab

On the Layout tab you will find a variety of settings so let’s take a look at the whole tab and each element separately.

We have already set Width and Height to auto. Although you can play around with these fields, however, for better adaptability, we recommend keeping this setting like it is by default.

In Header section there are the following options:

• show/hide the header itself – 1

• show/hide cover picture in the header – 2

• show/hide Like Page and Share buttons – 3

• show/hide small page picture – 4

• show/hide the number of likes – 5

In Actions, you can add and remove Like or Share button as well as duplicate any of them.

In Menu section, you can find only one option to show or hide Posts tab on the widget.

In Posts section, you can adjust the way your posts will be displayed in a widget.

Here are the options:

• show/hide all the posts – 1

• show/hide authors of the posts – 2

• show/hide the icons and the number of likes – 3

• show/hide the number of comments – 4

• show/hide the number of shares – 5

• show/hide the share button – 6

In the Post limit field you can adjust the number of posts to show in the widget. In case you don’t need any limit, just keep it at 0.

If you go to Menu section and turn it on, you will see all the tabs you turned on.

Now you can go to Photos tab and adjust this tab for your widget:

• show/hide Photos tab itself:

• show albums before the photos in Photos tab:

In Videos section you can add the Videos tab on your widget and decide whether to show the description, number of likes and the number of comments or not.

In Popup section you can also show or hide popup info.

More tab

First of all this tab allows you to select language. Just press the field and choose the language you need. – 1

Our widget uses cache to make the feed load faster and to reduce the server load. In Cache time field, we have set the most optimal time for your widget to work correctly. – 2

Keeping the Cache time setting by default you make a widget work in the most appropriate way.

However, the most interesting and mysterious thing might appear to be Custom CSS field. – 3

CSS is a small piece of code that is used to make individual changes to a widget, not available in the settings. In case you feel you need a configuration which you can’t find in the settings, highly likely it is possible to do with the help of CSS code. Just add the code to the Custom CSS field and save the changes.

If you are not good at coding or feel unable to make a code you need yourself, feel free to contact us and our developers will be just happy to make a special one for you!

We hope this article could clarify some aspects of Facebook Feed app setting process. However, keep in mind that we’ve taken only one template to show as an example. Although the others are a little bit different, the process is the same and this article might be useful as well.

Try to set your own Facebook Feed widget right now!