If you are active on Twitter, and you would like to display a list of your latest Tweets somewhere on your website, you can use a widget to do so. However, there is some initial setup that needs to take place before that information will be displayed on your site.
To begin with, you will need to login to your account on Twitter and create a new widget within your Twitter profile. You can leave the height set to the default, and you can leave it set to use the “Light” theme. There are a number of options you can modify while setting up the new Twitter widget.
- Type of Widget – You can choose to set up any of the following types of widgets:
- Profile – This will show the latest tweets from a specific user (your user account, by default)
- Favorites – A list of the tweets that have been “favorited” by a specific user
- List – A list of latest tweets within a specific Twitter List that you’re following or that you have set up
- Search – A list of tweets that match specific search criteria
- Using the Profile widget, you can set the following options:
- Username – the Twitter handle of the user whose tweets you would like to display (yours, by default)
- Exclude replies – exclude any tweets that begin with the “@” symbol (which are usually individual replies to other users)
- Auto-expand photos – Twitter will attempt to display any photos that are included within each tweet. If this option is disabled, the links will appear by themselves without the photo showing up under the tweet
- Height – defaults to 600px tall. You can set this to any desired height, but the default height should be sufficient for most situations
- Theme – a choice between a “Light” theme and a “Dark” theme; the “Light” theme should work best on most UMW websites
- Link color – defaults to “blue”. On the UMW website, we use the color “#2255aa” for all links within content, so you may want to set it to that value
- Using the Favorites widget or the List widget, you have the same options listed above, with the exception of the “Exclude replies” option (replies will be included, since the entire widget will be displaying a curated list of tweets)
- Using the Search widget, you have the following options, in addition to the options you have for the other 3 widgets:
- Search Query – you can enter any supported Twitter search query here. If you test a search query using the Twitter Advanced Search, you can copy that query (including the boolean “OR” and “AND” operators, location operators like “WITHIN”, date operators, etc.) into this box to tailor the search results
- Only show top Tweets – will narrow the results of the search so that only popular tweets are displayed
- Safe Search – excludes any tweets that Twitter programmatically determines might be inappropriate (profanity, sexual content, etc.)
Once you have configured your Twitter widget within your Twitter profile, you will receive a “Widget ID”. From there, you can go to Appearance -> Widgets and drag the “Twitter (JetPack)” widget into the appropriate place in your sidebars. If you do not see the “Twitter (JetPack)” widget available in your list of widgets, please let us know and we will activate the JetPack plugin on your site. Once you have dragged the widget into your sidebar, you can set a few other options for the widget, then check it out on your site.
When you set up your widget within your Twitter profile, you will be provided with some HTML code that you would normally copy and paste into your site. However, for security reasons, you cannot simply copy and paste that whole HTML snippet into a widget on your site. Instead, you’ll need to use the Twitter (JetPack) widget, and just paste in the relevant information. The main piece of information you’ll need is the “Widget ID”. The HTML code Twitter provides you will look similar to the following:
<a class="twitter-timeline" href="https://twitter.com/UMWWebmaster" data-widget-id="346667131263397890">Tweets by @UMWWebmaster</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>Within that, the information you need to copy is the “data-widget-id” value (in this case, that is “346667131263397890”, but it will be different for your widget. You will need to copy that ID number and paste it into the “Widget ID” field in your Twitter (JetPack) widget on your site. The rest should handle itself.
