Facebook Page Plugin をスマートフォン閲覧時に画面を回転させても横幅(width)を最適化する方法

author :

facebook_page_plugin_2

Facebook Like Box は2015年6月23日で終了するとアナウンスしていますが、見れているところもあれば見られなくなっているところもあるようです。

https://developers.facebook.com/docs/plugins/like-box-for-pages

Facebook Page Plugin

https://developers.facebook.com/docs/plugins/page-plugin

しかし、見られているウィジェットも、仕様がころころかわる会社Facebookなので、いつ何時見れなくるなるかわかりませんので(ないと思いますが)、気づいたら「Page Plugin」に切り替えましょう!

しかし、この「Page Plugin」は大きな問題点があります!!

横幅(width)が最大 500pxまでなのです。それ以上は大きくなりません(不便すぎるので仕様変更があるかもしれません?)。
Like Boxは横幅に上限はなかったと思うのですが。

最近流行りの1カラムサイトは、500pxでは間が持ちません。

column_1

そこで、横にtwitterや、最新記事リストなど、を配置しているサイト多いと思います。

facebook_p

レスポンシブデザインなど、自動で最適化してくれる

この「Page Plugin」はページを読み込んだときに、「Page Plugin」が表示される横幅を一度計測して、それからはみ出ないようにしています。なので、レスポンシブデザインのサイトでも何もしないでもいい感じに表示されます。

しかし!!

スマートフォンは閲覧者が自由に縦横が変えられますよね!僕のiPhoneは変えられます。そう、iPhoneならね。
聞いた話によるとAndroidもできるみたいです。そう、…。

このようにサイトを表示した後に縦横を変更すると。

読み込み時縦向き 読み込み時横向き
facebook_1小さい facebook_2大きくはみ出る

いろいろ調べた結果どうやら、最初に読み込んだ時点で Facebook Page Plugin を表示するコンテンツの横幅(width)を測ってそれが500px以上なら500pxに、以下なら横幅と同じ幅に自動で表示しているみたいです。

極端な話、スマートフォンの画面を回転させた時点でページの再読み込み処理を走らせるのが一番簡単なのですが、wifi 環境以外だと読み込み速度が遅いのでストレスを感じてしまいます。

そこで、jQuery で Facebook Page Plugin だけ再読み込みするソースコードを書きましたので、ご確認ください。

間違いなどありましたらコメントください!よろしくお願いします!

$(function(){

	$(window).on("orientationchange",function(){
		var url = encodeURIComponent("https://www.facebook.com/canamen.net"); //FacebookページURL
		var show_facepile = "true" ;
		var show_posts = "true" ;
		setTimeout(function(){
		var w = $(window).width();
		var h = 400;
		var src = $(".fb-page iframe").attr("src");
		$(".fb-page iframe").attr("src","");
		$(".fb-page iframe").attr("src","http://www.facebook.com/v2.3/plugins/page.php?app_id=&width="+w+"&height="+h+"&href="+url+"&locale=ja_JP&show_facepile="+show_facepile+"&show_posts="+show_posts+"");
		},100);
	});

});

デモページ(スマートフォンでご確認ください)

https://canamen.co.jp/facebook_page_plugin.php

解説

	$(window).on("orientationchange",function(){

orientationchange は jQuery のスマートフォン画面の回転イベントです。
スマートフォン画面を回転するたびにイベントが処理されます。

		var url = encodeURIComponent("https://www.facebook.com/canamen.net"); //FacebookページURL
		var show_facepile = "true" ;
		var show_posts = "true" ;

表示したい Facebook ページURLに変更してください。show_facepile と show_posts はオプションです。こちらでご確認ください。

		setTimeout(function(){

ここが大事です!
setTimeout でちょっと送らせて処理を走らせないと、きちんと横幅を読みにいきません。
たぶん、スマートフォンの向きを変えたときに、「回転しているぞ」というアクションがあってから画面が切り替わるので、そのタイミングをずらす必要があるからだと思います。

		var w = $(window).width();
		var h = 400;

ここでは、横幅を測って、表示する Facebook Page Plugin のサイズを決めています。

		var src = $(".fb-page iframe").attr("src");
		$(".fb-page iframe").attr("src","");
		$(".fb-page iframe").attr("src","http://www.facebook.com/v2.3/plugins/page.php?app_id=&width="+w+"&height="+h+"&href="+url+"&locale=ja_JP&show_facepile="+show_facepile+"&show_posts="+show_posts+"");
		},100);
	});

横幅を計測してから Facebook Page Plugin 部分を再度読み込んでいます。

デモページ閲覧中にスマートフォンを回転させたら、「いいね!」してくださっているユーザー画像が変わりますよね。それは、 Facebook Page Plugin だけを再読み込みしているからです。

え!「いいね!」している人が少なくて分かりづらいって!
じゃあ、押してくださいよ!「いいね!」ほら、押して!

(切実)お願いしますー。

実際には、パソコン版では、横に別のウィジェットがあったりして、もっと jQuery やら css やら、いろいろ書き込まないといけませんが。
考え方としてご参考にしてみてください!

Categories: web

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

このエントリーをはてなブックマークに追加
LINEで送る

株式会社 カナメン( canamen, Inc. )は鹿児島で、ホームページ制作を行っています。デザインからコーディング(プログラミング)、アクセス解析まで幅広いスキルでお客様をサポートしています。

2014年1月
個人事業主「canamen.net(カナメンドットネット)」として開業

2015年9月
Google アナリティクス個人認定資格(GAIQ)取得

2016年11月
株式会社 カナメン として法人化

株式会社 カナメン

〒892-0815
鹿児島市易居町1-2 ソーホーかごしま 18号室

代表取締役 冨永 要

tel : 090-6986-9718

mail : info★canamen.co.jp(★を@に)

制作実績
(ホームページ・ポスターなど)

  • twitter
  • facebook
  • google plus
  • flickr
SKILL
  • 企画
  • ディレクション
  • デザイン
  • wordpress
  • JavaScript実装
  • プログラミング
  • 更新作業
  • アクセス解析
  • webマーケティング
  • webコンサルティング
  • ロゴ作成
  • ポスターデザイン
  • 写真撮影
  • イラスト
  • スマホ対応

株式会社 カナメン についてもっと見る

最新記事

  1. スタッフを募集します。

人気の記事ランキング

まだデータがありません。

すべての記事を見る

株式会社 カナメン の web サービス

まとめ検索 - koko-search

koko-search

まとめてここから検索。気になることを忘れさせません。まとめ検索 web サービス。【ここサーチ】からすぐに、検索できたりします。

koko-searchをやってみる!
memosns -メモエスエヌエス-

memosns -メモエスエヌエス-

メモを残すウェブサービス。ウェブ上に自分だけのメモを、さらに、ユーザー同士でメモでコミュニケーションも。メモ・ソーシャル・ウェブサービス

memosns をやってみる!
閉じる