Did your tweets recently break on your website? Here’s why, and how to fix it

For at least the past two to three years, I have been using what most everyone else was using to display tweets on my website – Twitter’s API – via a great Javascript plugin for jQuery, which was provided by Sea of Clouds. The problem is, just a few days ago, Twitter stopped support of this unauthenticated API thereby breaking millions of websites across the web from happily displaying tweets using this plugin.

The reason Twitter deprecated the Twitter 1.1 API, which broke everyone’s code, is to push users to their native embed Twitter timeline widget, which happens to force users to use oAuth to display their publicly available tweets. In my opinion, for Twitter to all of a sudden just stop supporting Twitter 1.1 API is a pretty crappy way to treat their developer community.

Alas, but there is a solution! And after implementing it here on BitShare, I must say it’s very easy to do, is lightweight and works like a charm. The solution is a simple Javascript code that you can copy and paste to your website and get your tweets back on your site in a matter of minutes.

The solution was created by Jason Mayes, as a direct result of the Twitter API being broken. It’s quite simple, and he provides the Javascript, along with some HTML and CSS to help you get it on your site.

You can find the code here: http://www.jasonmayes.com/projects/twitterApi

However, if you are a Tumblr user like myself, you may run into some issues executing the code on Tumblr because Tumblr actually malforms the Javascript after you copy and paste it into your custom HTML.

So, after talking to Jason and working it out together, we figured out the best way to implement his Javascript on Tumblr is actually to upload the script to a file and host it separately. Oh and by the way, Jason is one of the most helpful and gracious developers I have spoken to. He actually worked with me every step of the way in troubleshooting the issue, which we finally figured out was due to Tumblr breaking his script.

In order to get his code to work on your Tumblr, here is what you need to do.

Step 1: Log into Twitter and create your own timeline widget. This part is key in order to get your ID number. After creating the widget, in the Twitter URL will be the ID number you will need to display your tweets. It will look similar to this URL for my widget (in bold is the ID): twitter.com/settings/widgets/347077469637079040/edit

Step 2: Go to Jason’s Twitter API code and copy the Javascript.

Step 3: Open up Notepad or a text editor, and paste the code into it. Then make sure to replace the ID number with your ID number. The line of code will look like this: twitterFetcher.fetch(‘347077469637079040’, ‘tweets2’, 5, true, false, true, dateFormatter, false);

Step 4: After making the edit, save the file. Then either you can host it externally yourself if you have your own domain (like I did here) or for those without your own domain, Tumblr allows you to upload static files to the site to be hosted. You can load the saved file here on Tumblr: http://www.tumblr.com/themes/upload_static_file

Step 5: Once the file is loaded, simply go back to Jason’s Twitter API page, copy the HTML, add it to your site where you want the tweets to appear, then add your script file directly under the HTML. It will look similar to this:

Twitter API code

That’s it, you’re done. For most devs, Jason’s code as-is will work fine. The trouble I encountered was with how Tumblr handled his script, which is why you may want to follow the steps above to get tweets displayed on Tumblr without having to use their embed widget. If you run into any trouble or have questions on this, please feel free to leave a comment below.