Drupal 9: Add a Twitter Block to a Drupal Site

Create a Twitter Developer Account

  1. In your web browser, navigate to https://developer.twitter.com/en/portal/dashboard and log in with your Twitter account.
  2. Apply for Elevated Access
    1. Select Products in the left navigation
    2. Select Twitter API v2 in the left navigation
    3. Select the Elevated tab at the top of the page
    4. If you do not have Elevated Access, you can apply for that level

Create a Twitter app

  1. Select Projects & Apps in the left-hand navigation. The Project & Apps expands.
  2. Select Overview.
  3. Select +Create App button.
  4. Enter a name for your App - this name will only appear in your Twitter Developer account and will not appear in the embedded feed on your website
  5. Select Next.
  6. Save the "API Key" and "API Secret Key" for your future reference.
    • You can copy/paste them into a text document.
    • Make sure you properly label them so you can easily refer back to them later in the set up process.
  7. Select App Settings.
  8. Save "APP ID" for your future reference.
  9. Select Keys and tokens under the name of the app near the top of the page,
  10. Select Generate button corresponding to "Access Token and Secret" and save both the Access Token and Access Token Secret values.
    the keys and tokens page for the twitter app. The Generate button associated with access token and secret is highlighted.

The five items you will need later in the setup process:

  • API Key
  • API Secret Key
  • APP ID
  • Access Token
  • Access Token Secret

Drupal Enterprise only - Enable the Twitter API Block module 

*Note - Drupal Lite sites will have the module enabled by default.

  1. Sign into the website where you wish to embed the twitter feed.
  2. Select Extend in the administration toolbar.
  3. Scroll down to the Twitter category
    1. Enable Twitter API Block (if not already enabled).
  4. Select Install at the bottom of the page

Embed the Twitter Feed

Option 1: Add the Twitter Feed to a page using Layout Builder (recommended if you only want the Twitter feed to appear on one page)

  1. Go to the page where you want the Twitter feed to appear.
  2. Select the Layout button under the page title
  3. Select + Add block in the region where the Twitter feed should appear.
  4. Select Twitter - Tweets block under the Content category
    the custom block for twitter-tweets is highlighted.
    1. If you do not see the Twitter - Tweets Block as an option, you will need to enable it in the display settings for the content type corresponding to the node on which you would like to add the block. In Drupal Lite, you will need the Content Type Manager role to complete these steps:
      1. Click Structure in the admin toolbar
      2. Click Content Types
      3. Click the drop-down carrot on the far right for the content type corresponding to the node where you want to add the twitter feed, i.e. "General Page"
        the default content types and the general page is highlighted.
      4. Select Manage Display
      5. Under Layout Options, click to expand Blocks Available For Placement (All Layouts & Regions)
      6. Check the box next to Twitter - Tweets block
        the layout options dialog box with the twitter-tweets block highlighted.
      7. Click the Save button at the bottom of the page
  5. Enter the Twitter credentials you saved previously:
    1. Enter the API key into the Consumer Key field
    2. Enter the API Secret Key into the Consumer secret field
    3. Enter the APP ID into the Twitter Application Name field
    4. Enter the Access Token into the OAuth Access Token field
    5. Enter the Access Token Secret into the OAuth Access Token Secret field
  6. Specify the number of Tweets you would like to display in the block
  7. Enter the Twitter username for the account would like to embed without the @ symbol in the Username field
  8. Select the appropriate boxes if you would like to include replies and/or retweets
  9. Select the Add Block button
  10. Select the Save Layout button

Option 2: Add the Twitter Feed via Block Layout to one or more pages (recommended if you want the same Twitter feed to appear on multiple pages)

*Note - Drupal Lite users will need the Advanced Site Builder role to complete these steps.

  1. Login to the website to which you'd like to add the Twitter feed and click the Structure menu in the admin toolbar at the top of the screen.
  2. Select Block Layout
  3. Select the Place Block button corresponding to the region where you want to add the block (you can move it later if desired).
  4. A pop up window appears. Select the Place Block button corresponding to the the "Twitter - Tweets block"
    the place block dialog box with the twitter-tweets block highlighted.
  5. Enter the Twitter credentials you saved previously:
    1. Enter the API key into the Consumer Key field
    2. Enter the API Secret Key into the Consumer secret field
    3. Enter the APP ID into the Twitter Application Name field
    4. Enter the Access Token into the OAuth Access Token field
    5. Enter the Access Token Secret into the OAuth Access Token Secret field
  6. Specify the number of Tweets you would like to display in the block
  7. Enter the Twitter username for the account would like to embed without the @ symbol in the Username field
  8. Select the appropriate boxes if you would like to include replies and/or retweets
  9. Under Visibility, restrict the block to certain content types, pages, or user roles as desired
  10. Select the Save Block button
TDX ID
6080