如何自定义默认 twitter 小部件的 javascript 的默认 html 输出？

Question

如何自定义默认twitter小部件的javascript默认html输出？

http://twitter.com/about/resources/widgets/widget_profile

在默认小部件中，我想从输出源中删除页眉和页脚（**不是在 css 中使用display:none）** （**绿色交叉 )** 这个，只想保留推文区。

这是默认的推特代码。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 6000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: 'transparent',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: false,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('tutsplus').start();
</script>

这是默认代码的输出

<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
    <div style="width: 100%;" class="twtr-doc">
        <div class="twtr-hd">
            <a class="twtr-profile-img-anchor" href="http://twitter.com/tutsplus" target="_blank">
                <img src="http://a2.twimg.com/profile_images/63581538/tutsplus_normal.jpg" class="twtr-profile-img" alt="profile"></a>
            <h3>
                Tuts+</h3>
            <h4>
                <a href="http://twitter.com/tutsplus" target="_blank">tutsplus</a></h4>
        </div>
        <div class="twtr-bd">
            <div style="height: auto;" class="twtr-timeline">
                <div class="twtr-tweets">
                    <div class="twtr-reference-tweet">
                    </div>
                    <div id="tweet-id-1" class="twtr-tweet">
                        <div class="twtr-tweet-wrap">
                            <div class="twtr-avatar">
                                <div class="twtr-img">
                                    <a href="http://twitter.com/tutsplus" target="_blank">
                                        <img src="http://a2.twimg.com/profile_images/63581538/tutsplus_normal.jpg" alt="tutsplus profile"></a></div>
                            </div>
                            <div class="twtr-tweet-text">
                                <p>
                                    <a class="twtr-user" href="http://twitter.com/tutsplus" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="http://twitter.com/rockablepress" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="http://www.facebook.com/rockablepress" target="_blank" class="twtr-hyperlink">http://www.facebook.com/...</a>) <em><a href="http://twitter.com/tutsplus/status/38368449310760960" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="http://twitter.com/?status=@tutsplus%20&amp;in_reply_to_status_id=38368449310760960&amp;in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- tweets show here -->
                </div>
            </div>
        </div>
        <div class="twtr-ft">
            <div>
                <a href="http://twitter.com" target="_blank">
                    <img src="http://widgets.twimg.com/i/widget-logo.png" alt=""></a> <span><a href="http://twitter.com/tutsplus" style="color: rgb(255, 255, 255);" class="twtr-join-conv" target="_blank">Join the conversation</a></span>
            </div>
        </div>
    </div>
</div>

而且我只想将这部分作为上述默认源的源输出。

<div class="twtr-tweet-text">
    <p>
        <a class="twtr-user" href="http://twitter.com/tutsplus" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="http://twitter.com/rockablepress" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="http://www.facebook.com/rockablepress" target="_blank" class="twtr-hyperlink">http://www.facebook.com/...</a>) <em><a href="http://twitter.com/tutsplus/status/38368449310760960" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="http://twitter.com/?status=@tutsplus%20&amp;in_reply_to_status_id=38368449310760960&amp;in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
    </p>
</div>

这个http://jsfiddle.net/ZUVzd/的JsFiddle示例链接

Answer 1

要从小部件中删除页眉和页脚，您只需添加 css：

.twtr-hd, .twtr-ft { display: none; }

Answer 2

他们提供的小部件旨在放入其中。除了他们为您提供的几个选项之外，它并不是真正用于大量定制。你最好自己建立这个而不是对抗它。这是一个jQuery plugin。听起来您可能想要第一个演示的内容，尽管有很多选择。

如果您更喜欢 Prototype、mootools 或其他任何东西，一些基本的搜索应该会找到等价物。

Answer 3

我认为您将不得不编辑 .js 文件并将编辑后的文件托管在您自己的服务器上。

“完整的文档来源见http://twitter.com/javascripts/widgets/widget.js”

获取并编辑此部分。

          var html = '<div class="twtr-doc' + isFull() + '" style="width: ' + this.wh[0] + ';">\
        <div class="twtr-hd">' + getHeader() + ' \
        </div>\
        <div class="twtr-bd">\
          <div class="twtr-timeline" style="height: ' + this.wh[1] + ';">\
            <div class="twtr-tweets">\
              <div class="twtr-reference-tweet"></div>\
              <!-- tweets show here -->\
            </div>\
          </div>\
        </div>\
        <div class="twtr-ft">\
          <div><a target="_blank" href="http://twitter.com"><img alt="" src="' + logo + '"></a>\
            <span><a target="_blank" class="twtr-join-conv" style="color:' + this.theme.shell.color + '" href="http://twitter.com/' + this._getWidgetPath() + '">' + this.footerText + '</a></span>\
          </div>\
        </div>\
      </div>';

我这样做是为了删除页脚，它对我来说很好。