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

2019/06/23

テクノロジー プログラミング

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

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

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ