How to remove scroll bar and limit tweets on Jetpack Twitter Timeline

[note color=”#ffffd6″]

Update 19-Aug-2013

This works on Jetpack 2.3.5 too!

Update 21-Jun-2013

WordPress has released Jetpack 2.3. This version of Jetpack now has the option to remove the scroll bars from the Twitter Timeline widget built in. However it still lacks the option to limit the number of tweets displayed. To enable this feature the steps described below are still valid.

Update 22-May-2013

If the below steps are too hard or confusing for you, just download this file or this file for if you are using Jetpack 2.3.1 or higher, unzip it and replace your twitter-timeline.php inside wp-content/plugins/jetpack/modules/widgets with it. Just make sure you make a backup copy of the original file just in case.

[/note] Recently Twitter decided to retire their API v1 and this affected many widgets and plugins based on it including the WordPress Jetback Twitter Widget. To address this change Jetpack released a new widget called Twitter Timeline with their latest version of Jetpack 2.2.3.

However with this initial release the Timeline widget is lacking some important features such as limiting the number of tweets displayed. Also the the widget shows a nasty vertical scroll bar which cannot be removed using the available widget options. After researching for a bit I have found a solution which will fix both these issues.

First of all the Jetpack Twitter Timeline widget is based on Twitter’s Embedded Timelines. After looking at the documentation I found out that there is a customization attribute called data-tweet-limit which will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. So the fix was to add this attribute to the Jetpack widget.

Step by Step

Before you continue with this fix please note that it involves the editing of Jetpack core files and all these edits will be lost the next time you update Jetpack. Also it might be a good idea to backup the Jetpack files in case you mess up.

  1. Go to wp-content/plugins/jetpack/modules/widgets using your online file manager or FTP client.
  2. You will need to edit the twitter-timeline.php file in this directory. You can download this file to your computer and use a text editor like Notepad++ or your default system text editor to edit the file.
  3. Find $data_attribs = array( and add 'tweet-limit' to this array. It should now look like this $data_attribs = array( 'widget-id', 'theme', 'link-color', 'border-color', 'chrome', 'tweet-limit' );
  4. Search the file and look for public function update . Under this function add the following lines of code just below $instance['widget-id'] = is_numeric( $instance['widget-id'] ) ? $instance['widget-id'] : ''; What this bit of code does is that it will enable storing of the tweet-limit variable along with all the other widget options.
  5. Next look for public function form . Under this function add  'tweet-limit' => '5',  to the $defaults = array . Now the array should look like this.
    This is adding the tweet-limit instance to the widget options form and setting its default value to 5.
  6. Now we’ll be adding a text box to the widget options to enter the tweet-limit. To do this, still under the public function form  function add the following code just above the last <?php tag at the bottom of the file.
     
  7. After making all these changes save the twitter-timeline.php file and upload it back onto your server, overwriting the original file.
  8. Now you should be able to enter the tweet limit in the widget options and the Timeline widget should be displayed without the scroll bars.tweet-limit

If you are using a caching plugin such as WP Super Cache, you might need to clear your cache for these changes to take effect.

Limitations

Please note that the tweet limit can only be an integer between 1 and 20. So maximum tweets can be only 20 and minimum is 1. Also as I mentioned above all these edits will be overwritten once you update Jetpack to a new version. However Jetpack might have this feature added by default in there next update making these edits unnecessary in the future.

Let me know in the comments below if you are having trouble with this fix.

7 Comments

  • Sorry but this did not do anything to remove the scroll bar or enable a ‘fixed’ number of tweets. My main concern however is removing the scrollbar. I followed your turotial to a ‘T’ and I successfully as the option box to my twitter widget but beyond that? No change.

  • Indeed, likely an amateurish coding error on my part. I replaced my file with yours. Now displayed without scrollbar. Thanks very much for the help and prompt reply.

    http://www.truenorthreport.ca

  • Hi there…

    My Twitter plugin that came with my theme stopped working and the Twitter widget they provide is so ugly. I had to use the jetpack one. I had the same problem, followed your instructions and input the code, but it didn’t work. So, I downloaded the file and uploaded, then it worked perfectly. Thanks for this, appreciated.

    Lorrie

    • Since at least two of you weren’t able to get it to work after following these instructions, I decided to compare these steps with the original file I edited. Turns out I had forgot to include one crucial step!

      I’ve now updated this post with the missing step (it’s step 3). Hopefully it’ll now work. Sorry for all the confusion. my bad 😀

  • Thanks for this, really helped!

Leave a Reply