Twitterの「Tweet button」を設置する

2012.12.28 (金)

普通のリンク共有ボタンを作成する

Tweetボタンは以下のURLから作成します。特に認証など必要なく誰でも作成が可能です。
http://twitter.com/about/resources/buttons

様々な種類のTweetボタンがありますが、「リンクを共有する」ボタンが定番なのでそれを例にして設定してみます。サンプルはこちら
URLをクリックして「リンクを共有する」ボタンを選択するとボタンのオプション設定画面が現れます。 が、この時点で最低限のボタンはすでに生成されていますので、コピペゾーンからソースをコピーしてHTMLなどに貼り付けてしまっても構いません。一応各種設定があるので入力しておくと良いと思います。
またURLを共有のところで「ページのURLを使う」を選択すると設置したページのURLを自動的に取得します。
ソース自体は以下のようになっています。

<a href="https://twitter.com/share" class="twitter-share-button" data-text="デフォルトで設定する文言をここに設定できます。PHPやJSで書きこめば動的にテキストを挿入できます。またこのテキストの後部には自動的にURLが付きます。" data-lang="ja">ツイート</a>
<script>
    !function(d,s,id) {
        var js,fjs=d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js=d.createElement(s);
            js.id=id;
            js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document,"script","twitter-wjs");
</script>

特に設定する箇所も何もない感じです。アトリビュートだかモディファイアだかを見るとだいたい見当がつくのでソースからの文言変更も十分可能です。

returnを返すTweetボタンを作成する

Tweetしたら、Tweetされるわけですが、言ってみればそれはそれで終わりです。しかしTweetした方には次のページへとか、何らかのメッセージとかいろいろなアクションをつけたい場合がある。そのような場合は、 bindで値を取得して次なるアクションやイベントにつなげることができます。(少なくとも2015-03-04現在はできます。)  まずは通常のようにボタンを作成します。ボタンを貼り付けた後にアンカー部分のみを残してJavascriptで書かれた部分を丸々削除します。の部分です。それから以下のコードを同じ箇所に(アンカータグのすぐ下辺りに)埋め込みます。

<a href="https://twitter.com/share" class="twitter-share-button" data-text="デフォルトで設定する文言をここに設定できます。PHPやJSで書きこめば動的にテキストを挿入できます。またこのテキストの後部には自動的にURLが付きます。" data-lang="ja">ツイート</a>
<script type="text/javascript" charset="utf-8">
    window.twttr = (function (d,s,id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js=d.createElement(s);
        js.id=id;
        js.src="//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        return window.twttr || (t = {_e: [], ready: function(f){ t._e.push(f)}
    });
    }(document, "script", "twitter-wjs"));

        //ツィート完了ステータス
        twttr.ready(function (twttr) {
            twttr.events.bind('tweet', function() {
            //ツィート終了後のアクション
            location.href="[リダイレクト先のURL]";
        });
    });
</script>

この例では、投稿完了後に単にアラートが立ち上がります。アラートを埋め込んでいる箇所(//ツィート終了後のアクション)に何らかのイベントを書けばTweetしてくれた人だけに何かしらのアクションを施すことができます。