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 );

上のサイトで間に合う人はぶっちゃけこれ冗長な説明だよねｗ