フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...）

（のちにキャッチーでポップな気の利いた文章に差し替える）

いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。
実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。

dev.twitter.com

目次

1. 公式ボタンの設置方法
1.1 ボタンの種類と入力項目
1.2 ページ内に公式ボタンを複数置きたい場合
1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合
1.4 ユーザーを複数入力したい場合
1.5 推奨ユーザーを複数入力したい場合
1.6 ハッシュタグを複数入力したい場合
1.7 画像付きツイートを投稿させたい場合
1.8 動画付きツイートを投稿させたい場合
1.9 （非同期でボタンをつくったときなど）己のタイミングでボタンを初期化したい場合
1.10 ツイートボタンの内容を動的に差し替えたい場合
1.11 フォローされているユーザーにDMを送りたい場合
1.12 JavaScriptでボタンを生成したい場合
1.13 なにがなんでも非推奨の環境にもツイートボタンを表示したい場合

2. Web Intentをつかってaタグでツイートボタンをつくる
2.1 ユーザー名を複数入力したい場合
2.2 推奨ユーザーを複数入力したい場合
2.3 ハッシュタグを複数入力したい場合

3. フロントのみでツイート数を取得したい場合

4. ツイッターウィジェットの設置方法
4.1 ウィジェットの種類とパラメータ
4.2 ウィジェットの横幅の最大値（520px）を超えたい場合

5. Twitterカードの設置方法

---

公式のボタンを設置する

こちらのページ からツイートボタンをつくることができます。

Twitter Publish

Tweet
Follow @ki_230
Tweet #%E3%81%9A%E3%83%BC%E3%81%97%E3%83%BC%E3%81%BB%E3%81%A3%E3%81%8D%E3%83%BC
Tweet to @ki_230

---

ボタンの種類

1. ツイートボタン
2. フォローボタン
3. ハッシュタグつきツイートボタン
4. メンションつきツイートボタン

の4種類から選べます。
今回はいちばん設置する機会が多いであろうツイートボタンを例に入力項目を説明していきます。
入力項目は、

1. URLを共有: 共有するURL
2. ツイート本文
3. ユーザー: ツイートに@#{ユーザー名}さんから にはいるユーザー名
4. 推奨: ツイート後にフォローを促すユーザー名（ユーザーに入力したユーザーは推奨に入れなくても表示されます）
5. ハッシュタグ
6. 大きいボタンをつかうか否か
7. Twitterが導き出したおすすめユーザーを表示するか否か
8. 言語設定

という感じです。

---

ページ内に公式ボタンを複数置きたい場合

公式ボタンを生成すると、aタグとscriptタグが1行ずつ生成されるのですが、scriptタグ部分、

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

は1つあれば充分なので2つ目以降はaタグのみコピペすればOKです。

---

ツイートの文字数を稼ぐためにURLの短縮を考えている場合

実は無意味です。
ツイート内のURLは文字数にかかわらず23文字 として扱われます。
昔はhttpsが23文字、httpが22文字だったのですが、現在はプロトコルにかかわらず23文字となっています。
また、稀なケースですがあたらしいドメインはURLと認識されずに普通のテキストとしてカウントされる場合があります。
僕は「.みんなドメイン」が出たての頃にこの現象を体験しました。

---

ユーザーを複数入力したい場合

入力フォームからの入力は困難です。
フォームには1人目のユーザー名を入力しHTMLを出力しましょう。

2人目以降のユーザー名はdata-via属性に半角スペース（%20）区切りで@付きで入力できます。

@user1 @user2 @user3さんから

と表示したい場合は、

<a href="https://twitter.com/share" class="twitter-share-button" data-via="user1%20@use2%20@user3">Tweet</a>

といった感じです。
ただしユーザーを複数入力した場合は、おすすめユーザーを入力しておかないとツイート後にフォローを促さなくなるようです。

---

推奨ユーザーを複数入力したい場合

カンマ区切りで入力できます。

---

ハッシュタグを複数入力したい場合

カンマ区切りで入力できます。

---

画像付きツイートを投稿させたい場合

基本的には後述する Twitterカード を使いましょう。

https://dev.twitter.com/ja/cards/overviewdev.twitter.com

TwitterカードはOGPのようにURLに対して画像を当てることができますが、どうしても1つのURLで複数の画像を出し分けたい場合などは、事前に対象画像をTwitterに投稿しておくことで実現できなくはありません。

kimizuka.hatenablog.com

ただしモバイルアプリ版Twitterでは事前投稿よりもTwitterカードのほうが優先されます。
事前投稿はいつつかえなくなるかわかりませんし、基本的にはTwiterカードで実装したほうが良いでしょう。

---

動画付きツイートを投稿させたい場合

こちらも基本的には後述する Twitterカード の Playerカード を使いましょう。

https://dev.twitter.com/ja/cards/overviewdev.twitter.com

Playerカードは事前に申請が必要だったりhttpsの環境が必要だったりするので若干敷居が高いのですが、できればそちらで実装したほうが安心という前提がありつつ、事前にGIFアニメをTwitterに投稿しておくことで実現することもできなくはありません。

kimizuka.hatenablog.com

ただし、こちらもモバイルアプリ版Twitterでは事前投稿よりもTwitterカードのほうが優先されます。
事前投稿はいつつかえなくなるかわかりませんし、基本的にはTwiterカードで実装したほうが良いでしょう。

---

（非同期でボタンをつくったときなど）己のタイミングでボタンを初期化したい場合

既に widgets.js 、
すなわち、

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

の部分を読み込んでいるのであれば、なんら難しいことはありません。

twttr.widgets.load();

で初期化できます。
widgets.js を読み込んでないのであれば読みこめばOKです。

---

ツイートボタンの内容を動的に差し替えたい場合

あまりないケースだとおもいますが、展開されたiframeのsrcにもろもろ情報が入っているのでそちらを編集してappendChildしなおすことによって、ツイートボタンの内容を差し替えることができます。差し替えるというよりもつくりなおしている感じですね。

kimizuka.hatenablog.com

---

フォローされているユーザーにDMを送りたい場合

ツイート本文をdからはじめ、スペースで区切り、ユーザー名を入力し、スペースで区切り、本文を書く、
すなわち、

d #{DMを送りたいユーザー名（@不要）} #{本文}

という感じにすることで一応DMを送ることもできます。
ただし専用のUIがあるわけではないのであまりつかわないほうが良いでしょう。混乱を招きます。

---

JavaScriptでツイートボタンを生成したい場合

あまりつかう機会は多くないと思いますが、Tweet Button JavaScript Factory Function をつかえばOKです。
Promisesを返す仕様になっているので、どうしてもボタンを生成したタイミングが知りたい場合につかうと良いでしょう。

dev.twitter.com

---

なにがなんでも非推奨の環境にもツイートボタンを表示したい場合

現在ツイートボタンのサポートは、

Internet Explorer 9+
Chrome 37+
Safari 7+
Firefox 36+
Android Browser 4.4+

となっています。

dev.twitter.com

例えばIE8ではもうデフォルトのツイートボタンは表示されないのですが、デフォルトのツイートボタンの画像と後述するWeb Intentをつかえば一応公式ツイートボタンっぽいものを設置することはできます。どうしても設置したい場合にお試しください。
昔はIE8に対応してあったころのwidgets.jsを保存しておいて、最新ではなくそちらをつかって表示していたこともあったのですが、デザイン変更とともにツイート数が表示されなくなったいまとなってはWeb Intentをつかうのがいちばんでしょう（まあ本当は対応しないのがいちばんなんですが）

---

Web Intentをつかってaタグでツイートボタンをつくる

なかには公式のツイートボタンではなく、オリジナルのデザインでツイートボタンをつくらなければならないケースもあるかと思います。むしろツイートボタンにツイート数が表示されなくなったことによってオリジナルデザインのツイートボタンをつかう機会がますます増えたのではないでしょうか。
そんな時はaタグやwindow.openで実装できてしまう Web intent がとても便利です。

https://twitter.com/intent/tweet

に、

https://twitter.com/intent/tweet?text=text&url=http%3A%2F%2Fkimizuka%2Efm&hashtags=hello&via=ki_230

という感じでいろいろパラメータをくっつけておけばOKです。
パラメータ一覧は こちら 。

dev.twitter.com

ちなみに上記例ではこうなります。

昔は、statusとかshareとかもあったんですが、すべてintentにリダイレクトされるようになったのでintent一択で良いと思います。

kimizuka.hatenablog.com

---

ユーザー名を複数入力したい場合

via=user1%20@user2%20@user3

ツイートボタンのときと同様です。
半角スペース（%20）区切りで2つ目以降は先頭に@をつけましょう

---

推奨ユーザーを複数入力したい場合

related=user1,user2,user3

ツイートボタンのときと同様です。
カンマ区切りで入力しましょう。

---

ハッシュタグを複数入力したい場合

hashtags=hoge,fuga,piyo

ツイートボタンのときと同様です。
カンマ区切りで入力しましょう。

---

フロントのみでツイート数を取得したい場合

昔は count.json たるものがあって、簡単に取得できたのですが、こちら不可能になりました。
ちょっと調べてると簡単にできますよ的な記事がたくさん見つかりますが、実際は count.json が停止しているので注意が必要です。

kimizuka.hatenablog.com

一応、count.json 的なサービスはいくつかあるようですが、僕は試したことはありません。

---

ツイッターウィジェットの設置方法

こちら から作成することができます。（要ログイン）

https://twitter.com/settings/widgets/newtwitter.com

---

ウィジェットの種類とパラメータ

1. ユーザータイムライン
2. いいね
3. リスト
4. 検索
5. コレクション

の5種類から選べます。

パラメータは こちら にまとまっています。

https://dev.twitter.com/ja/web/embedded-timelines/parametersdev.twitter.com

パラメータを渡しまくるとわりとシンプルな感じで実装できます。

kimizuka.hatenablog.com

---

ウィジェットの横幅の最大値（520px）を超えたい場合

例えばウィジェットを画面幅いっぱいで表示したいときなど、JavaScriptでmax-widthを書き換えることによって実装できないこともありません。

kimizuka.hatenablog.com

---

Twitterカードの設定方法

Facebookのタイムライン上での見た目をogpで設定できるように、Twitterのタイムライン上での見た目はTwitterカードで設定できます。

見栄えが全然かわってくるので積極的に設定していきましょう。

公式のこちらのサイト に書いてある通りにmetaタグを書けばPlayerカード以外のカードは簡単に設定できます。
（Playerカードは審査が必要です）
https://dev.twitter.com/ja/cards/overviewdev.twitter.com

---

Twitterカードの種類

1. Summaryカード : デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。
2. 大きな画像付きのSummaryカード : Summaryカードに似ていますが、画像が目立つように使用されています。
3. Photoカード : 写真のみを含めたカードです。
4. Galleryカード : 4つの写真を集めて強調したカードです。
5. Appカード : モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。
6. Playerカード: 動画やオーディオ、スライドショーを視聴できるカードです。（審査が必要です）
7. Productカード : 2015å¹´7月3日に廃止されました。

https://dev.twitter.com/ja/cards/overviewdev.twitter.com

今回はこんなところです。
後半に進むにつれ適当になってきてしまった気がします。Twitterカードについては別途説明する記事を書くかもしれません。