需要帮助twitter小部件 [英] Need help with twitter widget

问题描述

我创建了一个jquery插件，在左侧放置一个侧边栏用于社交媒体内容。我有下面的变量，这是内容来自哪里。我试图使用小部件拉入一个Twitter的饲料，但我不断收到错误TWTR未定义。

此页面正在调用我创建的插件 http://social.allthingswebdesign.com

  var content =（
'< div class =contentArea visibleid =fb> FB Content Area< / div>'+ 
'< div class =contentAreaid =twit>< script src = //widgets.twimg.com/j/2/widget.js\"></script><script>new TWTR.Widget（{version：2，type：\'profile \'，rpp：4 ，间隔：6000，宽度：250，高度：280，主题：{shell：{background：\'＃333333\'，color：\'＃ffffff\}，tweets：{background：\' ＃ffffff\'，color：\'＃444444\'，links：\'＃e02046\'}}，功能：{scrollbar：false，loop：false，live：false，hashtags：true，timestamp ：true，avatar：false，behavior：\'all\'}}）render（）。setUser（\'CSuitesIndepend\'）。start（）;< / script>< / div> + 
'< div class =contentAreaid =youtube> Youtube视频< / div>'+ 
'< div class =contentAreaid =yelp> Yelp评论< / div>'+ 
'< div class =contentAreaid =ta> Trip Advisor Advice< / div>'+ 
'< div class =contentAreaid =li>链接的网页< / div>'
）; 
  

此外 - 如果我删除此行< script src =http： //widgets.twimg.com/j/2/widget.js\"> ;</script> 从插件，并把它放在我的网页的头部，我看到的是twitter

确定，所以现在我在想，为什么我不能只添加twitter窗口小部件代码 - < 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'
}
} ，
功能：{
scrollbar：false，
loop：false，
live：false，
hashtags：true，
timestamp：true，
avatars：false，
behavior：'all'
}
}）render（）。setUser（'CSuitesIndepend'）。
< / script> - 通过插件动态插入的元素？

当我尝试这个代码不在#tweetFeed中插入任何内容 -

  $（document）.ready（function（）{
 
 //添加边栏插件
 $（'html'）。social（function（）{
 //console.log('#tweetFeed ='+ $（'＃tweetFeed'））parent （）.html（））; 
 $（'＃tweetFeed'）。insertAfter（< p> TEST< / p>）; 
}）; 
 
 //console.log('#tweetFeed ='+ $（'＃tweetFeed'）。parent（）。html（））; 
 $（'＃tweetFeed'）。insertAfter（< p& / p>）; 
}）; 
  

解决方案

有一个未提供文档的功能，您要加载窗口小部件的元素。
i能够使用$ .getScript以及正常的窗口小部件代码twitter提供加载它在选择的地方。

这里是我使用的脚本，我希望这有助于...

 
 
 $（document）.ready （）{
 $ .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'，//这很重要
 color：'＃333'
}，
 tweets：{
 background：'transparent'，//这很重要
 color：'＃666'，
 links：'＃d14836'
} 
}，
特性：{
 scrollbar：false，
 loop：false，
 live：false，
 behavior：'all'
} 
}）render（）。setUser（'username'）。start（）; 
}）; 
 
}）; 
 
 

I created a jquery plugin which places a sidebar on the left for social media content. I have the variable below, which is where the content comes from. I'm trying to pull in a twitter feed using the widget, but I keep getting the error "TWTR is not defined". Any ideas how to fix this?

This page is calling the plugin I created http://social.allthingswebdesign.com

var content = (
            '<div class="contentArea visible" id="fb">FB Content Area</div>'+
            '<div class="contentArea" id="twit"><script src="http://widgets.twimg.com/j/2/widget.js"></script><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>'
        );

Also - If I remove this line <script src="http://widgets.twimg.com/j/2/widget.js"></script> from the plugin, and put it in the head of my webpage, All I see is the twitter feed.

EDIT: Ok so now I was thinking, why can't I just append the twitter widget code - <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> - to the element that was inserted dynamically via the plugin?

When I try this code, it doesn't insert anything into #tweetFeed -

$(document).ready(function() {

        // add the sidebar plugin
        $('html').social(function() {
            //console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
            $('#tweetFeed').insertAfter("<p>TEST</p>");
        }); 

        //console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
        $('#tweetFeed').insertAfter("<p>TEST</p>");
    });

解决方案

there's an undocumented feature that allows you to target the id of the element you want to load the widget in. i was able to use $.getScript along with the normal widget code twitter provides to load it in place of choice.

here's the script i used, i hope this helps...

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

    });

这篇关于需要帮助twitter小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！