「ツイートボタンから画像付きツイートをツイートさせる方法 - 画像を利用した効率的なSNS拡散を目指して」 "Twitterタイムラインで画像付きシェアをさせる方法" を考えるスライドです。OGP、Twitter Cardの解説から、画像URLを動的に取得しTweetボタンに適用させるまで簡単に解説しています。

1. ツイートボタンから
画像付きツイートを
ツイートさせる方法
akirafukuoka
www.akirafukuoka.com / FICC inc. / RAW-Fi / 2014.05.26
画像を利用した効率的なSNS拡散を目指して

2. シェアボタン経由の
シェア内容を目立たせよう
SNSでのシェアはネットでの情報流通を大きく変えた。
近年コンテンツの流布だけを目的としたバイラルメディアの登場など、
シェアの連鎖的な拡散を目的とするケースがさらに増えている。
気を惹く釣りタイトルや、ハッシュタグをうまく使うことはもちろんのこと
画像を使い、シェアしたURLの注目度を高める必要も出てきた。

3. Facebookは
OGPがあるからいいよね
今更言うまでもなくFacebookでURLをシェアする場合、
指定のURL先のHTMLに記述されているOGPを読み込み
シェア投稿時に情報を付加して表示してくれる。

4. <meta property="og:title" content="世にも珍しいアニメーションGIFを撮影できるカメラ「OTTO」..." />
<meta property="og:site_name" content="RAW-Fi" />
<meta property="og:type" content="article" />
<meta content="https://www.facebook.com/rawfi" property="article:publisher" />
<meta property="og:description" content="カメラを「構えて取るモノ」から解放しよう。..." />
<meta property="og:url" content="http://raw-fi.com/posts/166" />
<meta property="og:image" content="http://s3-ap-northeast-1.amazonaws.com/.../otto_0.jpg" />
1
2
3
4
5
6
7
HTML
Facebook
⬇
og:imageに指定した
画像を自動的に表示

5. Facebook、
有能。
仕様が度々変わるが、現状（2014/05現在）は
1.91:1の比率の画像を指定すればよい。
またテキストなど重要な要素は中心へ寄せておくと吉。
http://ogimage.tsmallfield.com/
OGP画像シミュレータ ¦ og:image Simulator

6. Twitterには
Twitter Cardがある
OGPと同じようにTwitter Card表示用のタグをHTMLに埋め込めば
Twitterのツイートでも画像の表示が可能。
ただしTwitter Developerサイトで
サイトを事前に登録しておく必要がある。
Twitter Cards利用申請 - Qiita
http://qiita.com/ogawatti/items/a1d71226bfdc6ff66008

7. Twitter
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@raw_fi" />
<meta name="twitter:url" content="http://raw-fi.com/posts/166" />
<meta name="twitter:title" content="世にも珍しいアニメーションGIFを撮影できるカメラ「OTTO」..." />
<meta name="twitter:description" content="カメラを「構えて取るモノ」から解放しよう。..." />
<meta name="twitter:image" content="http://s3-ap-northeast-1.amazonaws.com/.../otto_0.jpg" />
1
2
3
4
5
6
HTML
⬇
サイトをTwitter Card申請すれば
ツイートに画像が表示される
（PC・SPアプリ共通）

8. しかし
Twitter Cardで指定した画像は
タイムラインでは表示されない
ここまで苦労して表示させたTwitter Cardの画像は
Twitterのタイムラインでは表示されない。（2014/05現在）

9. ツイート個別表示 タイムライン
画像が、ない。

10. ツイート個別表示 タイムライン
画像が、ない。

11. タイムライン上で
人の注目を集めなければ
拡散の可能性は上がりにくい

12. Twitterタイムライン上で
画像が表示される条件は
・画像を添付して投稿
・既にTwitterにアップロードされている画像のURLを本文に挿入

13. 残念ながら、
わざわざ画像を添付して
拡散してくれる人はいない。
画像URLを
本文に追記するしかない。

14. Twitterの画像URLとは
・pic.twitter.com/xxxxx
・https://twitter.com/[screenname]/status/xxxxxxxx/photo/1
のいずれか。
どちらをツイートに含めても画像がタイムラインに表示される。

15. ツイートボタンに
画像URLを含めるフロー

16. 画像を添付してツイート
アカウントは何でもいいが写真のURLから れることに注意
画像URLをツイートから取得
ツイートボタンの貼付けコードに画像URLを記述
⬇
⬇
pic.twitter.com/xxxxx だけでOK

17. <a href="https://twitter.com/share"
class="twitter-share-button"
data-text= NFCだから電池不要、貼り付けるだけでスマホに物理ボタンを追加する「Dimple」
http://raw-fi.com/posts/152 pic.twitter.com/jvWCriOLmV"
>Tweet</a>
1
2
3
!
4
!
HTML
Tweet内容
⬇
画像URLがツイート
本文に挿入された

18. PCタイムライン SPアプリタイムライン
画像表示は、あります。

19. CMSでこのフローを
自動化することも可能
RAW-Fi (raw-fi.com)ではエントリーの投稿から、
公式アカウントでの自動ツイート、ツイート結果から
画像URLを取得しDBに格納するまで自動化。

20. エントリー公開
⬇
システムがAPI経由で自動ツイート
ツイート結果から画像URLを取得、DBに格納
result.attr[:entities][:media][0][:display_url]を参照
ビューのTweetボタンのコードに画像URLを挿入
⬇
⬇

21. ただし、
このスライドが通用する期間は
Twitterが仕様を変更するまで
執筆時（2014年5月）時点の情報です。
例えばAPIから複数画像投稿対応などはまだ未実装（のはず）。
Twitterからのアナウンスに注意しましょう。

22. 参考リンク
Twitter Cardsの申請をしてみたよというお話。 ¦ okaoka.net
http://okaoka.net/2013/02/23/twitter-card.html
FacebookのOGP画像に顔が入っている場合のトリミング位置
http://snowadays.jp/2014/03/2629
Twitterヘルプセンター ¦ Twitterで画像を投稿する
https://support.twitter.com/articles/20169198-twitter