Follow

Overview

The Twitter Feed component is a customizable widget that displays a list of Tweets from a user's timeline or a custom timeline.

Implementation

Downloads

We have created two example Workspaces to help you get started:
 300x250 with placeholder image
 300x600, no placeholder image (custom timeline)

Prerequisite

Before creating your Workspace, decide whether you want a user's timeline feed, or a custom timeline.

  • User Timeline: For a user timeline, all you need is to add the user's screen name to the config.js configuration for the component. Use twitterScreenName.
  • Custom Timeline: The types of custom timelines are:
    • Search Timeline: This presents the Twitter feed for a certain hashtag, for example #Zoolander2.
    • Likes: This presents only liked Tweets from a user's Twitter Feed, based on the user ID.
    • List: Feeds based on public Twitter lists.
      To get started creating your custom timeline, go to: https://twitter.com/settings/widgets/new/user.
      Once you have created a custom timeline, you need to find its ID and add that value to config.js as twitterWidgetId. For more information, see configuration options section.

For more information on embedding timelines, see https://support.twitter.com/articles/20170071?lang=en#.

Procedure

Add 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: []
});
  1. In the ITEMS array, add one object entry.
Code
define({
      ITEMS: [{
            id:'twitter-feed',
            type: 'adkit-twitter-feed',
            width: 300,
            height: 250,
            twitterScreenName: '@sizmek',
      }]
});
  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, we have it set to twitter-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 

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

Parameter Description Status Default
id The id of the div in your ad's index.html. The components renders itself within this specific div. Mandatory  
type This is a required field whose value must be adkit-twitter-feed. This fields tells AdKit what type of component we want to work with. Mandatory   
height The height of the component. Mandatory  
width The width of the component. Mandatory  
autoGetDataFeed Whether or not to automatically connect to Twitter for data fetch. The ad will load faster and require less http traffic when this is false. Boolean field. Supported values: true, false.  Optional False
placeHolderImage An image that is displayed as a feed placeholder, waiting for a user to click. Once clicked, the feed is loaded, and the image disappears to reveal the feed.  Optional No placeholder image 
twitterScreenName If you are using a User Timeline (vs Custom Timeline), set this to the user's screen name, for example, @sizmek. Mandatory  

Data Feed 

Configure the data feed using only one of the following options:

  • twitterScreenName

  • twitterWidgetId

 

 

 

If you are using a user timeline rather than a custom timeline, set the data feed to the user's screen name, for example: @sizmek.

If you are using a custom timeline, this is the id of the widget. To find the id of your widget, navigate to it from here: https://twitter.com/settings/widgets. Now, edit your widget, then look at the address in the URL. The id is the large number, as shown in screenshot below:

Mandatory  
noHeader Hides the header. Optional False
noFooter Hides the footer. Optional False
noBorders Hides the border. Optional False
noScrolbars Hides the scrollbars. Optional False
transparent Provides the Twitter feed with a transparent background. Optional False
language The languages supported by Twitter are: hi, zh-cn, fr, zh-tw, msa, fil, fi, sv, pl, ja, ko, de, it, pt, es, ru, id, tr, da, no, nl, hu, fa, ar, ur, he and th. Optional US English
theme The look and feel of the ad. Supports values: dark, light. Optional Light
linkColor The hexadecimal color of links in Tweets. Optional Twitter default link color
borderColor The hexadecimal color of the widget's border. Optional Twitter default border color

Change Log

1.0.0

Release: February 21, 2016

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

Comments