CODEWITHSUNDEEP
javascriptjquerydomtwitter
csi
csi

Reputation: 9328

Twitter Profile Widget - load inside specific div & include javascript in footer

How do I load the Twitter Widget script in the footer and place the Widget inside a specific div?

<html>
<body>
<!-- html code for the page -->
<script>   
     /* load Twitter widget into div#twitter-widget */
</script>
</body>

For those unfamiliar with the Twitter Widget, its code looks like

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
     background: '#333333',
     color: '#ffffff'
   },
tweets: {
  background: '#000000',
  color: '#ffffff',
  links: '#4aed05'
}
  },
  features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
 }
}).render().setUser('twitter').start();
</script>()

Can use document.ready() to load Twitter widget but

1) How do I target the div#twitter-widget if the script is loaded in the footer
2) Sometimes this breaks

Upvotes: 0

Views: 938

Answers (2)

Daniel
Daniel

Reputation: 23

If I understand correctly, then you want to run the widget once the footer loads and you implented the proper link.

let's say your footer's id is "footer". Do something like this:

$("#footer").load(function(){
  $(this).append('<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.THE-URL-TO-YOUR-PAGE" data-text="Check out my latest video!">Tweet</a>');

$.getScript("http://platform.twitter.com/widgets.js"); //This can also be put as a script tag above the body.

twttr.widgets.load(); //If you used the getScript above, you don't need this line
});

I hope this answers your question.

Happy coding! :)

Upvotes: 1

Hoff
Hoff

Reputation: 39816

try sticking the <script>js...</script> into the element that you want the widget rendered in, it should be as simple as that.

Upvotes: 0

Related Questions