ソーシャルサービスの埋め込みパーツをレスポンシブデザインに対応させる

最近、お仕事で制作しているサイトに外部サービスの埋め込みを依頼されることが増えてきました。スマホサイトやレスポンシブデザインで制作する場合、外部サービスも可変対応させなければなりません。

今まではその都度ググって対応していましたが、毎回探すのも面倒なので自分用の備忘録としてまとめておきます。

目次

• Youtube
• Google Map
• Facebook LikeBox
• Twitterウィジェット

Youtube

<div class="YouTube">
<iframe width="640" height="360" src="//www.youtube.com/embed/OE6TOU-IKJY" frameborder="0" allowfullscreen></iframe>
<!-- / .YouTube--></div>

/* YouTube */
.YouTube  {
	overflow: hidden;
	position: relative;
	/* paddingで高さを出している */
	height: 0;
	padding-top:30px;
	padding-bottom:56.25%;
}
.YouTube iframe,
.YouTube object,
.YouTube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Google Map

<div class="GoogleMap">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6561.674836817844!2d135.84212678927642!3d34.684052573207374!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60013996bd8c6061%3A0xf96cacf357447456!2z5aWI6Imv5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1395204719495" width="600" height="450" frameborder="0" style="border:0"></iframe>
<!-- / .GoogleMap --></div>

/* Google Map */
.GoogleMap {
	overflow: hidden;
	position: relative;
	margin:15px 0;
	/* paddingで高さを出している */
	height: 0;
	padding-bottom: 75%;
}
.GoogleMap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

Facebook LikeBox

<div class="Facebook_LikeBox">
<div class="fb-like-box" data-href="https://www.facebook.com/creatorclip" data-width="600" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div>
<!-- /.Facebook_LikeBox--></div>

/* Facebook Likebox */
.Facebook_LikeBox .fb-comments,
.Facebook_LikeBox .fb_iframe_widget,
.Facebook_LikeBox .fb_iframe_widget[style],
.Facebook_LikeBox .fb_iframe_widget iframe[style],
.Facebook_LikeBox .fbcomments iframe[style],
.Facebook_LikeBox .fb_iframe_widget span {
    width: 100% !important;
}

以前は参考元のそのままのコードを使用しておりましたが、通常のいいね！ボタンと干渉してしまったので別のclassを付けたdivを挟んで、そこだけにwidth:100% !important;を適用しています。

以前はFacebook Commentsもレスポンシブデザインに対応出来たのですが、ソースが変わってしまったのか、このコードを使用してもインラインスタイルを上書きすることが出来なくなってしまいました。

追記：Facebook LikeBoxは2015年6月23日に終了することになりました。現在はPagePluginという新しいウィジェットに移行します。

Twitterウィジェット

<div class="TwitterWidget">
<a class="twitter-timeline" href="https://twitter.com/creatorclip" data-widget-id="413601511122288640" width="960">@creatorclip からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- /.TwitterWidget --></div>

.TwitterWidget #twitter-widget-0 {
	width:100% !important;
}

追記：Twitter側のコードが変更され、CSSでは対応できなくなりました。jQueryで強引に幅100%に変更する方法を新たに書きました。

• 【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す | Creator Clip

コードを自動生成してくれるツールもあります

CSSとか設定するのも面倒な方にはこちらがおすすめです。

embedresponsively.com

該当するサービスのURLを貼り付けるだけでレスポンシブ対応のコードに書き換えてくれるので、あとは貼り付けるだけです。