Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

WCMS 3 supports Twitter integration that allows users to add an embedded tweet, profile, or list to their page.

 Create a Twitter 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 tab
  4. Select + Add section, if applicable. 

  5. Select + Add block. Under External Embeds, select Twitter

    Screenshot of Twitter block
  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 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

 Add a Twitter Profile

The Twitter Profile option displays the tweets from a single 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 Twitter

    Screenshot of Twitter block
  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 Twitter feed type drop-down menu.

  8. Enter the 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 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 Twitter" link at the bottom of the block is fixed and cannot be removed.

 Create a Twitter List

Twitter lists consist of 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 Twitter

  1. Log in to your 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 Twitter

    Screenshot of Twitter block
  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 Twitter feed type drop-down menu.  

  8. Enter the Twitter username.

    • Note: This is the Twitter 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.

 Configure 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.

WCMS supports seven 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 types
  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 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 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.

  • No labels