Did you know there is a nifty hidden feature that lets you specify the id of the element where you want to load the widget? By using $.getScript in conjunction with the standard twitter widget code, I successfully loaded it into my desired location.

Check out the script I utilized below:

    $(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();
    });

    });

When adding a reference to the Twitter javascript file within your markup, ensure that you are also referencing an object within the script. It may take a moment for the browser to download the Twitter js file, but it will still parse your inline script right away.

To address this issue, consider removing the reference to the Twitter script from your markup variable, fetch it using $.getScript(), and then add the markup with a callback from $.getScript. This way, your inline script will only run once the Twitter js file has been loaded by the browser. Here is an example of how you can achieve this:

    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>'); 

    });

Consider moving the inline script outside the string being appended to the DOM and placing it directly into the callback function. This approach allows for cleaner passing of variables to the script, especially if options need to be sent to the plugin in the future. By doing so, you won't need to escape quotes and tools like jsHint can assess the script more effectively.

Additionally, explore another method for creating markup with jQuery which could make changes easier to track in version control diffs. It's a personal preference but worth considering.

I hope these insights are helpful!

Update:

It seems that when the widget is created (new TWTR.Widget), it automatically calls .init() and inserts the HTML code at that exact point. This behavior causes it to overwrite other content on the page since we're invoking it in a script placed in the head section.

Try encapsulating the "new TWITR.Widget" call within a function and then call that function from an inline script in your markup where the widget should appear. This way, variables remain external to the markup, and the inline script simply references a function defined in the head script.

Here is an example function setup for the Twitter widget:

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();
};

Then, adjust the content variable accordingly:

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>'
);

Did you happen to explore the option of using

If you're encountering difficulties, Twitter might have the solution you need,