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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ホームページ制作をしていると、SNSを活用して情報アウトプットをしている方は自分のSNSタイムラインをホームページでも表示して欲しいと依頼されます。
 

確かにホームページは会社ページで、SNSの更新をホームページでもお知らせしているような運用をしているページを見かけますが、タイムラインをそのまま載せておけばいいだけなのに、二度手間ですよね。
 

こういう細かな効率を追求するのは非常にいい事なので、僕もいくつか運用しているTwitterアカウントをホームページにタイムライン表示してみました。
 

http://myntinc.com/
 

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

やるべきことは2つで、タイムライン用の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で表示するとこんな感じです。
 


 

「画像/動画を表示」ボタンが気になりますね・・・これってデフォルトで画像表示にすることはできないものかな???

Link

今回のpublish-toolが紹介されているtwitterのヘルプページです。
 

Twitter-HELP
https://help.twitter.com/ja/using-twitter/embed-twitter-feed
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です