2017/06/04

Twitterツイートをブログやサイトに埋め込んで紹介する方法

記事内でYouTubeやインスタグラムと同じようにtwitterのツイートを埋め込んで紹介する方法を調べました。twitterツイートで紹介されている画像や30秒動画を紹介したいときに便利です。

HTMLコードの取得

記事内(サイト)に表示したいツイートのHTMLコードを取得します。取得方法はツイートの・・・部分をクリック。

表示されたメニューからこのツイートをサイトに埋め込むをクリックするとHTMLコードを取得することができます。

twitter

メディアの選択

ツイートに表示されている画像・動画を含む埋め込みツイートにするか選択できます。

twitter

埋め込んだツイート

埋め込んだツイート表示のカスタマイズ

取得したHTMLコードのblockquoteタグに属性を追加することによって表示をカスタマイズすることができます。

表示位置

デフォルトは左寄せですが中央や右寄せに変更することができます。変更箇所は以下。
中央(align=”center”)

右寄せ(align=”right”)

埋め込みツイートのデフォルト幅は500pxです。

これはコンテンツの幅によってレスポンシブに変化します。

最大表示を500pxより小さく表示したい場合、変更することが可能です。

幅を200pxに指定(width=”200px”)

リンク色

埋め込んだツイートのリンク色を指定できます。デフォルトはテーマカラーの水色です。
リンク色:赤

埋め込みツイートのリンク色を統一するには

複数の埋め込みツイートのリンク色を統一して変更したい場合にはmetaタグで指定します。

まとめ

twitterツイートでしか紹介できない画像や30秒動画を紹介したいときに役立ちます。少しカスタマイズする機能も提供されていますが基本デフォルトのコピペで十分だと思いました。

以下にTwitter Developersのリンクを明示しておきました。

興味のある方はどうぞ。

参考:埋め込みツイート | Twitter Developers

(Visited 404 times, 1 visits today)