Twitter Widget Update – 2013

Posted by:

Twitter recently discontinued a previous version of their free API Widget on June 10th 2013 that forced a lot of web developers to replace their previous version to their newest style.

Many of my free websites, including some of my custom business sites, have been affected by this change. If your still using the old version your notice that the Twitter feed is missing. Below you’ll read how to update from the older version to the newest version in just a few simple steps. This update should take 20-30 minutes depending on how much experience you may have.

Before we get started, please open the following web pages as a reference to my tutorial: (log into twitter before opening)

Widget Configuration
Widget Documentation

Step #1: Open your webpage that contains the widget

Remove the Twitter Script entirely from your HTML page. We will replacing this script with the newest version.

Step #2: Open the Widget Configuration link and create your widget

Visit the website above and create your feed using your profile name. Don’t worry to much about the other settings at this point as we will be using custom settings later on. Once you “CREATE WIDGET” and it should look something like this:

<a class="twitter-timeline"  href="https://twitter.com/PickeringtonWeb"  data-widget-id="347022604151967744">Tweets by @PickeringtonWeb</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>

Note the Data Widget ID number. Mine is 347022604151967744 as shown above. We wont be using the code generated as shown above, but we will be using the date-widget-id number assigned to your new widget in the next few steps.

Step #3: Copy and paste this code below where the old script was

Now this is where it starts to get real good. Copy the code below and place it onto your website where the old script once was, replacing the first set of “X’s” with your Twitter ID and then then last set of “X’s” with your new Data Widget ID number as explained above.

<a class="twitter-timeline" href="https://twitter.com/XXXXXX" data-widget-id="XXXXXX" data-theme="dark" data-related="twitterapi,twitter" data-aria-polite="assertive" data-chrome="transparent noscrollbar" data-link-color="#FFCC00"  width="200" height="320" lang="EN">Tweets by @twitterapi</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>

You’ll notice that extra elements have been placed into the script above that helps customize it’s appearance.

The few we want to be concerned about at this point are:

  • data-theme=”dark”
  • data-chrome=”transparent noscrollbar”
  • data-link-color=”#FFCC00″
  • width=”200″
  • height=”320″

To see how you can customize these settings of your new widget, open the Widget Documentation link at the top of the page.

For example if you want to change the height and width of your widget, just change the pixel size in the code. My width was “200” and height was “320” pixels. Change yours to the correct dimensions.

You’ll see a code for removing the scroll bar that reads, data-chrome=”transparent noscrollbar”. If you want a scrollbar just remove that line from the script.

If you want to change the link color within your tweets change the data-link-color=”#FFCC00″ to the color pallet attribute.

Once again, all the custom settings can be found within the Widget Documentation.

One thing that you’ll notice is that the tweets do not auto scroll. I’m still working to resolve this, so once I figure that out I’ll be sure to update this post. Also, if you use the “noscrollbar” settings, you can use the mouse wheel to scroll through the tweets, but your users might not know that. So again, I’m working on a solution for that too.

All in all this is a nice update to the previous version and has a lot of new features you will find within the Widget documentation. I’ll keep playing around with it and once I get more familiar with it’s new functions I’ll be sure to re-post and try to dummy it down a bit.

Enjoy!

 
0
  Related Posts
  • No related posts found.

You must be logged in to post a comment.