twitter's profile widget include in a separate javascript file

Question

I'm just trying to put the custom twitter's profile widget on my page, but I like to put the code in a separate javascript's file.

so, I don't know how to do that.

I mean, I put this on head tag

<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>

the create a div for the widget, an put the rest of the code in another javascript

new TWTR.Widget(json_twitter_options).render().setUser('username').start();

But, how to "put" the result in that widget... I'm totally lost, thanks in advance.

Answer 1

The solution for me was simply to add an "id" property to the options object of an element that you want the widget to render into. This way you can even load the script with require.js or after the page loads and still render the widget into the space you want.

I didn't find any documentation for this property by the way.

ex:

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 135,
  height: 700,
  theme: {
    shell: {
      background: '#e5e5e5',
      color: '#363F49'
    },
    tweets: {
      background: '#e5e5e5',
      color: '#000000',
      links: '#06C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  },
  id: 'someDivId'
}).render().setUser('comster').start();

Answer 2

Just put the entire code into a new javascript file (name it anything you like, like twitter.js), and link it in where you want it to display, like under

<div id="twittercode">[js file link goes here]</div>

---

This whole chunk should go into a new javascript file.

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 135,
  height: 700,
  theme: {
    shell: {
      background: '#e5e5e5',
      color: '#363F49'
    },
    tweets: {
      background: '#e5e5e5',
      color: '#000000',
      links: '#06C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('USERNAME').start();

Answer 3

The js file doesn't have to be in the head just above the widget

this code works I have tested it:

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 135,
  height: 700,
  theme: {
    shell: {
      background: '#e5e5e5',
      color: '#363F49'
    },
    tweets: {
      background: '#e5e5e5',
      color: '#000000',
      links: '#06C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('USERNAME').start();
</script>

Answer 4

Ok, It seem my question was not understand.

I couldn't do what I want. But the way to simplify my problem, was creating a json object for setting up the widget.

I'm still want to find a way to not use script tag inside body tag

thanks a lot to viewvers!