Twitter Widget Fix

Published on 9 Aug 2013 at 11:56 am.
Filed under Informative,Social Media.

Notice that the Twitter widget feed on your website broke? Twitter deprecated the old API and you need a new widget. Here’s how to fix it.

Twitter Widget Fix: Most Sites

1. Log in to your Twitter account.
2. Visit the Widgets section under the account Settings.
3. Click the Create New button.
4. Under Configuration tailor the widget to your preferred look. Do not worry that you cannot define the width at this time. I recommend unchecking the “Auto-expand photos” and leaving the “Exclude replies” box checked. I do not believe that users want to see your replies, and the expanded photos will take up most of the feed. Feel free to experiment with these settings.
5. Click the Create Widget button.
6. Copy the text located below the Preview on the right. For us, the text looks like the following:
   
<a href="https://twitter.com/BrandBuilderCo" data-widget-id="347058359255588866">Tweets by @BrandBuilderCo</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>


7. Find the old script on your current website.
8. Replace the old script with the text script you just generated.
9. Save your content.

The Twitter developer documentation has client side options that enable you to change aspects of the Twitter widget. While it is not technically not standards compliant HTML, we recommend explicitly adding the width and height attributes mentioned in the documentation. For the SiteBrandBuilder Control Panel we use something like the following for our Twitter widget:

<a href="https://twitter.com/BrandBuilderCo" width="231" height="450" data-widget-id="347058359255588866">Tweets by @BrandBuilderCo</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>


The <script>...</script> part is only needed once per page. If you are going to use multiple widgets on one page you can just include the <a>...</a> on the other widgets. It will still work if you leave the unnecessary script tags. It just increases the load time of the page.

Twitter Widget Fix: Content Security Policy

The above code needs some tweaking if your site uses Content Security Policy (CSP). CSP is a security policy for preventing cross-site scripting. By default a browser will run anything that resides on the page. CSP it blocks all inline scripts. It also blocks external scripts, styles, and images except from the locations you specifically allow. This makes it more secure, but harder to run third-party widgets like Twitter.

Adding CSP to your site is very technical and likely requires help from your hosting company. It is unnecessary for most sites. As such I will only cover the changes you must make to a site that already has a CSP and wishes to add Twitter. For these sites you will need to:

1. Always load the script through an external script tag like so:
2. Remove all the <script>...</script> for the widgets. Leave the <a>...</a> tags.
   
3. Add the following to your CSP’s script-src and style-src directives:platform.twitter.com https://platform.twitter.com cdn.syndication.twimg.com https://cdn.syndication.twimg.com *.twimg.com https://twitter.com

After that you will have a working Twitter widget on your site again. It’s a little different from the old one and will take some getting used to.

This post was originally published as Twitter Widget Fix for Brand Builder Websites.