PRODUCT
Follow

Overview

The Facebook Feed component is a customizable widget that displays a list of Facebook posts from a Facebook page of your choice.

01_example.png

Implementation

Downloads

To help you get started, there are two example Workspaces:

Procedure

Important

Important: Like other AdKit components, you display this component in your ad by creating a configuration entry for it in your Workspace config.js file.

  1. Prepare your Workspace and place the following two files in the root directory of your Workspace:

    • index.html

    • config.js

  2. Create an ITEMS array in the config.js. Be sure there is an ITEMS array defined (this is case sensitive), as follows.

    Code

                              define({
      ITEMS:[}    
      });
                            
  3. In the ITEMS array, add one object entry as displayed in the following example.

    Important

    Important: The URL you use, described in the Configuration Fields section as facebookPageURL , must point to a Facebook Page (versus a user's feed). Due to privacy concerns, this is a limitation of the Facebook API. For more information, see https://www.facebook.com/pages/create/.

    Code

                          define({
      ITEMS: [
        {
          id:'facebook-feed',
          type:'adkit-facebook-feed',
          facebookPageUrl:'https://www.facebook.com/sizmek',
          width:300,
          height:250
        }
      ]
    });
                        
  4. In the index.html file, add a <div> tag and set its ID attribute to the ID configured in config.js. In our example here, it's set to 'facebook-feed'.

  5. Proceed to tweak the values of the configuration options in config.js to make the component look the way you want.

Configuration Fields

The following table describes the fields that you can modify when customizing the component in your ad.

Parameter

Mandatory/Optional

Description

Default

id

Optional

ID of the div in your ad's index.html that this component should render itself within.

type

Mandatory

Required field whose value must be adkit-facebook-feed. It instructs AdKit what type of component to work with.

facebookPageUrl

Mandatory

URL to the Facebook from which the component retrieves posts. This must be an actual Facebook page. For more information, see https://www.facebook.com/business/products/pages.

height

Mandatory

Height of the component.

width

Mandatory

Width of the component.

autoGetFeedData

Optional

Determines whether or not to automatically connect to Facebook for data fetch. The ad will load faster and require less http traffic when this is false. It is an optional, Boolean field whose value can be either true or false.

If autoGetFeedData is false users may request facebook component to get feed data on demand:

Code

                            adkit.onReady(function(){
                          
                            adkit.$(“id”).getFeedData();
                          
                            });
                          

false

placeholderImage

Optional

A dummy image that is displayed until the feed is revealed. Once a user clicks the placeholder image, the feed loads and the image disappears.

showThumbs

Optional

Determines whether or not to show thumbnail images in the feed.

false

feedBackgroundColor

Optional

Background color of the feed.

transparent

linkColor

Optional

Color of links in the feed items.

#0000FF

fontFamily

Optional

Font family for all text in the widget.

Arial

fontSize

Optional

Font size for text in the feed.

12px

textColor

Mandatory

Color of text in feed items.

#000000

separatorColor

Optional

Color of border between feed items.

#DDDDDD

thumbnailPercentSize

Optional

Relative size of thumbnails in feed items.

15%

textPercentSize

Optional

Relative size of text in feed items.

15%

timestampColor

Optional

Text color of timestamps in feed items.

#DDDDDD

buttonColor

Optional

Color of click-through button.

#0052b1

buttonHeight

Optional

Height of the click-through button.

buttonTextFontSize

Optional

Size of text on click-through button.

11px

buttonPositionRight

Optional

Button position from the right of the containing overlay.

0

buttonPositionTop

Optional

Button position from the top of the containing overlay.

0

buttonText

Optional

Label inside of click-through button.

VISIT

buttonTextColor

Optional

Color of label text inside click-through button.

#FFFFFF

buttonTextFontFamily

Optional

Font family of label text inside click-through button.

Arial

buttonWidth

Optional

Width of click-through button.

100px

overlayColor

Optional

Background color of overlay containing click-through button.

#000000

OverlayHeight

Optional

Height of overlay containing click-through button.

32px

overlayPosition

Optional

Location of overlay containing click-through button.

bottom

Change Log

1.0.0

Release: January 31st, 2016

  • First release

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments