PRODUCT
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.

01_example.png

Implementation

Downloads

We have created two example Workspaces to help you get started:

tick.gif 300x250 with placeholder image tick.gif 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.

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

  • index.html

  • config.js

  • 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: []
});
  • 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

Mandatory/Optional

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:

02_id.png

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