Follow

Overview

The Facebook Feed component is a highly 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

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 reference section below 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 Options Reference

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

Parameter Description Optional Default
id ID of the div in your ad's index.html that this component should render itself within.  
type This is a required field whose value must be adkit-facebook-feed. It tells AdKit what type of component to work with.    
facebookPageUrl The URL to the Facebook page you would like the component to retrieve posts from. This must be an actual Facebook page. For more information, see https://www.facebook.com/business/products/pages.    
height The height of the component.    
width The width of the component.    
autoGetFeedData

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

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

 
showThumbs Determines whether or not to show thumbnail images in the feed. false
feedBackgroundColor Background color of the feed. transparent
linkColor Color of links in the feed items. #0000FF
fontFamily Font family for all text in the widget. Arial
fontSize Font size for text in the feed. 12px
textColor Color of text in feed items.   #000000
separatorColor Color of border between feed items. #DDDDDD
thumbnailPercentSize Relative size of thumbnails in feed items. 15%
textPercentSize Relative size of text in feed items. 15%
timestampColor Text color of timestamps in feed items. #DDDDDD
buttonColor Color of click-through button. #0052b1
buttonHeight Height of the click-through button. 32px
buttonTextFontSize Size of text on click-through button. 11px
buttonPositionRight Button position from the right of the containing overlay. 0
buttonPositionTop Button position from the top of the containing overlay. 0
buttonText Label inside of click-through button. VISIT
buttonTextColor Color of label text inside click-through button. #FFFFFF
buttonTextFontFamily Font family of label text inside click-through button. Arial
buttonWidth Width of click-through button. 100px
overlayColor Background color of overlay containing click-through button. #000000
overlayHeight Height of overlay containing click-through button. 32px
overlayPosition 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