ツイッターのタイムラインをブログなどに設置する方法

2023/07/03

HOW TO系 twitter(ツイッター) インターネット周辺の話題

t f B! P L
ブログやホームページなどに、twitterのタイムラインを設置する方法に関するメモを残しておきます。





たとえば、https://twitter.com/koipira_tw(@koipira_tw)のツイッターのタイムラインを埋め込みたい場合、以下のコードを書き込む。

<a class="twitter-timeline" href="https://twitter.com/koipira_tw?ref_src=twsrc%5Etfw">Tweets by koipira_tw</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

赤文字の部分を別のアカウントに変更することで、自分が表示させたいアカウントのタイムラインを表示することが可能です。

縦横のサイズを指定するタグで上記のコードを囲むことで、縦スクロールが発生するようになり、以下のような表示になります。

たとえば、横幅をその場所の要素全体の50%(今回の場合はブログ記事部分の幅の50%)に指定、高さは300pxに指定し、はみ出した部分はスクロールで表示する場合は、以下の青字のようなタグになります。

<div style="width:50%; height: 300px; overflow-y: scroll;">
<a class="twitter-timeline" href="https://twitter.com/koipira_tw?ref_src=twsrc%5Etfw">Tweets by koipira_tw</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

以下のように表示されます。



ツイッターのサイドバーなどに設置する場合は、横幅の指定はしなくてよいケースが多いかもしれません。(指定しなければ、100%、横幅いっぱいになります)

QooQ