Tutorial: Displaying tweets on the front page

You can customize the appearance of the front page of your Developer Portal to display recent tweets. You might use the tweets to provide your users with information, such as service availability or marketing campaigns.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

About this tutorial

In this task, you create a view, customize that view to show tweets, then embed that view on the front page of your Developer Portal site.

Before you begin, the front page looks like this: Image of the front page

This tutorial takes you through the following steps:
  1. Enable the Media entity Twitter module.
  2. Create an entity called Twitter to store the tweets.
  3. Add media items.
  4. Create a carousel view.
  5. Customize the carousel view.
  6. Embed the carousel view on the front page of your Developer Portal.

Enable the Media entity twitter module

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Click Extend, enter media in the search bar.
  4. Check Media Entity Twitter, under MEDIA.Media entity twitter module
  5. Click Enable.

Create an entity called Twitter to store the tweets

  1. Navigate to Structure > Media types > Add media type.
  2. In the Name field, enter Twitter.
  3. In the Media source drop-down, select Twitter. Media source of twitter
  4. Ensure that Whether to use Twitter api to fetch tweets or not value is set to No.
  5. Ensure the values in the FIELD MAPPING section are set to - Skip field -. Add the Twitter view
  6. Click Save.
  7. Click Manage display from the Edit dropdown for the new Twitter media type.
  8. Drag the Authored on, Authored by, and Thumbnail fields to the Disabled section, and set the FORMAT of the Tweet URL field to Twitter embed. Manage display options
  9. Click Save.

Add media items

  1. Navigate to Content > Media > Add media > Twitter.
  2. In the Name field, enter a name for the media, for example Drupal Tweet.
  3. In the Tweet URL field, enter a URL, for example, https://twitter.com/drupal/status/966443708160839684. Add media item
  4. Click Save.
  5. Repeat these steps to add more tweets, you need at least 2 to make a carousel view.

Create a carousel view

  1. Navigate to Structure > Views > Add view.
  2. In the View name block, enter a name for your view, for example Tweet view.
  3. Under VIEW SETTINGS, show Media of type Twitter sorted by Unsorted.
  4. In the BLOCK SETTINGS, section check Create a block and ensure it is Display formatSlick Carousel of fields.Create carousel view
  5. Click Save and edit.

Customize the carousel view

You are now on the page where you can edit your view.

  1. If you are not the edit view page, navigate to Structure > Views, find the name of the view that you created, and click Edit.
  2. Click Tweet view and change it to the value <none>. Then, click Apply.Change the name of the view
  3. Click Add in the FIELDS section, then search for tweets, select the check box for Tweet URL. Then, click Add and configure fields. Add fields
  4. From the Formatter drop-down select Twitter embed, then click Apply.Twitter embed
  5. In the FIELDS section, click Media: Name, then, click Remove. Media name remove
  6. In the FILTER CRITERIA section, click the Media: Published (= True), then click Remove. Media published remove
  7. In the FORMAT section, click Settings next to Slick Carousel.
  8. Set Skin Main to Default.
  9. In the CAPTION FIELDS section, check Media: Tweet URL, and Override main optionset.
  10. In the OVERRIDEABLE OPTIONS section, select Autoplay and Dots then, click Apply. Skin main changes
  11. In the PAGER section, clickItems, set the field to 0 then, click Apply. Pager options
  12. Click Save.

Embed the view on the front page of your Developer Portal

  1. Navigate to Structure > Pages.
  2. Click Edit on the welcome page.
  3. Click Panels, then Content.
  4. Click Add new block.
  5. Select your new block, which is under LISTS(VIEWS). Add Tweet view to block
  6. Deselect Display title then, click Add block.
  7. You can now rearrange your view to be where you would like it on the front page. Sort the block on the front page
  8. Click Update and save.

What you did in this tutorial

You can check that the view you created appears on the front page of your site page.

The new frontpage with tweet carousel

What to do next

You can edit your view at any time by navigating to Structure > Views and selecting your view by its name. You can also modify or delete the view's layout on the front page by navigating back to the layout section of your page under Structure > Pages.

You can also integrate your Twitter data dynamically. For more information, see the links below.