Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ツイートボタンから画像付きツイートをツイートさせる方法

64,590 views

Published on

「ツイートボタンから画像付きツイートをツイートさせる方法 - 画像を利用した効率的なSNS拡散を目指して」

"Twitterタイムラインで画像付きシェアをさせる方法" を考えるスライドです。OGP、Twitter Cardの解説から、画像URLを動的に取得しTweetボタンに適用させるまで簡単に解説しています。

Published in: Internet
  • Be the first to comment

ツイートボタンから画像付きツイートをツイートさせる方法

  1. 1. ツイートボタンから 画像付きツイートを ツイートさせる方法 akirafukuoka www.akirafukuoka.com / FICC inc. / RAW-Fi / 2014.05.26 画像を利用した効率的なSNS拡散を目指して
  2. 2. シェアボタン経由の シェア内容を目立たせよう SNSでのシェアはネットでの情報流通を大きく変えた。 近年コンテンツの流布だけを目的としたバイラルメディアの登場など、 シェアの連鎖的な拡散を目的とするケースがさらに増えている。 気を惹く釣りタイトルや、ハッシュタグをうまく使うことはもちろんのこと 画像を使い、シェアしたURLの注目度を高める必要も出てきた。
  3. 3. Facebookは OGPがあるからいいよね 今更言うまでもなくFacebookでURLをシェアする場合、 指定のURL先のHTMLに記述されているOGPを読み込み シェア投稿時に情報を付加して表示してくれる。
  4. 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. 5. Facebook、 有能。 仕様が度々変わるが、現状(2014/05現在)は 1.91:1の比率の画像を指定すればよい。 またテキストなど重要な要素は中心へ寄せておくと吉。 http://ogimage.tsmallfield.com/ OGP画像シミュレータ ¦ og:image Simulator
  6. 6. Twitterには Twitter Cardがある OGPと同じようにTwitter Card表示用のタグをHTMLに埋め込めば Twitterのツイートでも画像の表示が可能。 ただしTwitter Developerサイトで サイトを事前に登録しておく必要がある。 Twitter Cards利用申請 - Qiita http://qiita.com/ogawatti/items/a1d71226bfdc6ff66008
  7. 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. 8. しかし Twitter Cardで指定した画像は タイムラインでは表示されない ここまで苦労して表示させたTwitter Cardの画像は Twitterのタイムラインでは表示されない。(2014/05現在)
  9. 9. ツイート個別表示 タイムライン 画像が、ない。
  10. 10. ツイート個別表示 タイムライン 画像が、ない。
  11. 11. タイムライン上で 人の注目を集めなければ 拡散の可能性は上がりにくい
  12. 12. Twitterタイムライン上で 画像が表示される条件は ・画像を添付して投稿 ・既にTwitterにアップロードされている画像のURLを本文に挿入
  13. 13. 残念ながら、 わざわざ画像を添付して 拡散してくれる人はいない。 画像URLを 本文に追記するしかない。
  14. 14. Twitterの画像URLとは ・pic.twitter.com/xxxxx ・https://twitter.com/[screenname]/status/xxxxxxxx/photo/1  のいずれか。  どちらをツイートに含めても画像がタイムラインに表示される。
  15. 15. ツイートボタンに 画像URLを含めるフロー
  16. 16. 画像を添付してツイート アカウントは何でもいいが写真のURLから れることに注意 画像URLをツイートから取得 ツイートボタンの貼付けコードに画像URLを記述 ⬇ ⬇ pic.twitter.com/xxxxx だけでOK
  17. 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. 18. PCタイムライン SPアプリタイムライン 画像表示は、あります。
  19. 19. CMSでこのフローを 自動化することも可能 RAW-Fi (raw-fi.com)ではエントリーの投稿から、 公式アカウントでの自動ツイート、ツイート結果から 画像URLを取得しDBに格納するまで自動化。
  20. 20. エントリー公開 ⬇ システムがAPI経由で自動ツイート ツイート結果から画像URLを取得、DBに格納 result.attr[:entities][:media][0][:display_url]を参照 ビューのTweetボタンのコードに画像URLを挿入 ⬇ ⬇
  21. 21. ただし、 このスライドが通用する期間は Twitterが仕様を変更するまで 執筆時(2014年5月)時点の情報です。 例えばAPIから複数画像投稿対応などはまだ未実装(のはず)。 Twitterからのアナウンスに注意しましょう。
  22. 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

×