TopTwitter > 2012年3月
2012年3月16日

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

March 16,2012 1:55 AM
Tag:[]
Permalink

すでにご存知の方も多いと思いますが、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」が設定されるので、文字が回りこむ場合があります。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3