Aug 042014
 

Recently I ran into an issue.  I needed to add some custom styling to Twitter’s timeline widget.  The problem I ran into is that Twitter only provides two styles; Light and Dark.  For my needs that wasn’t enough, I needed a custom background as well as some modification to text color, width and borders.   This presented some problems but I ended up coming with a solution of my own that I feel is nice and straight forward. 

What I needed to do just wasn’t possible given Twitter’s options for styling their widgets.  After scouring the internet I found a few ways to hack your styles into their iFrame with jQuery and while it was very easy it had a bit of a flickering effect.  It also required a bit of timing or the browser’s part or the changes would be ignored.  The only way I was finding that would have worked perfectly required an API key and setting up an application with oAuth.  This seemed far more complex than what I was trying to accomplish.

These were the issues that I was running into that made the widget less than optimal for the production quality website I was wanting to add it to.  However, after a little bit of thought I had an idea that allowed me to do exactly what I wanted very easily.  I was also able to add a little loading gif to make it appear more clean while waiting.

All it took was 5 simple steps:

Step 1) Get the code for a standard Twitter Widget

https://twitter.com/settings/widgets/
Twitter Widget Code
Step 2) Wrap Twitter’s widget in a div with display set to none

<div id="twitterWidget" style="display:none;">
     <a class="twitter-timeline" ...
</div>

Step 3) Create a new div styled accordingly with a simple loading gif added inside.

<div id="tweets" style="float:left; height:380px; width:300px">
    <div style="margin-top:145px; margin-left:35px;">
        <img src="/images/Loading.gif" />
    </div>
</div>

Step 4) Add a bit of jQuery to wait for the Twitter Widget to load and then pull HTML from the iFrame’s body into the new div tag replacing what’s currently in there.  It will continue attempting until the page has loaded and it can find the body element.

    <script type="text/javascript">
        $(window).on('load', function () {
            var configTwitterWidget = function () {
                if ($('#twitter-widget-0').contents().find('body').html())
                {
                    $("#tweets").html($('#twitter-widget-0').contents().find('body').html());
                }
                else
                {
                    setTimeout(function () {
                        configTwitterWidget();
                    }, 2000);
                }
            };

            configTwitterWidget();
        });
    </script>

Step 5) Create Styles on the page using the Twitter CSS classes from the standard widget.  You could also use jQuery to pull in the Stylesheet from the standard widget here and then make modifications as needed.

<style type="text/css">
.timeline-header, .timeline-footer {
    display: none;
}
</style>

Now you can style the Twitter timeline widget however you would like without having to create an application and generate an API key.  A great place to start with styling is to copy over the stylesheet that the twitter widget generates and begin your modifications there.   This could also be done dynamically using jQuery as well and then having styles that overwrite just the ones that you want to replace.

Hopefully this offers some assistance as it helped me implement what I feel is a clean solution for displaying a custom styled Twitter timeline widget on your website.

  One Response to “Custom Styled Twitter Timeline Widget In 5 Steps – No API Key Required”

  1. Hi. I know you wrote this article nearly a year ago, but it seems to be what I’m looking for…the only problem is that I’m not quite advanced enough to follow everything here. I’m 100% self-taught, and none of it was through books. So I’m kind of lost as to what goes where. Is there any way you could provide a sample of the actual full code…I know I seem like an idiot, but I have no clue where to put twitter’s code. You said inside a but I don’t see where it goes in yours.

    Now I duck my head and wait sheepishly for you to answer my stupid question, lol.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>