Facebook LikeBox
以下のような「いいね」ボックスですが、これをレスポンシブ対応にします
<html>
<div class=“ fb_reset” id=“fb-root”><div style=“position: absolute; top: -10000px; height: 0px; width: 0px;”><div><iframe src=“http://static.ak.facebook.com/connect/xd_arbiter/dgdTycPTSRj.js?version=41#channel=f2d26894c080a78&origin=http%3A%2F%2Fwebcache.googleusercontent.com” style=“border: medium none;” tabindex=“-1” title=“Facebook Cross Domain Communication Frame” aria-hidden=“true” id=“fb_xdm_frame_http” scrolling=“no” allowtransparency=“true” name=“fb_xdm_frame_http” frameborder=“0”></iframe><iframe src=“https://s-static.ak.facebook.com/connect/xd_arbiter/dgdTycPTSRj.js?version=41#channel=f2d26894c080a78&origin=http%3A%2F%2Fwebcache.googleusercontent.com” style=“border: medium none;” tabindex=“-1” title=“Facebook Cross Domain Communication Frame” aria-hidden=“true” id=“fb_xdm_frame_https” scrolling=“no” allowtransparency=“true” name=“fb_xdm_frame_https” frameborder=“0”></iframe></div></div><div style=“position: absolute; top: -10000px; height: 0px; width: 0px;”><div></div></div></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div fb-iframe-plugin-query=“app_id=&color_scheme=light&header=true&href=https%3A%2F%2Fwww.facebook.com%2Frookiesaas&locale=ja_JP&sdk=joey&show_border=true&show_faces=true&stream=false” fb-xfbml-state=“rendered” class=“fb-like-box fb_iframe_widget” data-href=“https://www.facebook.com/rookiesaas” data-colorscheme=“light” data-show-faces=“true” data-header=“true” data-stream=“false” data-show-border=“true”><span style=“vertical-align: bottom; width: 300px; height: 271px;”><iframe class=“” src=“http://www.facebook.com/plugins/like_box.php?app_id=&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D41%23cb%3Df3c95f22c742a86%26domain%3Dwebcache.googleusercontent.com%26origin%3Dhttp%253A%252F%252Fwebcache.googleusercontent.com%252Ff2d26894c080a78%26relation%3Dparent.parent&color_scheme=light&header=true&href=https%3A%2F%2Fwww.facebook.com%2Frookiesaas&locale=ja_JP&sdk=joey&show_border=true&show_faces=true&stream=false” style=“border: medium none; visibility: visible; width: 300px; height: 271px;” title=“fb:like_box Facebook Social Plugin” scrolling=“no” allowtransparency=“true” name=“fa8f0905fcaaa4” frameborder=“0” height=“1000px” width=“1000px”></iframe></span></div>
<p></p>
</html>
方法
LikeBoxのコードはこちらで取得します。
Widthは指定しません
種類は「HTML5」
そしてCSSで以下の指定をします
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important;}