Twitter API is constantly changing and if you want to avoid further problems with your existing Twitter widgets maybe it’s time to create your own, working Twitter timeline widget?
Twitter is changing their API frequently and from time to time you may notice that some of the Twitter plugins and widgets for WordPress don’t work. It can be really annoying, especially when you are responsible for many WordPress websites. It takes time for plugins and widget developers to follow those Twitter changes and update their products.
Fortunately there is a solution which should solve Twitter related issues once and for all.
Follow below guide to create your own Twitter timeline widget:
- “Sign in” to your Twitter account.
- On the top-right corner click your account “photo thumbnail” and choose “Settings section“.
- From the left column links on the second one form the bottom called “Widgets“.
- Click “Create new” on the right to see widget options.
- Complete the fields in the form on the first tab called “User timeline” (some of those fields are optional).
- Click blue “Create widget” button.
- On the bottom right you should get now “snippet of code” (example below).
- Copy and paste the code and log in to your WordPress admin panel
- Navigate to the “Appearance” section and then to “Widgets“
- Choose standard “Text” widget and place it on the sidebar or footer area where you want to have your twitter timeline showing on the website.
- Choose the title for your widget and place the code copied in point 8.
- Click “Save” and go to your website to enjoy your new twitter timeline.
Great, now you’ve created your own Twitter widget which should be immune for further API changes.
Here is an example embed code which you will receive:
<a class="twitter-timeline" href="https://twitter.com/yourtwittername" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="transparent nofooter" data-tweet-limit="2">Tweets by @yourtwittername</a>
Additional timeline styling
You can make some quick layout changes with the data-chrome=”X” attribute. In place of X just use a space-separated set of a any from the options below (those are just the most important ones):
- noheader: Hides the timeline header. Please refer to the timeline display requirements when implementing your own header.
- nofooter: Hides the timeline footer and Tweet box, if included.
- noborders: Removes all borders within the widget (between Tweets, cards, around the widget.) See also: border-color.
- noscrollbar: option to hide scrollball if visible.
- transparent: use this option to remove the background color.
I personally prefer simple modification like this: data-chrome=”nofooter transparent”
Quite useful are also styling attributes below:
- height=”” and width=”” – with px as units
If you find this article helpful, please share it with the links below.