使FB粉絲專頁外掛RWD

Spread the love

【聲明】本站任何文章都可能有聯盟行銷連結，當你透過文章內的連結購買產品，我可能獲得分潤，這不會增加你任何成本，並且我分享的都是自己實際使用過的資訊，更多細節請點這裡。 Disclosure: Any post on this site may contain affiliate links, meaning I get commission if you decide to make a purchase through my links, at no cost to you.

FB外掛只要有功能，我自己不是很在意寬度問題，不過工作要求就不是這樣一回事了…於是寫了一段jQuery，總之就是在視窗變動時計算FB外掛外層容器寬度，把整段HTML替換掉

<!--RWD重新載入BEGIN 受FB本身限制，寬度180-500px之間才能正常作用--><script type="text/javascript">
jQuery( window ).resize(function() {
    var container_width = jQuery('#facebook_page_plugin_widget-3').width();    
    jQuery('#facebook_page_plugin_widget-3 .fb-page').replaceWith('<div class="fb-page" data-version="1.4.2" data-href="https://www.facebook.com/565581890176400/" data-width="' + container_width + '" data-height="300" data-hide-cover="false" data-show-facepile="true" data-tabs="timeline" data-hide-cta="false" data-small-header="false" data-adapt-container-width="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"></div></div>');	FB.XFBML.parse();    }); 
</script><!--RWD重新載入END-->

寬度限制從FB developers 頁面輸入寬度時的提示可以得知，至於以後會不會增加？看FB，不是我能決定的 https://developers.facebook.com/docs/plugins/page-plugin/

原本結構如下，僅供參考

<!--原HTML結構示意BEGIN-->
<section id="facebook_page_plugin_widget-3" class="widget widget_facebook_page_plugin_widget">
  <div id="fb-root" data-version="1.4.2"></div>
  <script async>(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/zh_TW/sdk.js#xfbml=1&version=v2.4";fjs.parentNode.insertBefore(js, fjs);	}(document, 'script', 'facebook-jssdk'));</script>
  <div class="fb-page"  data-width="500" data-height="300" data-hide-cover="false" data-show-facepile="true" data-tabs="timeline" data-hide-cta="false" data-small-header="false" data-adapt-container-width="true"><div class="fb-xfbml-parse-ignore"></div>
  </div>
</section>
<!--原HTML結構示意END-->

這樣做的缺點是FB外掛也會重新載入，不過由於剛才載入過，再次載入並不會太慢，但流量的浪費就……

總之就是這樣