埋め込みツイート（twitterウィジェット） [HTML]

2016/08に公開

Twitter社が提供しているウィジェットを使って、ツイートを埋め込む方法です。
コードをコピペするだけで設置できます。jsやcssの知識はとくに必要ないです。

sample

ご自分で設置するときはローカル環境では表示しないので、サーバにアップして確認してください。

Twitter社はIE8以前のサポートをしていないので、IEは9以降でないと埋め込みツイートが表示されません（2016/08現在）。

html

<blockquote class="twitter-tweet" data-lang="ja" align="center"><p lang="und" dir="ltr"><a href="https://t.co/1qE9a545Vn">https://t.co/1qE9a545Vn</a> <a href="https://t.co/ISVUcgUM8Z">pic.twitter.com/ISVUcgUM8Z</a></p>— ZuttoCat (@ZuttoCat) <a href="https://twitter.com/ZuttoCat/status/763208336615444480">2016年8月10日</a></blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

一応、サンプルで使用したコードを貼り付けてみましたが、これをコピペしてURLなどを書き換えるより、実際のツイートからコピペした方が早いです。

  1. twitterページや埋め込みタイムラインなどから埋め込みたいツイートをみつけ、･･･（その他）をクリック
  2. 「ツイートをサイトに埋め込む」を選択
  3. 表示されたコードをコピペ
  • スマートフォンなど、幅が狭い画面では自動で幅が調整されます（iOSなど一部で調整されないとかなんとかの噂あり・・・2016/06現在）。
  • ツイートからコピペしただけだと、親タグのエリアで左寄せで表示されるので、中央に表示させたい場合はblockquoteタグにalign="center"を追加してください。表示のカスタマイズ方法も提供元サイトに説明されています。
  • コードが表示されたときに「メディアを含める」のチェックを外すと、blockquoteタグにdata-cards="hidden"が挿入され、ツイートに含まれる画像や動画などが非表示になります。
戻る

Top