Wordpress/Resposive/Facebook/埋め込み
ちょっただけ苦戦したので
ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook
とりあえずここでコードを取得しましょう。
んで、
www.tam-tam.co.jp
ここを参考にして、jsファイルを作成します。
僕の場合はjsファイルを
jQuery(function () { var windowWidth = jQuery(window).width(); var htmlStr = jQuery('#pageplugin').html(); var timer = null; jQuery(window).on('resize',function() { var resizedWidth = jQuery(window).width(); if(windowWidth != resizedWidth && resizedWidth < 400) { clearTimeout(timer); timer = setTimeout(function() { jQuery('#pageplugin').html(htmlStr); window.FB.XFBML.parse(); var windowWidth = jQuery(window).width(); }, 500); } }); }); var fb_initialize = 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/sdk???&version=???"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk');
こんな感じにしました。
注意としては
wordpressだと「$」は使えないです。
下のやつは「コードを取得」で出てくる上のやつをコピーして関数部分だけ持ってきてください。
これを使わないと
window.FB.XFBML.parse();
でエラーが出ます。
んでhtml、載せたいところに
<div id="page-plugin"> <body onload="fb_initialize();"> <div class="fb-page" data-href="https://www.facebook.com/???" data-tabs="timeline" data-width="400" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/???" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/???">正義の味方カイバーマン</a></blockquote></div> </div> </div>
cssは.fb_iframe_widget spanを消しました。これで中央寄せが効きます。
.fb_iframe_widget, .fb_iframe_widget iframe[style]{ width: 100% !important; }
div内にbody = onloadを書くのがよいのかわからなかったけど、これで動きました。
functions.phpでの読み込みは毎度おなじみですが
wp_enqueue_script( 'fb', get_bloginfo( 'stylesheet_directory') . '/js/your-filename.js', array( 'jquery' ), fasle, true );
上のサイトで間に合う人はぶっちゃけこれ冗長な説明だよねw