需要帮助twitter小部件
我创建了一个jquery插件，在左边放置一个侧边栏用于社交媒体内容。 我有下面的变量，这是内容的来源。 我正在尝试使用小部件提取Twitter提要，但我不断收到错误“TWTR未定义”。 任何想法如何解决这一问题？
这个页面正在调用我创建的插件http://social.allthingswebdesign.com
var content = ( 'FB Content Area'+ '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();'+ 'Youtube Video'+ 'Yelp reviews'+ 'Trip Advisor Advice'+ 'The Linked In Page' ); 另外 – 如果我从插件中删除此行 ，并将其放在我的网页的头部，全部我看到的是twitter feed。
编辑：好的，所以现在我在想，为什么我不能只追加推特小部件代码 – 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(); 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(); – 通过插件动态插入的元素？
当我尝试这段代码时，它不会在#tweetFeed中插入任何内容 –
$(document).ready(function() { // add the sidebar plugin $('html').social(function() { //console.log('#tweetFeed = '+ $('#tweetFeed').parent().html()); $('#tweetFeed').insertAfter("TEST
"); }); //console.log('#tweetFeed = '+ $('#tweetFeed').parent().html()); $('#tweetFeed').insertAfter("TEST
"); });
有一个未记录的function，允许您定位要加载窗口小部件的元素的ID。我能够使用$ .getScript以及twitter提供的常规窗口小部件代码来加载它来代替选择。
这是我使用的脚本，我希望这有助于……
$（文件）。就绪（函数（）{
$ .getScript（'http://widgets.twimg.com/j/2/widget.js'，function（）{
新的TWTR.Widget（{
版本：2，
类型：'个人资料'，
id：'twitterBox'，
rpp：4，
间隔：30000，
width：'auto'，
身高：'自动'，
主题：{
贝壳： {
背景：'透明'，//这很重要
颜色：'＃333'
}，
推文：{
背景：'透明'，//这很重要
颜色：'＃666'，
链接：'＃d14836'
}
}，
特征： {
滚动条：false，
循环：false，
活着：假的，
行为：'全部'
}
}）渲染（）SETUSER（ '用户名'）开始（）。;
}）;
}）;
当您在该脚本中放置对象的引用的同时，您将在您添加的标记中放置对twitter js文件的引用。 下载twitter js文件需要一秒左右的时间，但浏览器继续进行并解析你的内联脚本。
所以要做的第一件事就是从你的标记变量中删除对twitter脚本的引用，使用$ .getScript（）获取它，然后使用$ getScript中的回调添加标记，这样只有在js来自js时才运行你的内联twitter已经到达浏览器。 所以像。
var content = ( 'FB Content Area'+ ''+ 'Youtube Video'+ 'Yelp reviews'+ 'Trip Advisor Advice'+ 'The Linked In Page' ); $.getScript("http://widgets.twimg.com/j/2/widget.js",function(){ // dynamically add the get social sidebar $('body').prepend('
但我谦虚地建议将内联脚本从你附加到DOM的字符串中移出，并将其直接放入回调中，这样可以让你更整齐地将变量传递给它，假设你想要的那一行下去向您的插件发送选项。 最后一个选项会给你
var content = ( 'FB Content Area'+ ''+ 'Youtube Video'+ 'Yelp reviews'+ 'Trip Advisor Advice'+ 'The Linked In Page' ); $.getScript("http://widgets.twimg.com/j/2/widget.js",function(){ // dynamically add the get social sidebar $('body').prepend('
' + '
'+ ''); 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(); });
这有额外的好处，你不需要逃避你的报价，jsHint（或其他）也将评估该脚本。
最后，考虑使用jQuery创建标记的这种方式。 它使更改更容易在版本控制差异中发现。 只是个人偏好。
希望这可以帮助。
更新：
看起来在创建窗口小部件时（新的TWTR.Widget），它调用.init（）并记住它嵌入页面的位置，然后在那里插入它想要的HTML代码。 当我们在头部的脚本中调用它时，它将它放在文档的根目录中，覆盖其他所有内容。
尝试在函数中封装“new TWITR.Widget”调用，然后从标记中的内联脚本调用该函数，在该脚本中您希望窗口小部件出现。 这样变量仍然在标记之外，并且内联脚本中的所有内容都是对头部脚本中的函数的引用。
所以你现在有一个类似的function
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(); }); }
内容变量如下所示：
var content = ( 'FB Content Area'+ ''+ 'Youtube Video'+ 'Yelp reviews'+ 'Trip Advisor Advice'+ 'The Linked In Page' );
您是否考虑过考虑过http://code.bocoup.com/jquery-twitter-plugin/
如果有人仍在努力解决这个问题，Twitter可能已经为你解决了这个问题， http：//blog.twitter.com/2012/09/more-tweets-across-web.html
'+ ''+ imgs +'
'+content +'