Need help with twitter widget

Question

I created a jquery plugin which places a sidebar on the left for social media content. I have the variable below, which is where the content comes from. I'm trying to pull in a twitter feed using the widget, but I keep getting the error "TWTR is not defined". Any ideas how to fix this?

This page is calling the plugin I created http://social.allthingswebdesign.com

var content = (
            '<div class="contentArea visible" id="fb">FB Content Area</div>'+
            '<div class="contentArea" id="twit"><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 6000,width: 250,height: 280,theme: {shell: {background: \'#333333\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#444444\',links: \'#e02046\'}},features: {scrollbar: false,loop: false,live: false,hashtags: true,timestamp: true,avatars: false,behavior: \'all\'}}).render().setUser(\'CSuitesIndepend\').start();</script></div>'+
            '<div class="contentArea" id="youtube">Youtube Video</div>'+
            '<div class="contentArea" id="yelp">Yelp reviews</div>'+
            '<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
            '<div class="contentArea" id="li">The Linked In Page</div>'
        );

Also - If I remove this line <script src="http://widgets.twimg.com/j/2/widget.js"></script> from the plugin, and put it in the head of my webpage, All I see is the twitter feed.

EDIT: Ok so now I was thinking, why can't I just append the twitter widget code - <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 280, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#e02046' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('CSuitesIndepend').start(); </script> - to the element that was inserted dynamically via the plugin?

When I try this code, it doesn't insert anything into #tweetFeed -

$(document).ready(function() {

        // add the sidebar plugin
        $('html').social(function() {
            //console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
            $('#tweetFeed').insertAfter("<p>TEST</p>");
        }); 

        //console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
        $('#tweetFeed').insertAfter("<p>TEST</p>");
    });

Answer 1

You're placing the reference to the twitter js file in the markup you're adding at the same time as you're placing a reference to an object within that script. It takes a second or so to download that twitter js file, but the browser goes ahead and parses your inline script anyway.

so the first thing to do is to remove the reference to the twitter script from your markup variable, grab it using $.getScript(), and add the markup with a callback from the $getScript so it only runs your inline once the js from twitter has reached the browser. so something like.

    var content = (
        '<div class="contentArea visible" id="fb">FB Content Area</div>'+
        '<div class="contentArea" id="twit"><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 6000,width: 250,height: 280,theme: {shell: {background: \'#333333\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#444444\',links: \'#e02046\'}},features: {scrollbar: false,loop: false,live: false,hashtags: true,timestamp: true,avatars: false,behavior: \'all\'}}).render().setUser(\'CSuitesIndepend\').start();</script></div>'+
        '<div class="contentArea" id="youtube">Youtube Video</div>'+
        '<div class="contentArea" id="yelp">Yelp reviews</div>'+
        '<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
        '<div class="contentArea" id="li">The Linked In Page</div>'
    );
    $.getScript("http://widgets.twimg.com/j/2/widget.js",function(){ 
        // dynamically add the get social sidebar
    $('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
              '<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li>'+
              '<li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul></span>'+
              '</div><div id="inner"><div id="innest"><div id="message">Get Social With Comfort Suites!</div>'+
              '<div id="close"><a id="closeB" href="#">X</a></div><ul class="idTabs">'+
              imgs +'</ul>'+content +'</div></div></div>'); 

    });

But I'd humbly suggest moving that inline script out of the string you're appending to the DOM, and placing it directly into the callback, which would allow you to more neatly pass variables to it, assuming down the line that you want to send options to your plugin. This last option would give you

    var content = (
        '<div class="contentArea visible" id="fb">FB Content Area</div>'+
        '<div class="contentArea" id="twit"></div>'+
        '<div class="contentArea" id="youtube">Youtube Video</div>'+
        '<div class="contentArea" id="yelp">Yelp reviews</div>'+
        '<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
        '<div class="contentArea" id="li">The Linked In Page</div>'
    );
    $.getScript("http://widgets.twimg.com/j/2/widget.js",function(){ 
        // dynamically add the get social sidebar
        $('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
                  '<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li>'+
                  '<li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul></span>'+
                  '</div><div id="inner"><div id="innest"><div id="message">Get Social With Comfort Suites!</div>'+
                  '<div id="close"><a id="closeB" href="#">X</a></div><ul class="idTabs">'+
                  imgs +'</ul>'+content +'</div></div></div>'); 


                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 4,
                    interval: 6000,
                    width: 250,
                    height: 280,
                    theme: {
                        shell: {
                            background: '#333333',
                            color: '#ffffff'
                            },
                        tweets: {
                            background: '#ffffff',
                            color: '#444444',
                            links: '#e02046'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: true,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                })
                .render()
                .setUser('CSuitesIndepend')
                .start();

    });

Which has the added bonus that you don't need to escape your quotes, and jsHint (or whatever) will assess that script too.

Lastly, consider this way of doing markup creation with jQuery. It makes changes easer to spot in version control diffs. Just a personal preference though.

Hope this helps.

Update:

It looks like when the widget is created (new TWTR.Widget) it calls .init() and remembers where it's embedded in the page, then inserts the HTML code it wants right there and then. as we're invoking it in a script in the head, it's placing it in the root of the document, overwriting everything else.

Try encapsulating the "new TWITR.Widget" call within a function and then call that function from an inline script in your markup where you want the widget to appear. That way the variables are still outside of the markup, and all that's in the inline script is a reference to a function in your head script.

so you now have a function somewhere that something like

                        var makeTwitterWidget = function () {
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 4,
                    interval: 6000,
                    width: 250,
                    height: 280,
                    theme: {
                        shell: {
                            background: '#333333',
                            color: '#ffffff'
                            },
                        tweets: {
                            background: '#ffffff',
                            color: '#444444',
                            links: '#e02046'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: true,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                })
                .render()
                .setUser('CSuitesIndepend')
                .start();

    });

         }

and the content variable looks like:

var content = (
    '<div class="contentArea visible" id="fb">FB Content Area</div>'+
    '<div class="contentArea" id="twit"><script>makeTwitterWidget();</script></div>'+
    '<div class="contentArea" id="youtube">Youtube Video</div>'+
    '<div class="contentArea" id="yelp">Yelp reviews</div>'+
    '<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
    '<div class="contentArea" id="li">The Linked In Page</div>'
);

Answer 2

Have you considered have you considered http://code.bocoup.com/jquery-twitter-plugin/

Answer 3

If anyone's still struggling with this, twitter may have solved the issue for you, http://blog.twitter.com/2012/09/more-tweets-across-web.html

Answer 4

there's an undocumented feature that allows you to target the id of the element you want to load the widget in. i was able to use $.getScript along with the normal widget code twitter provides to load it in place of choice.

here's the script i used, i hope this helps...

    $(document).ready(function(){
    $.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    id : 'twitterBox',
    rpp: 4,
    interval: 30000,
    width: 'auto',
    height: 'auto',
    theme: {
    shell: {
        background: 'transparent', //this is important
        color: '#333'
    },
    tweets: {
      background: 'transparent', //this is important
          color: '#666',
      links: '#d14836'
    }
    },
    features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
    }
    }).render().setUser('username').start();
    });

    });