ヘイ!ブロガーさん書いておきなよこのコード!ツイート貼付けのスマホ対応

このツイートをサイトに埋め込む
ツイートの貼り付けって便利になりましたよね!

スマホ未対応だったんだ??

先日はじめて Twitter 公式の「このツイートをサイトに埋め込む」機能を使ってブログにツイートを貼ってみました!以前は BBP など を使って貼付けていたのですが、公式で対応されたのならそちらを使おうって流れです。

https://twitter.com/actywav/status/222143604599164928

WordPress でも 3.4 から URL だけ貼付ければ表示される様になったので尚更使いたいところです!

Android 標準ブラウザで actyway を表示! Android 標準ブラウザで actyway を表示!

ただ、スマートフォンから見ると要素の幅が広すぎてはみ出してしまっています!困った!(キャプチャは Android 標準ブラウザ)

<blockquote class="twitter-tweet" width="550" lang="ja">
	<p>改めまして! WordPress のプラグイン無しですごく簡単にツイート表示しよー : actyway <a href="http://t.co/rWgzwA3q" title="http://bit.ly/LY1oc9">bit.ly/LY1oc9</a> <a href="https://twitter.com/search/%2523actyway">#actyway</a></p>
	<p>&mdash; actyway.comさん (@actyway) <a href="https://twitter.com/actyway/status/221036065887223809" data-datetime="2012-07-06T00:21:19+00:00">7月 6, 2012</a></p>
</blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

HTML ソースを確認すると、blockquote でツイート本文とか書かれていて、その後に「platform.twitter.com/widgets.js」が読み込まれているみたい。

<div id="twitter-widget-0" class="twitter-tweet-rendered" lang="ja" style=";width:550px!important">
	<div class="twt-border">
		<blockquote data-twt-id="221036065887223809" data-twt-intents="false" data-twt-product="tweetembed" class="twt-o twt-tweet hentry twt-always-show-actions twt-pinned twt-standard">
			<div class="vcard author">
				<a class="screen-name url" href="https://twitter.com/actyway" data-screen-name="actyway"><span class="avatar"><img src="https://si0.twimg.com/profile_images/1796112491/actyway_normal.png" class="photo" alt=""></span><span class="fn">actyway.com</span><span class="nickname">@<b>actyway</b></span></a><iframe class="twt-follow-button" allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?align=right&amp;button=grey&amp;screen_name=actyway&amp;show_count=false&amp;show_screen_name=false&amp;lang=ja"></iframe>
			</div>
			<div class="entry-content">
				<p class="entry-title">改めまして! WordPress のプラグイン無しですごく簡単にツイート表示しよー : actyway <a class="link" href="http://t.co/rWgzwA3q" title="http://bit.ly/LY1oc9">bit.ly/LY1oc9</a> <a class="ht" rel="tag" href="https://twitter.com/search/%23actyway" title="#actyway">#<b>actyway</b></a></p>
			</div>
			<div class="footer">
				<a class="view-details" href="https://twitter.com/actyway/statuses/221036065887223809"><span class="updated " title="7月6 00:21:19 (UTC)"><span class="value-title" title="2012-07-06T00:21:19+0000"></span>2012 7月 6</span></a>
				<ul class="twt-actions">
					<li><a href="https://twitter.com/intent/tweet?in_reply_to=221036065887223809" class="reply-action twt-intent" title="返信"><i></i><b>返信</b></a></li>
					<li><a href="https://twitter.com/intent/retweet?tweet_id=221036065887223809" class=" retweet-action  twt-intent" title="リツイート"><i></i><b>リツイート</b></a></li>
					<li><a href="https://twitter.com/intent/favorite?tweet_id=221036065887223809" class=" favorite-action  twt-intent" title="お気に入りに登録"><i></i><b>お気に入りに登録</b></a></li>
				</ul>
			</div>
		</blockquote>
	</div>
</div>

platform.twitter.com/widgets.js」実行されると、こんな感じで色々追加されています。これでいつもの見た目になってたんですね、てっきり WordPress が一気に全部の HTML ソース吐き出してると思っていました。

platform.twitter.com/widgets.js 読み込み後の HTML ソース

しかも、一番外側の div のスタイルに「!important」が入っています。簡単に CSS で上書きしたら良いと思っていたので、ちょっと悔しいw

WordPress メディア設定 埋め込みファイルの最大サイズ

ちなみに 550px は、メディア設定の埋め込みファイルの最大サイズの幅の値が使われていると思います。

スマートフォンに対応!

方法って複数あると思うのですが、無難に jQuery で書いてみたいと思います!

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
<!--
var ua=navigator.userAgent;
if(ua.indexOf('iPhone')>0||ua.indexOf('Android')>0){
	window.onload=function(){
		if(jQuery('.twitter-tweet-rendered').size()>0){
			jQuery('.twitter-tweet-rendered').each(function(){jQuery(this).css("width","");});
		}
	};
//-->
</script>

肝心のコードはこんな感じです。actyway ではレスポンシブで PC とスマホ共通なので ユーザーエージェントで判別入れています、footer.php に書きました。head タグの中か、閉じ body タグの直前にでも書いてくださーい。
width の値は空が無難かなーと思います。(jQuery 本体は事前に読み込みしておいてください)

Android 標準ブラウザからツイート貼付けの表示

なんかちょっと不格好でかわいくなりましたが収まりましたw

WPtouch も対応してみる!

WPtouch 使われているブログが多いと思うのでついでに!

WPtouch でツイート貼付け表示

WPtouch だとツイート表示部分ははみ出してはいないんですけど、幅がオーバーしている部分は省略されています。

13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
<!--
window.onload=function(){
	if(jQuery('.twitter-tweet-rendered').size()>0){
		jQuery('.twitter-tweet-rendered').each(function(){jQuery(this).css("width","");});
	}
};
//-->
</script>
<?php wptouch_get_stats();

/wp-content/plugins/wptoch/themes/default/footer.php とかに書けば良いと思うのですが、どこがベストなんでしょう?w WPtouch さっぱりです。
footer.php の wptouch_get_stats(); の前の行に書いてみました。

Android 標準ブラウザからツイート貼付けの表示

ヘイ!こちらも不格好!

おまけ

毎日暑いので…

このツイートした人を土に埋め込む

ひぇ〜