Embedding Twitter Feeds

The person creating this block must be at least a Site Manager
as it requires access to the Full HTML option.

As of this posting, we're still awaiting an official Social Media module from the Drupal Community to address the popular need to display feeds from the main social media outlets like Facebook, Twitter, and Instagram.

In the meanwhile, you may want to consider these sets of instructions as an interim fix until we can offer you the best solution from Drupal.

Use Case

You would like to have the option to display one or more Tweets from a specific Twitter account on your site.

Create your block

  1. Navigate to Shortcuts > Blocks > Custom block library tab.
  2. Click the + Add custom block button.
  3. From the list, select the Basic block.
  4. Enter in the desired information in the Block description field.
  5. Instead of pasting your code into the Body section, instead change the Text Format menu from Basic HTML to Full HTML.
  6. Enter the following code in your page:
    <a class="twitter-timeline" href="https://twitter.com/ucdavis?ref_src=twsrc%5Etfw" data-tweet-limit="1" width="100%"></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  7. Save your work. Please note, at this point only a site manager can edit this block.
  8. Edit the block and update the bolded sections with your preferred information if you wish:
    <a class="twitter-timeline" href="https://twitter.com/ucdavis?ref_src=twsrc%5Etfw" data-tweet-limit="1" width="100%"></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    1. ucdavis - this is the Twitter account name.
    2. data-tweet-limit="1" - this is a parameter that tells the block to only display one tweet and only the most recent one. You can change this, but it's good to keep a cap on how many to display so you don't have this block's output overrun your page.
    3. width="100%" - this is a parameter that tells the block to take up the full available width of its container, in this case, the full width of the Basic Block's body area, which will be resized depending on where it's placed and in what medium it is viewed.
  9. Save your work and then place your block on a page.
  10. Our demo should be visible in the sidebar. Please be aware that this is considered a custom addition; we do not offer support for Twitter embeds as this is created by a third-party service.

Additional Resources