Embedding a Twitter element on a page or portal element (Page Manager)

This article refers to our legacy product, Page Manager. For the best Finalsite experience, we recommend using our newest product, Composer. To find out how to upgrade your site, talk to your Client Success Manager or learn more on our website.

Creating a Twitter Portal Element

In order to display tweets on a web page, Twitter requires end users to create a widget on the Twitter homepage and embed that widget in a content space (such as a content element on a portal page.) This article explains the process, as well as each configuration option on the Twitter widget creation page.

Creating the Widget

The widget page has a number of options on the left-hand side; on the right, the “Preview” pane shows a live view of what the widget will look like to end users as the various options are configured.

  1. Choose what type of Twitter widget you want to display:

    • User Timeline: shows the posts of one particular user (usually your own or your school's account)

    • Favorites: shows the Twitter posts of a selected group of tweets that you have selected as your “favorites.”

    • List: displays all of the Twitter activity by members of a Twitter List

    • Search: shows all posts that contain a particular #hashtag

  1. To create a User Timeline, enter your school's account name in the “Username” field. Use the checkbox underneath to set whether or not you want to display replies to your tweets in addition to the tweets themselves.

  2. With the Favorites Timeline, again, put a Twitter user's account name in the “Username” field. The widget will display all of the tweets (from any Twitter user) that the designated account has selected as a “Favorite.”

  3. Choosing the List Timeline will replace the “Username” field with a dropdown menu. Use the dropdown to select a list that you've previously created.

  4. Using the Search timeline lets you create a Twitter feed that displays any tweets, from any user, that contains a hashtag that you enter.

  5. Each widget also has a number of other controls that can be customized:

    • Height: enter the height of the widget, in pixels. The width will automatically scale to fit the available content area. For instance, if a widget is placed in an element on a 2-column portal page, it will be displayed within the column where it's displayed.

    • Theme: select “light” or “dark” to match the background of the page where the widget is placed

    • Link color: customize the color of any hyperlinks within each Tweet. Click on the box to bring up a color picker, and click “Done” when finished.

    • Domains: enter your school's web domain (i.e., “www.finalsiteacademy.com”). Note: be sure to include the 'www.'!

    • “Opt-out of tailoring Twitter” - select this checkbox to ensure that suggested tweets from other accounts are not displayed in the widget.

After all of your choices have been made, click the blue “Create widget” button at the bottom of the screen.

Posting the widget on your site

  1. You'll need to copy and paste the code that is displayed after clicking “Create widget” onto your site to display the Twitter widget on a site page, in a portal element, or in a banner element. Note that different parts of the code must be pasted into different areas of the site!

  2. There are actually two parts to the Twitter widget HTML code. As an illustrative example, here's the code for embedding the finalsite Twitter widget:


    <a class="twitter-timeline" href="https://twitter.com/finalsite" data-widget-id="374896023627247617">Tweets by @finalsite</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    The first part of the code, shown in red, is just the first line, beginning with '<a class=' and ending with '</a>'. This part is pasted onto the page where you want to display the Twitter stream.

    The second part of the code, shown in green, begins with '<script>' and ends with '</script>' - this is pasted into the Page Layout that is applied to that page.


  3. Navigate to the page where you want to place the Twitter widget. If it's a portal page, create a new Twitter Element and place it in the desired location on the portal.

  4. For regular pages, click on the popup editor at location you chose in step 2, then open up the HTML editor and paste in the first part of the Twitter widget code there (see Step 2, above).

    To edit a Twitter portal element, drop the element on the portal page and then click the associated yellow pencil icon to edit it...

    ...and then paste the first part of the code directly into the large text area.

    To add the Twitter widget to a Banner element, create a new Text Element on the banner, then edit the HTML of that element directly. Paste the first part of the code into the text element's HTML Source code.

  5. Save the HTML editor/portal element/banner, then save and publish the page. (...Or banner. Save & Publish whatever you were working on!)

  6. Find the Page Layout that applies to the page by going into Page Manager and clicking the "Page Banners and Layout" section, and noting the Page Layout used.

  7. Open the Layout from the "Site Manager" tab - go to "Design > Page Layout," and find the proper layout in the list at the left. In the "Script and Style Code" section, paste in the other section of the Twitter widget code (the part that begins with '<script>' and ends with '</script>'). Don't worry if there are other pieces of code in that section. Just hit enter a couple of times to give yourself some whitespace, and past the script code in.
  8. Save and publish the layout. The Twitter element should now work properly.
Was this article helpful?
0 out of 0 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.