需要帮助twitter小部件

时间：2011-07-19 21:15:26

标签： javascript jquery html css twitter

我创建了一个jquery插件，在左边放置一个侧边栏用于社交媒体内容。我有下面的变量，这是内容的来源。我正在尝试使用小部件提取Twitter提要，但我不断收到错误“TWTR未定义”。任何想法如何解决这个问题？

此页面正在调用我创建的插件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>'
        );

此外 - 如果我从插件中删除此行<script src="http://widgets.twimg.com/j/2/widget.js"></script>，并将其放在我的网页的头部，我所看到的就是推特Feed。

编辑：好的，现在我在想，为什么我不能将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' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('CSuitesIndepend').start(); </script> - 附加到通过插件动态插入的元素？

当我尝试使用此代码时，它不会在#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>");
    });

4 个答案:

答案 0 :(得分：5)

有一个未记录的功能，允许您定位要加载窗口小部件的元素的ID。 我能够使用$ .getScript以及twitter提供的普通小部件代码来加载它来代替选择。

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


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

    });

答案 1 :(得分：1)

当您在该脚本中放置对象的引用的同时，您将在您添加的标记中放置对twitter js文件的引用。下载twitter js文件需要一秒左右的时间，但浏览器继续进行并解析你的内联脚本。

所以要做的第一件事就是从你的标记变量中删除对twitter脚本的引用，使用$ .getScript（）获取它，并使用$ getScript中的回调添加标记，这样它只运行你的内联一次来自twitter的js已经到达了浏览器。等等。

    var content = (
        '<div class="contentArea visible" id="fb">FB Content Area</div>'+
        '<div class="contentArea" id="twit"><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>'
    );
    $.getScript("http://widgets.twimg.com/j/2/widget.js",function(){ 
        // dynamically add the get social sidebar
    $('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
              '<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li>'+
              '<li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul></span>'+
              '</div><div id="inner"><div id="innest"><div id="message">Get Social With Comfort Suites!</div>'+
              '<div id="close"><a id="closeB" href="#">X</a></div><ul class="idTabs">'+
              imgs +'</ul>'+content +'</div></div></div>'); 

    });

但是我谦虚地建议将内联脚本从你附加到DOM的字符串中移出，并将其直接放入回调中，这样可以让你更整齐地将变量传递给它，假设下行了你想发送你的插件选项。最后一个选项会给你

    var content = (
        '<div class="contentArea visible" id="fb">FB Content Area</div>'+
        '<div class="contentArea" id="twit"></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>'
    );
    $.getScript("http://widgets.twimg.com/j/2/widget.js",function(){ 
        // dynamically add the get social sidebar
        $('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
                  '<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li>'+
                  '<li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul></span>'+
                  '</div><div id="inner"><div id="innest"><div id="message">Get Social With Comfort Suites!</div>'+
                  '<div id="close"><a id="closeB" href="#">X</a></div><ul class="idTabs">'+
                  imgs +'</ul>'+content +'</div></div></div>'); 


                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创建标记的this方法。它使更改更容易在版本控制差异中发现。只是个人偏好。

希望这有帮助。

<强>更新

看起来在创建窗口小部件时（新的TWTR.Widget），它调用.init（）并记住它嵌入页面的位置，然后在那里插入它想要的HTML代码。因为我们在头部的脚本中调用它，它将它放在文档的根目录中，覆盖其他所有内容。

尝试在函数中封装“new TWITR.Widget”调用，然后从标记中的内联脚本调用该函数，以便显示小部件。这样，变量仍然在标记之外，并且内联脚本中的所有内容都是对头部脚本中函数的引用。

所以你现在有一个类似

的功能 
                        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 = (
    '<div class="contentArea visible" id="fb">FB Content Area</div>'+
    '<div class="contentArea" id="twit"><script>makeTwitterWidget();</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>'
);

答案 2 :(得分：0)

您是否考虑过考虑过http://code.bocoup.com/jquery-twitter-plugin/

答案 3 :(得分：0)

如果有人还在努力解决这个问题，Twitter可能会为您解决问题， http://blog.twitter.com/2012/09/more-tweets-across-web.html

相关问题
最新问题