12 Oct Set up a Twitter v1.1 embedded timeline
Twitter API v1 vs. v1.1
Adding a twitter widget to a site used to be a pretty straightforward task. It involved adding a Twitter provided script, with some javascript that would allow you to customize the look and feel of the widget. It looked something like this
Then, Twitter decided to completely change their API and aggravate web developers everywhere. Not only did they change it, but they officially retired Twitter v1 June 11. 2013 and broke all Twitter widgets that weren’t converted to the new v1.1 way of doing things. The biggest Twitter v1.1 differences that affected our clients were:
- Twitter requiring authentication, meaning all widgets now have to be tied to a Twitter account. Previously no Twitter account was required to display a widget.
- The look and feel of the Twitter widgets were no longer as customizable as they had been. With v1 we were able to control the color of the header, footer and links. Twitter v1.1 gives the choice of “light” or “dark” themes with very little custom options available. A complete list of changes can be found at https://dev.twitter.com/docs/api/1.1/overview
To add or change the widget to the use the new v1.1 API we saw that there were 2 options. Option 1 was that we could use the API and create our own custom widget. This would involve:
- Creating the app
- Coding for authentication using OAuth
- Integrate with the API to have the functionality needed and creating the widget itself.
- When using this option a developer has to be concerned with rate limiting, as seen here https://dev.twitter.com/docs/rate-limiting/1
Option 2, and the much simpler solution, is to use Twitter’s embedded timelines https://dev.twitter.com/docs/embedded-timelines. It is very easy to create custom widgets using Twitter’s advanced search form and embed the timeline into your code. One of the negative’s of this approach is the limited amount of customization available. Twitter gives light or dark themes as a choice, but we found if you eliminate the header and footer of the embedded timeline you can use CSS to create your own header and footer. Keep in mind that Twitter does have display requirements that developers should abide by https://dev.twitter.com/terms/display-requirements. A positive of the embedded timeline is that according to Twitter “Embedded timelines are not subject to traditional Twitter API rate limits, and are designed to scale with your site as your traffic and audience grows.” Yay.
We of course, chose the simpler and more straight forward option 2 and will detail the steps below.
Embedded Timelines
Our clients had a network of several papers that needed embedded timelines. Since a Twitter account is required to be tied to each widget we solved this with a more global solution. Each paper has their own Twitter account, but we didn’t want to get involved with having to manage the logins and accounts of those users. To keep it separate we just created our own dev team Twitter account in which we would store the embedded timelines for ALL papers. This keeps everything separate from the papers so that as devs if we need to make changes right away, we have full control.
Timeline Search Terms
While signed into your Twitter account, go to https://twitter.com/search-advanced. Enter all the criteria that you would like the widget to display and click “Search”. You will see the results of the advanced search. Click on the tools icon in the top right and select to “Embed this Search”. You will then be taken to the Create a Search Widget options for the search you just created. The query looks like this:#tamberra, OR #saxotech, OR #Newscycle_news from:tamberra, OR from:Newscycle_news, OR from:saxotech
Note: Though the advanced search doesn’t have an exclude user section, if you would like to exclude a specific twitter user from showing on the timeline you can put it in the query with a ‘-‘ in front of it. For example, if there was @myCompetitior showing up in my timeline, I would change the query to: -@myCompetitor #tamberra, OR #saxotech, OR #Newscycle_news from:tamberra, OR from:Newscycle_news, OR from:saxotech Twitter will provide the code for the widget.
This is the standard look for the widget.
This is the standard look for the widget.
Customize
You can view the Client Side Options that are available here https://dev.twitter.com/docs/embedded-timelines#customization For our purposes, we would like to customize the header and footer section of the Twitter widget. To do this, we must remove the header and footer provided by Twitter and add our own. Add data-chrome=”noheader” to the href in the script. This will remove the header and footer of the timeline. We then place some HTML around the timeline, that we can style and customize to our liking.
HTML
CSS for styling the HTML
Customized Version
Add to Saxotech
Since the code to display the widget is HTML along with script tags provided by Twitter, we can add this widget to pretty much any Saxo file we would like. A template file, object file, include file or macro. We tend to use macros to store something like this so that we can call it from any page we would like to display the widget on.
Updating Search Query
The good news is once you have added the code for the embedded timeline you shouldn’t have to change it if you alter the search query. As long as the widget contains the same data-widget-id as in the code, all new changes will automatically show in the timeline.
In Conclusion
We have found this to be the most straightforward approach to setting up Twitter widgets on our news sites. Creating one central dev Twitter account to house all embedded timelines for each website eliminates the confusion of managing several accounts user credentials. Utilizing what Twitter already provides does give us less control, but we don’t really NEED more control. The embedded timelines have the functionality that most users want.
.jpg)
Kara Noreika
.jpg)
Latest posts by Kara Noreika (see all)
- Website Accessibility:What is it and Does it Apply to my Small to Medium Sized Business? - October 29, 2018
- Common Drop Down List Data for WordPress Contact Forms - March 18, 2016
- Prevent Email Spam on Forms - April 16, 2014