使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外掛也會重新載入,不過由於剛才載入過,再次載入並不會太慢,但流量的浪費就……

總之就是這樣

分享文章
Chaneswin
Chaneswin

【阿淳】漂流過網路行銷、組織行銷、被創業的光環迷惑過,體驗那些未曾想像的驚奇之後,最終的自由卻是擁有澄澈的雙眼、返璞歸真的看世界,我的冒險不在鎂光燈的絢麗舞台,而在迷宮中。把心路歷程化為故事、把工具筆記在雲端。在瞬息萬變的世界裡,慢慢來。
【阿淳的自由生活工具箱】前身小查的白日夢。從腦中的虛幻到真實世界,這裡記錄著一路上不同階段的想法、課程、工具、實踐、挫折,從此放下權威迷思。如果翻出你需要的工具,歡迎隨喜自取、提問討論 :)

文章: 316

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *