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. Click Extend, enter media in the Filter field.
  3. Under the MEDIA section, find Media Entity Twitter and click Enable to enable the Media entity twitter module.

    Page to enable media entity twitter module

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. From the Media source list, select Twitter.

    Media source of twitter

  4. Under the Media source configuration section, ensure that Whether to use Twitter api to fetch tweets or not value is set to No.
  5. Under the Field Mapping section, ensure that the Tweet ID and Twitter user information sections are set to - Skip field -.

    page to add the twitter view

  6. Click Save.
  7. Select Manage Display from the list next to Edit for the new Twitter media type.
  8. From the Format list of Tweet URL, select Twitter embed.
  9. Ensure that the Authored on, Authored by, and Thumbnail fields are in the Disabled section.

  10. Click Save.

Add media items

  1. Navigate to 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.

    page to add twitter URL

  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 field, enter a name for your view, for example Tweet view.
  3. Under View Settings, select the options as follows:
    • show: Media
    • of type: Twitter
    • sorted by: Unsorted
  4. In the Block Settings section, select the Create a block checkbox.
  5. Ensure that the Display format is selected as Slick Carousel of fields.

    create carousal page

  6. 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. In the Title section, click Tweet view and enter <none> in the Title field, and click Apply.

    page to change the name of the view

  3. In the Fields section, click Add and then search for tweet.
  4. Select the Tweet URL checkbox and click Add and configure fields.

    add fields page

  5. From Formatter, select Twitter embed and click Apply.

    page to add twitter embed formatter

  6. In the Fields section, click Media: Name, and click Remove.

    page to remove media name

  7. In the Filter Criteria section, click Media: Published (= True), and click Remove.

    page to remove published media

  8. In the Format section, click Settings next to Slick Carousel.
  9. From the Skin Main list, select Default.
  10. In the Caption Fields section, select Media: Tweet URL and Override main optionset checkboxes.
  11. In the Overridable Options section, select the Autoplay and Dots checkboxes, and click Apply.

    page to configure skin changes

  12. In the Pager section, clickItems, set the Items to displayfield to 0 then, click Apply.

    pager options page

  13. Click Save.

Embed the view on the front page of your Developer Portal

  1. Navigate to Structure > Pages.
  2. Find the welcome label and click Edit.
  3. In the Variants section, click Panels, then Content.
  4. Click Add new block.
  5. Under the Lists(Views) section, select your new block.

    add tweet view to block

  6. Clear the Display title checkbox and click Add block.
  7. You can now rearrange the position of your tweet view 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.