![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYkVLnDwpYnKccCxVM-J-3UNcxBWqnZ3BRD_kx61xivR7xrAotvwVJidB71D1au0GgPoLlaQmZ19JY_R4wWuhrXVnjTfiRH0PxLgYXtfHQAieNaQYqh_b45We4JSxjj6o2A3DusjDLJbRO-cDH6tyGeGMCVP7X53LfhpOugXu83yqFOK5_yi6l7QWb/s1600-rw/smartphone-586944_1280.jpg)
ホームページ制作をしていると、SNSを活用して情報アウトプットをしている方は自分のSNSタイムラインをホームページでも表示して欲しいと依頼されます。
確かにホームページは会社ページで、SNSの更新をホームページでもお知らせしているような運用をしているページを見かけますが、タイムラインをそのまま載せておけばいいだけなのに、二度手間ですよね。
Twitterのタイムライン表示は極めて簡単
やるべきことは2つで、タイムライン用のembedタグを取得して、ホームページに追記するだけです。
ただし、表示サイズや、見た目のコントロールなどは、独自に行う必要がありますが、単純に表示するだけであれば、とても簡単にできます。
embedタグの取得
https://publish.twitter.com/
twitterの提供しているpublishツールですが、ここに表示させたいタイムラインのURLを入力すると、その場でembedタグが発行されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvJrxSi-qAl9s-6ZHKnbmFVNFsg0OlvDOz22pIagKr4QvI4ycSIz5P1Z6ncgXCjA2-nCT4z68YYDcMy0ZRP7ix0hB1mSF5e8s1jYhN64zsRtGTsxpLJNwv9vYxyUazRNgmC-BfDWt1GptEcFxaolgr2aTxPTvuQmhRMbDGFt7b9vB0VhJr4zpVYgs/s1600-rw/23-1-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2019-06-16-9.10.56.jpg)
アクセスして表示されているフォームにURLを登録します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsvQeKnvwJn8Ou_KcpPu9iWQB4zs94nUxpgD_yp09X5KZeLezeBX_EAHg4J4YbIsOGenebLeI5dWpqsx_vVpJ8nndrY0m769G8hcCdnIlhb0EiERdAQ29j4Lz2ynN00ng8LgaVW3c7lrsQTwa82p-6wnUxfyP6JNHFZRfik3ccg6CmO_laQnRNwIml/s1600-rw/23-2-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2019-06-16-9.12.56.jpg)
"Embeded Timeline"をクリックします。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpQXhTmg2s5b5u5pbt4XQNaZ-TF0V7ldktm4AAvMxrf4GQ-QpyyOAOqf8hqc8YF26jP3P053y8lUeFj5LlQPgFox66ElEVjry65d3eCqQSU16ag9YqVWoWoQHC74VhtK44gtUCHlo-AGnRfObr2bfo2qLspKpIC7ixyUsIeDdTO36gRqLy3pw1CpQ/s1600-rw/23-3-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2019-06-16-9.14.07.jpg)
タグが表示されるので、"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
0 件のコメント:
コメントを投稿