Adding a Twitter TimelineEdit

  • Adding a Twitter Timeline is somewhat complex, but it should be a piece of cake if you follow these steps.
    1. Sign in to and visit the {{#NewWindowLink: section of your settings page}}.
    2. Click the "Create new" button.
    3. Configure your settings on the left. Your username should be added automatically.
    4. Click the blue "Create widget" button. Twitter should create the code for you in the bottom right. It should look similar to this:
      <a class="twitter-timeline" href="" data-widget-id="WidgetID">Tweets by @TwitterName</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.src=p+"://";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    5. In this code is your WidgetID, it will be a very large number found after data-widget-id in the code. You will need this ID so keep track of it.
    6. On the page you want to display the twitter feed, use the <twitter> tag. It has two required attributes (user and id). They are used as like this:
      <twitter user="TwitterName" id="WidgetId">
    7. Now save the page and voilà, the Twitter widget should now appear.

Available Attributes Edit

  • user (required) - This is the name of the Twitter account. This is used for when we fail to load the feed from Twitter.
  • id (required) - This is the widget id given from Twitter. It is what lets Twitter know which feed we're trying to display. For information on getting one, please read #Adding a Twitter Timeline.
  • height and width - These optional attributes allows you to specify the height and width of the timeline, respectively.
  • data-chrome - This optional attribute allows you to customize how the timeline looks. See {{#NewWindowLink:'s dev docs}} for more information.
  • limit - This optional attribute allows you to select how many tweets are displayed. Only accepts values 1-20, anything over 20 will only show 20 items. Anything less than 1 will be ignored.
  • aria-polite - This optional attribute is primarily for users that are using screen readers to use Wikia. Depending on how you set this, users using these technologies will be notified if a new tweet comes in. Legal values are
    • off - user will receive no mention of it updating
    • polite - user will receive mention when they finish what they are doing
    • assertive - user will receive mention as soon as possible
  • alt-text - This optional attribute allows you to set the text that will display if the user has JavaScript disabled. It defaults to "Tweets by @user".


  • The Twitter box can be customized, but the customization is limited. Within Twitter's widget setup, you can change the height, theme colors, and link colors. The rest would have to be changed via local CSS on the wikia.
  • Twitter's widget creator doesn't honor the width value on the left when creating the code. If you wish to add a width or height value, you can do so by adding it to the link manually like:
    <twitter user="TwitterName" id="WidgetId" height="500px" width="250px">