Twitter 的 Mash-up Service的集成方式

Twitter 的 UI Mash-up Service可分为三大块：

1. Web Intents — 一些链接，点了就能产生twitter的内容

2. Button — 你的页面上将看到一些Button

3. Widget — 你的页面上将看到一些widget，点其中的按钮或链接后将弹出新页面

下面逐个介绍一下这三类Service，重点将放在集成方式上(js or iframe, 页面大小等)

1.
Web Intents

Web Intents就是指向twitter网站一些特定内容的链接

<p><a href="http://twitter.com/intent/tweet?in_reply_to=51113028241989632">Reply</a></p>
<p><a href="http://twitter.com/intent/retweet?tweet_id=51113028241989632">Retweet</a></p>
<p><a href="http://twitter.com/intent/favorite?tweet_id=51113028241989632">Fav</a></p>

不过，twitter建议以pop-up的方式使用这些链接，并让弹出窗口的大小保持在550 * 420

你可以手动实现这种方式，也可以使用twitter提供的out-of-box支持：引入http://platform.twitter.com/widgets.js

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<p><a href="http://twitter.com/intent/tweet?in_reply_to=51113028241989632">Reply</a></p>
<p><a href="http://twitter.com/intent/retweet?tweet_id=51113028241989632">Retweet</a></p>
<p><a href="http://twitter.com/intent/favorite?tweet_id=51113028241989632">Fav</a></p>

那用iframe行不行？

<iframe src="http://twitter.com/intent/tweet?in_reply_to=51113028241989632"/>

我试了一下，第一个页面的展现没有问题，但如果在iframe里玩tweet时，很容易出现窗口大小问题和滚动条等问题。所以Twitter并不推荐这种做法：“While you can provide links to intents within IFRAMEs and widgets, the resultant pages cannot be loaded in an IFRAME.”

2.
Button

顾名思义，就是可以在你的网页上产生一个Twitter按钮。你可以通过三种方式集成这种按钮。

a.链接

<style type="text/css" media="screen">
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    background: url('http://a4.twimg.com/images/favicon.ico') 1px center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id="custom-tweet-button">
  <a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button" target="_blank">Tweet</a>
</div>

b.javascript

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

它的本质是通过javascript生成一个面积很小的iframe

c.iframe

 <iframe allowtransparency="true" frameborder="0" scrolling="no"
        src="http://platform.twitter.com/widgets/tweet_button.html"
        style="width:130px; height:50px;"></iframe>

点一下按钮，会跳到或弹出twitter相关页面，提示你执行操作，操作完合再回来

这个就不如facebook的like button。点like button时会触发ajax请求，勿需渲染新页面

3.
Widget

通过javascript在你的页面中渲染出一个窗体，里面放了几个链接

 
<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: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('chenjianjx').start();
</script>

点里面的链接，一般会弹出新窗口

注意，这个新产生的窗体并不是一个iframe，而仅仅是一个div.　上面的代码会强行在页面内插入div和其相关的css

Leave a Comment Cancel Reply