Twitterのタイムラインをホームページに表示させるのは超簡単

ホームページ制作をしていると、SNSを活用して情報アウトプットをしている方は自分のSNSタイムラインをホームページでも表示して欲しいと依頼されます。 確かにホームページは会社ページで、SNSの更新をホームページでもお知らせしているような運用をしているページを見かけますが、タイムラインをそのまま載せておけばいいだけなのに、二度手間ですよね。

Twitterのタイムライン表示は極めて簡単

やるべきことは２つで、タイムライン用のembedタグを取得して、ホームページに追記するだけです。 ただし、表示サイズや、見た目のコントロールなどは、独自に行う必要がありますが、単純に表示するだけであれば、とても簡単にできます。

embedタグの取得

https://publish.twitter.com/ twitterの提供しているpublishツールですが、ここに表示させたいタイムラインのURLを入力すると、その場でembedタグが発行されます。 アクセスして表示されているフォームにURLを登録します。 "Embeded Timeline"をクリックします。 タグが表示されるので、"Code Copy"を押すとクリップボードにコピーされます。 "set customization options."をクリックすると、表示サイズやカラーなどを選択できますが、cssでコントロールした方がよさそうです。

タグの貼り付け

ホームページの表示させたい部分にEmdedタグを貼り付けるだけなのですが、オプションセットをしない場合は、画面表示領域が"width:100%"になります。 画像を表示するようなタイムラインの場合は、思いの外大きく表示されてしまうので、width値をセットしてあげるのがいいでしょう。 レスポンシブ設定をする場合は、それぞれのサイズに応じたベスト表示サイズを見極めてください。 ちなみに、全てのデバイスで使えるサイズの300 x 400で表示するとこんな感じです。 Tweets by ideacompo 「画像/動画を表示」ボタンが気になりますね・・・これってデフォルトで画像表示にすることはできないものかな？？？

Link

今回のpublish-toolが紹介されているtwitterのヘルプページです。 Twitter-HELP https://help.twitter.com/ja/using-twitter/embed-twitter-feed