Twitter Integration

Creating and using twitter feed in cms page. (Example uses @Twitter feed)

1. Create twitter widget:

• Navigate to Widget Creator and enter desired twitter page
• Select Embedded Timeline

Now you will get preview of feed you selected and code to implement. The code should look something like this:

<a class="twitter-timeline" href="https://twitter.com/Twitter">Tweets by Twitter</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

You need only the first part.

2. Add to CMS:

• Create or Edit CMS page and add first line from generated code to page content.

3. Add Scripts:

• Navigate to CMS Layout
• Add twitter inject

let twitterInclude = document.createElement('script');
twitterInclude.setAttribute('src', 'https://platform.twitter.com/widgets.js');
document.head.appendChild(twitterInclude);

Note: This adds script shown in second line of generated code.

• Add event listener to load feed

document.body.addEventListener("cmsPageLoaded", function(){
  if (document.querySelector('.twitter-timeline')) {
    window.twttr.widgets.load();
  }
});

When CMS page is loaded it fires event cmsPageLoaded. This code catches that event, checks if twitter class is present and loads widget.

Note: checked class should be same as provided in generated code