Display your latest tweets on AMP pages

AMP Twitter AMPFace

Ever wondered how to display a selection of your latest tweets in AMP the same way you as might see on non AMP pages? It’s a great way of displaying quick updates from your Twitter account to your website viewers.

Follow the guide below to make the best use of the amp-tweet component. The method below also ensures the latest tweets appear on both your non AMP and AMP (if you are using AMP in “Transitional” (Paired) mode.

  1. You will need to login to your WordPress dashboard and go to “Appearances > Theme Editor”. Then open the “Header.php” file by clicking on it from the list on the right.
  2. Add the following code between the <head> and </head> tags. This ensures your Twitter feed will also work on your non AMP pages if you are using AMP in Transitional/Paired mode. (The official AMP plugin automatically calls the required head script on your AMP pages.
    <?php  if ( ! function_exists('is_plugin_inactive')) {  
    require_once( ABSPATH . '/wp-admin/includes/plugin.php' );
    }
    if (is_plugin_inactive('amp/amp.php')) {
    ?>
    <script async src="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"> <?php}?>
  3. Next you will need to add the code that displays your twitter feed. You can add this code to a page, post or widget where you want your tweet/tweets to appear. Simply open that page, post or widget and place the following code (in html format). Be sure to change the values as you please, in particular the “data-timeline-screen-name”. which refers to your Twitter handle.
    <amp-twitter width="786" height="200"
    layout="fixed"
    data-timeline-source-type="profile"
    data-timeline-screen-name="amphtml"
    data-tweet-limit="1"
    data-show-replies="false"
    data-chrome="noheader nofooter" >
    </amp-twitter>
  4. And that’s it, your’re done! Check your website and see how it looks. You can also see this link which shows you all the different parameters you can use, such as how many of your latest tweets to display.

For additional information visit the amp-twitter component page on the official AMP website. www.amp.dev, which features a live playround demo. You can also see an example below of our latest tweets being display via the steps in this post.