Embedding a Twitter Feed
Embedded Twitter feeds are no longer displaying content due to a recent change made by Twitter/X. If anything changes, updates will be posted on this page.
Authors can use the External Feed Component to quickly and easily display a Twitter Feed on AEM pages. Alternatively, authors with coding knowledge can use the HTML component which allows for greater customization. Both are available in the General Components tab of the Sidekick.
Click-and-drag the External Feed component into a 'Drag components or assets here' field.
Click Edit on the top left corner.
Click the "Feed Type" drop-down menu and select "Twitter." Then enter the Twitter ID into the "Source URL/Twitter ID" field. Click OK.
To preview the Twitter feed on your page, click on the Sidekick's 'Preview Mode' (magnifying glass button), and then click your browser's Refresh button.
Click-and-drag the HTML component into a 'Drag components or assets here' field.
Go to http://twitter.com/about/resources/widgets/ and select the widget you would like to embed (use the Profile Widget under the My Website tab for a feed of the most recent updates by a particular account) on your webpage. Type in the Twitter account name of the feed. Change the Settings, Preferences, Appearance, and Dimensions to your needs. When finished, get the code by clicking the Finish & Grab Code button and selecting & copying (CTRL-C or CMD-C) the Twitter Feed HTML code inside the box.
Once you have copied the Twitter feed HTML code, return to your AEM page, right click on the HTML component symbol shown below, and then click Edit (or double-click) to open the HTML Text dialogue box.
Paste (CTRL-V or CMD-V) the code from Twitter into the HTML Text dialogue box. Click OK.
To preview the Twitter feed on your page, click on the Sidekick's 'Preview Mode', and then click your browser's Refresh button.
Below is the SFU IT Services Twitter Feed as an example. To learn about embedding other types of code snippets, see the HTML Component.