Breadcrumb

Social Media Tools

Our Drupal system does not include any modules specifically for external social media integration. Typically social media platforms have their own methods or third party tools that will allow website integration. This page will include offerings that may be beneficial for your need of including social media onto a page or within a block. Please note that these are only recommended but aren't technically supported by ITS or UCR. 

Twitter

The following information was taken from the "How to embed a timeline" help page on Twitter and modified for our Drupal instance and best practices. 

  1. Go to https://publish.twitter.com/.
  2. Enter the URL of the timeline you’d like to embed. For example, https://twitter.com/UCRiverside. 
  3. Customize the design by selecting a display option. There are additional customization options available to select from such as specifying the height and theme (light or dark). It is best to not set the height and width to a specific pixel size, due to our sites being responsive in nature. 
  4. Copy the code.
  5. Go to the page or block you want to display the timeline. You'll need to be in a WYSIWYG editor. Switch the text format (bottom of the editor) to "Rich text Editor (Source)" if it isn't already. Then select "source" from the edit options; you will now be seeing the HTML of the content. Place your cursor where you want the timeline to appear (between two paragraphs for example). Paste the code into the HTML.
  6. OPTIONAL: You may want to add the attribute "data-tweet-limit" to your timeline. This will limit the display of tweets. 
    Example below will limit the tweets to the latest three. 
    <a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/UCRiverside">Tweets by UCRiverside</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  7. Save your page/block. 

Instagram

At the time this was written, the only tool available directly from Instagram allowed for only a single post embed. You can learn how to use the native Instagram Embed feature on their site. 

There are third party tools, both paid and free with an account. These options allow for a curated list. 

Facebook

Facebook posts can be embedded and the developer's webpage has a handy tool. 

Embedded posts for Facebook

When you have your embed code, go to the page or block you want to display the post. You'll need to be in a WYSIWYG editor. Switch the text format (bottom of the editor) to "Rich text Editor (Source)" if it isn't already. Then select "source" from the edit options; you will now be seeing the HTML of the content. Place your cursor where you want the Facebook post to appear (between two paragraphs for example). Paste the code into the HTML. Save the page or block.