Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

WCMS 3 supports X (formerly Twitter) integration that allows users to add an embedded tweet, profile, or list to their page. Note that due to changes made by Twitter, these may not be reliable, displaying “Nothing to see here - yet” for many users.

You can also control how your WCMS 3 page is displayed in Tweets linking to your WCMS page.

For more information on the block, visit X (formerly Twitter) in our Block library.

Expand
titleCreate a Twitter embedded Add an Embedded tweet

The Embedded Tweet option embeds a single tweet onto a content page.

  1. From the administration bar, select Workbench, and then select My Dashboard

  2. Navigate to the Content list panel and select the content you would like to edit. Alternatively, create a new web page.

  3. Select the Layout tab. 

    screenshot of layout tabImage Removedscreenshot of layout tabImage Added
  4. Select + Add section, if applicable. 

  5. Select + Add block. Under External Embeds, select X (formerly Twitter)

    Screenshot of Twitter blockImage RemovedX (formerly Twitter)Image Added
  6. Enter a Title. Select whether you want it to display or not by checking/unchecking the Display title box. The title will appear as a block heading if Display title is selected.

  7. Select Embedded Tweet from the X (formerly Twitter) feed type drop-down menu.  

  8. On Twitter, select the three dots in the top right corner of the tweet you would like to display and select </> Embed Tweet

    Screenshot of embed tweet option
  9. In the embedded tweet window, select Copy Code

  10. In WCMS 3 Configure block dialogue, and paste the embedded tweet code in the Tweet code field. 

  11. Select Add block (Or Update if it is a pre-existing block).

  12. Select state from the Change to: drop-down menu. 

  13. Select Save layout

Expand
titleAdd a X (formerly Twitter) Profile

The X (formerly Twitter) Profile option displays the tweets from a single X (formerly Twitter) account.

  1. From the administration bar, select Workbench, and then select My Dashboard.

  2. Navigate to the Content list panel and select the content you would like to edit. Alternatively, create a new web page.

  3. Select the Layout tab.  

  4. Select + Add section, if applicable. 

  5. Select + Add block. Under External Embeds, select X (formerly Twitter)

    Screenshot of Twitter blockImage RemovedX (formerly Twitter)Image Added
  6. Enter a Title. Select whether you want it to display or not by checking/unchecking the Display title box. The title will appear as a block heading if Display title is selected.

  7. Select Profile from the X (formerly Twitter) feed type drop-down menu.

  8. Enter the X (formerly Twitter) username. This is the Twitter handle without the "@" sign, not the profile name. 

    Screenshot of a Twitter username
  9. Select Add block (Or Update if it is a pre-existing block).

  10. Select state from the Change to: drop-down menu.

  11. Select Save layout

Here is an example of a X (formerly Twitter) embed that features a profile and allows users to navigate through its tweets:https://twitter.com/UWaterloo?ref_src=twsrc%5Etfw%7Ctwcamp%5Eembeddedtimeline%7Ctwterm%5Escreen-name%3AUWaterloo%7Ctwcon%5Es2

Screenshot of the embedded tweet

Note: The "View on X (formerly Twitter)" link at the bottom of the block is fixed and cannot be removed.

Expand
titleCreate Add a X (formerly Twitter) List

X (formerly Twitter) lists consist of X (formerly Twitter) accounts compiled by a user. The Twitter Block will list the account that created the list as "Tweets by @[account name]/[list name]".

In X (formerly Twitter)

  1. Log in to your X (formerly Twitter) account. 

  2. Select Lists from the left navigation bar

  3. To the right of Lists and your username, select the New List icon. 

    Screenshot of new lists
  4. Add a Name and an optional Description, then select Next.

  5. Enter the usernames of accounts you'd like to add to the list in the Search Bar (ex. @UWaterloo). 

  6. Beside the profile name, select Add to add the account to your list. 

    Screenshot of add it to your list
  7. Select Done

Add the List to WCMS 3

  1. From the administration bar, select Workbench, and then select My Dashboard

  2. Navigate to the Content list panel and select the content you would like to edit. Alternatively, create a new web page.

  3. Select Layout tab. 

  4. Select + Add section, if applicable. 

  5. Select + Add block. Under External Embeds, select X (formerly Twitter)

    Screenshot of Twitter blockImage RemovedX (formerly Twitter)Image Added
  6. Enter a Title. Select whether you want it to display or not by checking/unchecking the Display title box. The title will appear as a block heading if Display title is selected.

  7. Select List from the X (formerly Twitter) feed type drop-down menu.  

  8. Enter the X (formerly Twitter) username.

    • Note: This is the Twitter X username without the "@" sign, not the profile name.

  9. Enter the List name

    Screenshot of configure block
  10. Select Add block (Or Update if it is a pre-existing block).

  11. Select state from the Change to: drop-down menu. 

  12.  Select Save layout.

Expand
titleConfigure Twitter Card meta tags

Twitter Card meta tags allows you to control how your WCMS 3 page is displayed on a Twitter Card when a Tweet links to your WCMS page.

You only need to use this if you want to provide different information to Twitter than is set in the basic tags.

WCMS supports seven four types of Twitter Cards:

  • Summary Card (Default)

  • Summary Card with large image

  • Photo Card

  • Gallery Card

  • App Card

  • Player Card

  • Product Card

  1. From the administration bar, select Workbench, and then select My Dashboard.

  2. Navigate to the Content types panel. Select the web page you would like to edit from the Content list panel.

  3. Select the Edit tab.

  4. Select Advanced configuration

  5. Navigate to the Twitter cards panel.

  6. Select Twitter card type.

    Screenshot of Twitter card typesImage RemovedScreenshot of Twitter card typesImage Added
  7. In the Description field, add a description that summarizes the content of the page. The character limit is 200.

  8. If required by the card type selected, enter the title of the page in the Title field. The character limit is 70.

  9. Optionally, enter the Creator’s X (formerly Twitter) account. This is the @username for the account. The "@" symbol needs to be included when entering the account.

  10. Optionally, enter the Creator’s X (formerly Twitter) account ID. This is the numerical account ID for the creator/author.

  11. Enter the Image URL, if applicable.

  12. Enter alternative text in the Image alternative text field, if applicable. The alt text is a description of what is in the image, not a caption.

  13. Enter the Image width and Image height, into their respective fields, if applicable.

  14. Populate any other required fields for the selected card type.

  15. Select state from the Change to: drop-down menu.

  16. Select Save.