及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Twitter > Twitter のツイート1件をウェブページに埋め込む

Twitter のツイート1件をウェブページに埋め込む

Twitter の好きなツイート1件を自分のウェブサイトのページに埋め込むことができる。
表示例↓

手順

  1. Tiwtter のタイムラインを表示する。
  2. ウェブサイトに埋め込みたいツイートをマウスオーバー。
    →右下の方に[・・・その他]と表示されるので[・・・その他]をクリック
    →[サイトにツイートを埋め込む]クリック
  3. 埋め込むコードと、プレビューが表示される。
    コードをコピーし、ご自分のウェブサイトの埋め込みたい個所にそのコードをペーストする。
  4. 表示されるツイートの横幅は、<blockquote>タグにwidth属性を設定すれば横幅のサイズを指定できる。
    たとえば、width ="350" と入力すれば横幅は350pxとなる。

    【サンプルコード】
    1行目の <blockquote> タグに width ="350" を追加。 
    <blockquote class="twitter-tweet" width="350">

    「立川のマンションII」
写真を沢山掲載しましたので、よろしければご覧ください！ 
http://t.co/tcFrkvPKP4
    
— ホームページ制作担当 (@hp_design_web) 
June 25, 2013
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

    【上記のコードのプレビュー】
    横幅が350pxになる。
  5. 位置は、<blockquote> の class で指定する。
    • 左（float:left;）にする場合classに「tw-align-left」を追加する。
      class="twitter-tweet tw-align-left"
    • 右（float:right;）にする場合classに「tw-align-right」を追加する。
      class="twitter-tweet tw-align-right"
    • 中央にする場合classに「tw-align-center」を追加する。
      class="twitter-tweet tw-align-center"
    こちら↓のサイトを参考にさせていただきました。小粋空間様、ありがとうございます。
    Twitterのツイートをブログに埋め込む方法
MENU Ξ