Components Twitter Feed
Animate CC component that allows viewing and scrolling through twitter feed posts/tweets. This uses Twitter’s official API.
Using the component (End-User)
When the add starts, the feed will load. This may not be immediately visible if the component was nested inside another element on the canvas that is not initally visible (i.e. Slate). Each tweet in the feed contains similar features to tweets viewed on Twitter. There are additinal options in the footer of the feed to ‘Embed’ and to 'View on Twitter’. At the bottom of the list of tweets there is a link to load more tweets into the feed. Note that the style of the feed and the source of the tweets is set by the designer during configuration of the component and cannot be changed while the ad is playing.
Designing with the component
Placement
First, ensure the Components panel is showing in Animate CC (Winow > Components). Expand the Blink Components folder and drag the Twitter Feed component onto the canvas. Multiple can be placed on the same canvas. The components can be repositioned by clicking and dragging.
Instance Name
To adjust the properties of the component, ensure the desired Twitter Feed component is selected and open the Properties panel (Window > Properties). Each component can be designated a unique instance name if preferred. Otherwise, the instance name will be the component name + the number of components already placed (e.g. twitter-feed-0, twitter-feed-1, twitter-feed-2).
Size and Position
The position and size can be manipulated on the canvas or through the properties pane. Note: clicking the link icon next to the size properties will lock the aspect ratio.
Parameters
Under the Component Parameters heading are a list of configurable parameters for the select component. These parameters correspond to parameters listed in Twitter’s API reference guide. Adjustable properties include link-color, lang, tweet-limit, href, chrome, and theme. href is the link to the twitter feed you want the component to use (e.g. https://twitter.com/TremorVideo) See Twitter’s documentation for all other parameters. https://dev.twitter.com/web/embedded-timelines/parameters
Development
The component builds a twitter timeline using Twitter’s API and documentation, https://dev.twitter.com/web/javascript
Component Methods
getCreateString defines the root element to be a 'div’, which is assigned to this._$this. The twitter element will be appended to this div once it is created. The attach method handles building the twitter feed. The update method is fired every frame to apply property changes to the root element and dispatches a resize event when the screen resolution changes to fix the component size.
Twitter API
Code supplied by Twitter is executed before the component is created. The file containing the code is imported in at the top of the component file. Therefore, it will only be executed once, regardless of how many Twitter components are added to the creative. The code attaches the API used to create the twitter timeline to the window object.
Building the timeline is an asynchronous event. It begins by calling window.twtter.ready() and passing in a callback. Inside the callback, window.twtter.widgets.createTimeline() is called and supplied all the necessary parameters according to Twitter’s API documentation. This returns a promise, which contains the twitter feed html element. The element is automatically appended to the root div element. Futher configuration is applied in the attach method using the element to ensure the component looks and works properly in the creative.
Helper Methods
The component utilizes helper methods from a utility file. The _handleComponentUpdate method invoked during updates helps keep the component scaled appropriately.