WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

page plugin(facebook埋め込み)をレスポンシブ対応する

      2015/09/01

2015年6月にfacebookをwebサイトに埋め込むには「like box」から「page plugin」に変更になりました。

単純に埋め込むにはこちらからコードを取得し貼り付けるだけでfacebookウィジェットを埋め込むことができます。

一応レスポンシブ対応していますが、仕様としては最初に表示された親ボックスサイズ(180px〜500pxの制限あり)に合わせてレスポンシブに可変されますが動的にウィンドウサイズは変更されません。

このままでもほぼ問題ないと思いますが、どうしてもダイナミックにレスポンシブ対応したい場合のjqueryを使った対応方法をメモ。

スポンサーリンク

 

まずは通常の手順通りコードを埋め込む

下記のように埋め込みたい場所(ここでは<div id=”pageplugin”>ボックス内)に取得したコードを埋め込みます。(javascriptのコードは省略)

<div id="pageplugin">
    <div class="fb-page" data-href=“xxxxxx” data-width="500px" data-height="600" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="true">
        <div class="fb-xfbml-parse-ignore "><blockquote cite="http://www.facebook.com/xxxxxxxx”><a href="http://www.facebook.com/xxxxxxxx”>xxxxxxx</a></blockquote></div>
    </div>
</div>

ここでdata-widthはmax値である500pxを指定しておきます。親ボックスのpagepluginの幅は100%にしておく。

 

jqueryのコードを追加

下記のコードを追加する

<script type="text/javascript">
    $(window).load(function () {
        var htmlStr = $('#pageplugin').html();
        var timer = false;
        $(window).resize(function () {
            if (timer !== false) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                $('#pageplugin').html(htmlStr);
                window.FB.XFBML.parse();
            }, 200);
        });
    });
</script>

ウィンドウのサイズが変わるたびにwindow.FB.XFBML.parse()で再読み込みしています。$(window).resizeはウィンドウサイズ変更中は呼ばれまくるのでタイマを使って呼ばれる頻度を減らします。

window.FB.XFBML.parse();だけで良さそうですがどうやら親ボックスの幅がよまれないようなのでボックスから書き換えます。

これで完了。

 

注意事項

ie8で動作確認したところ$(window).resizeが繰り返し読まれ続ける現象が発生。無限リロード問題という既知の問題っぽい。対応面倒なので<!–[if !(lte IE 8)]><!–>で囲ってie9以上とその他のブラウザでのダイナミックなレスポンシブ対応とすることにしよ。

 

 - その他Tips

  • このエントリーをはてなブックマークに追加

  関連記事

thumbnail_other
GoogleMapへのリンクを住所で貼るときに失敗したこと

ホームページ上からGoogleMap上に指定した住所へリンクを貼った時に軽くトラ …

thumbnail_other
Adobe Bridgeで画像ファイルの名前を一括変換する方法

デジカメの画像データなどファイル名を管理する時、「好きな名前」+「通し番号」を付 …

thumbnail_other
ブラウザ上の画面を範囲を指定してクリップボードにコピー

ブログを投稿するとき、よく画面のコピーをとることがあります。標準機能の「Alt …

thumbnail_other
フォルダ内のファイル一覧をテキストデータに落とす方法

データを納品する際の資料作成時など、ファイルの一覧表を作りたいことがたまーにあり …

thumbnail_other
Google AdSenseを導入してみた

Google AdSenseを導入したので手順のメモ。Google Adsens …

thumbnail_other
クリップボードの履歴を保存できるフリーソフト

「Ctrl+C」 でクリップボードにコピーできるのは通常1つで、1つ前にコピーし …

thumbnail_other
Google Analytics で特定のIPアドレスからのアクセスを除外する

Google Analytics でアクセス解析したいとき、管理者からのアクセス …

thumbnail_other
ネットショップBASE(ベイス)のAPIを使って商品一覧を表示させてみた

簡単に無料でネットショップが開設できるサービス「BASE」。無料ってのがとても魅 …

thum_other
PhotoShopを使って背景の邪魔な物体を簡単に削除する

PhotoShopの初心者の私です。今回、画像に写っている邪魔な物体を削除するの …

thumbnail_other
サイトにFacebookページを埋め込む方法–LikeBoxは廃止。Page Pluginになります–

以前LikeBoxを使った以下の記事を書いたのですが2015/6/23日をもって …