简体   繁体   English

Twitter Profile Widget-在特定div内加载并在页脚中包含javascript

[英]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? 如何在页脚中加载Twitter Widget脚本并将Widget放入特定的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 对于那些不熟悉Twitter Widget的人 ,其代码看起来像

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 可以使用document.ready()加载Twitter小部件,但是

1) How do I target the div#twitter-widget if the script is loaded in the footer 1)如果在页脚中加载了脚本,如何定位div#twitter-widget
2) Sometimes this breaks 2) 有时会中断

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". 假设您的页脚ID为“页脚”。 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! 编码愉快! :) :)

尝试将<script>js...</script>粘贴到要呈现小部件的元素中,它应该就这么简单。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM