Twitterのツイートをブログに埋め込む方法

Twitterのツイートをブログに埋め込む方法

Posted at March 16,2012 1:55 AM
Tag:[Twitter]

すでにご存知の方も多いと思いますが、Twitter公式サイトの機能を利用して、ブログやウェブサイトにTwitterのツイートを埋め込む方法を紹介します。

1.サンプル

こんな感じで表示されます(スクリーンショットではありません)。返信・リツイート・お気に入り登録なども行えるので便利です。

上記のコードは次のようになっています(便宜上改行しています)。

<blockquote class="twitter-tweet" lang="ja">
  <p>「8.8.8.8,8.8.4.4」より速い「129.250.35.250」
    (<a href="http://t.co/sTR0sMaq"
        title="http://bit.ly/pbVRGH">bit.ly/pbVRGH</a>)
  </p>
&mdash; Yujiro Arakiさん (@yujiro) 
  <a href="https://twitter.com/yujiro/status/114776126781534208" 
     data-datetime="2011-09-16T19:02:15+00:00">9月 16, 2011</a>
</blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

2.埋め込む方法

貼り付けたいツイートをクリック。右上に「開く」のリンクがありますが、どこをクリックしても開きます。

ツイート

「詳細」をクリック。

ツイート

「このツイートをサイトに埋め込む」をクリック。

ツイート

サイトに埋め込むコードが表示されるので、コピーすればOKです。「配置」はサイトに埋め込む位置を決めるときに使います。一番下にプレビューが表示されますが、配置は反映されません。左・右を選ぶと幅350pxになるようです。

コードを表示

「ショートコード」タブをクリックすればショートコードを取得できます。

ショートコード

「リンク」タブをクリックすればリンクを取得できます。

リンク

3.配置を選択したときのコードサンプル

配置を選択したときのコードの変更部分を掲載しておきます。左・右を選んだときの幅は後で書き換えれば変更できそうです。

HTML:なし

<blockquote class="twitter-tweet" lang="ja">~略~

HTML:左

<blockquote class="twitter-tweet tw-align-left" width="350" lang="ja">~略~

HTML:右

<blockquote class="twitter-tweet tw-align-right" width="350" lang="ja">~略~

HTML:センター

<blockquote class="twitter-tweet tw-align-center" lang="ja">~略~

ショートコード:なし

[tweet https://twitter.com/ユーザー名/status/ステータスID lang='ja']

ショートコード:左

[tweet https://twitter.com/ユーザー名/status/ステータスID align='left' width='350' lang='ja']

ショートコード:右

[tweet https://twitter.com/ユーザー名/status/ステータスID align='right' width='350' lang='ja']

ショートコード:センター

[tweet https://twitter.com/ユーザー名/status/ステータスID align='center' lang='ja']

4.配置サンプル

配置で左・右・センターを選んだときの表示を掲載しておきます。

左を選んだとき

右を選んだとき
センターを選んだとき

左・右を選ぶと、一番外側の要素に対し「float:left!important」または「float:right!important」が設定されるので、文字が回りこむ場合があります。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)