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.

Implementation

Downloads

To help you get started, we have created two example Workspaces:
 300x250 with placeholder image
 300x600, no placeholder image

Procedure

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
  1. 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:[}    
      });
  2. In the ITEMS array, add one object entry as displayed in the following example.

    Important: The URL you use, described in the Configuration Options Reference 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
    }
  ]
});
  1. 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'.
  2. 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