Include twitter widget code in head.

[mhulse]

Should I?

I feel like we need to create a jQuery plugin for the new twitter widgets that allows for the widgets to be scaled based on container size.

Either create the plugin later, or now, but either way, but should I include the link to widgets.js?

[carldavaz]

I think this is a good idea!

[mhulse]

Looks like Twitter has actually updated their new widgets to be responsive.

I'm going to setup a demo page and docs for us to use in future.

[mhulse]

I've created a WIKI page here:

https://github.com/registerguard/registerguard.github.com/wiki/Twitter-timeline-widget-guide

I'll be rolling-in the twitter JS and CSS in coming days.

[mhulse]

Code is complete, other than this issue:

https://dev.twitter.com/discussions/18933

Which may not even be a problem.

[mhulse]

I'm glad I spent the last day working on this twitter stuff because Twitter JUST turned off the ability to use the old widget code:

We'll need to find all the old widget locations and replace them with the new embed code (found on that demo page). Look me up for details.

[mhulse]

FYI, if you don't feel like reading the WIKI, this is a copy/paste version of a user timeline:

<a 
    class="twitter-timeline" 
    href="https://twitter.com/candersonrg" 
    data-widget-id="347149624567558145" 
    data-screen-name="candersonrg" 
    width="100%" 
    height="400"
>
        Tweets by @candersonrg
</a>

Just change the three candersonrg references to the username whose timeline you want to display.

[mhulse]

Just for posterity's sake, here's the old widget code (API v1.0):

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
    <!--
        new TWTR.Widget({
            version: 2,
            type: 'profile',
            rpp: 20,
            interval: 30000,
            width: '100%',
            height: 300,
            theme: {
                shell: {
                    background: '#2d3138',
                    color: '#ffffff'
                },
                tweets: {
                    background: '#ffffff',
                    color: '#444444',
                    links: '#247fe6' /* Need to tweak color. */
                }
            },
            features: {
                scrollbar: true,
                loop: false,
                live: true,
                behavior: 'all'
            }
        }).render().setUser('SteveMims_RG').start();
    //-->
</script>

[mhulse]

Example of a List widget:

<a 
    class="twitter-timeline"
    href="https://twitter.com/rgsports/rg-sports-dept" 
    data-widget-id="296722620433440769" 
    data-list-owner-screen-name="rgsports" 
    data-list-slug="rg-sports-dept" 
    width="100%"
>
    Tweets from @rgsports/rg-sports-dept
</a>