FACEBOOK COMPONENT

INTRO TO THE FACEBOOK COMPONENT

In this Chapter, we are going to discuss the Facebook component. Using the Facebook component, you can configure a Facebook app and connect to your Facebook albums, events, and friends. You will be able to create a customized experience using the Scenes.

CONNECTING TO A FACEBOOK ALBUM

To start the process, the first thing you will need to do is navigate to the following web address: developers.facebook.com. You will need to do this after you've logged into your Facebook account in order to create a new app.

Next, click on APPS.

Now click on the Create new app button

In the App name field you can enter a new name for the app and click continue.

After you click on the Continue button, you will be able to see the App ID.

The App ID will be used to connect the SignageStudio and the SignagePlayer with your Facebook account. So go ahead and make a note of your app ID. Next we will switch to the SignageStudio and let's configure our Facebook account. Access the Scene editor and create a new Scene. Name the Scene FB Scene

From the Components panel, drag the Facebook item component into the new Scene.

From the Components panel, drag the Facebook item component into the Scene. If you look at the Properties of the Facebook item you will see that it has Friend information, Photo options for the Photo album as well as the Events.

We will start by setting up an album. First, select the Facebook Item from the Scene and choose from its Properties the Photo Big option. Then, click on the Pos/Size tab and set the Facebook item to occupy the entire Scene. This way, we will have an image that will be as large as the size of our Scene.

Next, switch back to the Timeline area of the Signage Studio and from the Components choose the Facebook Player.

Drag and drop the Facebook Player into the Timeline and double click it to load its Properties.In the Properties panel of the Facebook Player, click on the Facebook tab. Here you will need to enter the App ID, the Email and the Password.

The last thing you will need to do is associate the Facebook Scene with the Facebook Player. In order to do this, we will drag the FB Scene we've just created and drop it into the Scene Field of the Properties panel of the Facebook Player component.

Next, you will be able to see in the Album field all your Facebook albums. Once you select an album, you will notice in the preview window how the images will dynamically load one after the other.

We can also set other properties like the interval to set how often we images will cycle.

To further customize the component go back to the Scene Editor, add a new Label and a thumbnail for the images inside the Album. Next, drag the Label Component and a new Facebook item component, position them inside the Scene. Set the Facebook item property asPhoto small.

Scenes are fully customizable using the Facebook component. Just to recap, make sure you create your App ID, paste it into the AppID field along with your Login Email and Password for your Facebook account.

CONNECTING TO FACEBOOK FRIENDS

Next, we will use the Facebook component to connect to our Friends list. Drag and drop three Facebook Items into a Scene. Then, we choose for each item different fields from the properties panel. The first item will show the Friend's name, the second one Friend's sex and the third Friend's picture.

After you customized your Scene, go back to the Timelines area and open up the Properties panel for the Facebook Player. This time, select as DataType Friends instead of Albums like we did in the previous example.

CONNECTING TO FACEBOOK EVENTS

Here you can add as many Events as you like. We've already set-up to example events.

Go back to the SignageStudio and into the Scenes area, drag and drop into a Scene three Facebook items. Set the first Facebook property for Event's name.

For the second Facebook item set up the Event's location.

and the third one the Event's start date.

Switch back to the Timelines area and load the Properties for the Facebook Player components that was already added to the Timeline. The Scene is already associated with the Player so all we have to do is select in the Properties panel the Events Data type.