社交平台功能 - Facebook留言版篇


而家都有唔少既網誌平台會加入一啲社交網站平台既功能。本來諗住自製留言版既我心諗:既然有現成既倒不如拎左黎用先,增加開發經驗之餘又可以慳返唔少時間。

於是今次我就揀左Facebook既留言版。而家如果有入啲post度睇既話應該會見到係頁底會有留言版存在。

唯一麻煩既係要登入Facebook先可以用到,所以可能之後會重新再開發一個FB以外可以匿名留言既功能......個構思仲係腦度。

於是乎就開始實作,首先要做既就係去Facebook for Developers(https://developers.facebook.com/)度登入你既FB帳號,無既就申請一個啦。登入後就按下「開始註冊」,如果你未有註冊過FB開發者既帳號的話就會要你做一輪註冊既步驟。

大部份既社交平台,諸如Twitter、Facebook等都會獨立要再申請多個Developer帳號。

申請完之後應該就可以入到去Facebook Developer既管理中心畫面。記住你既App ID,然後喺左邊既選單度搵「新增產品」,入到去再按「查看更多產品」。由於Facebook既Comment Box算係輔助社交既工具(?),所以你要入去「社交附加程式」度搵佢出黎。

Facebook for Developers仲有好多野可以俾你玩,前提當然係你有需要用到啦。有機會用到/想學既時候再分享上黎。

入去閱讀文件後就搵到「回應附加程式」既教學。佢有步驟可以俾你跟住做,亦可以直接用佢既生成器設定好相應URL、寬度及每頁顯示回應數量後取得代碼,就會重新彈出步驟。你跟住做基本上就可以啦。

基本設定好後就可以進行各種深入既操作,例如審核之類。因為我申請個app未正式俾FB審核變成公開,所以有興趣既可以自己去佢度睇下。網址: https://developers.facebook.com/docs/plugins/comments

得到呢段Code之後,當然唔係就咁塞入去網誌度啦。因為每篇文章都有唔同既URL,要同Laravel整合既最好方法就係將部份既代碼轉做variable。

首先就係將step 1既code變成以下咁樣。
<div id="fb-root"></div>
<script>
(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 = 'https://connect.facebook.net/zh_HK/sdk.js#xfbml=1&version=v2.11&appId={{ env('FACEBOOK_APP_ID') }}';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

將appId既位置變成Laravel既環境常數,然後係.env度加呢個值落去。再黎就係改寫step 2既代碼。
<div class="fb-comments" data-href="{{ Request::url() }}" data-width="100%" data-numposts="5"></div>

將data-href既位置變成隨住目前URL而改變既variable,咁無論你去邊個文章,個留言版都會指去相對既文章度啦。

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

社交平台功能 - Facebook留言版篇


而家都有唔少既網誌平台會加入一啲社交網站平台既功能。本來諗住自製留言版既我心諗:既然有現成既倒不如拎左黎用先,增加開發經驗之餘又可以慳返唔少時間。

於是今次我就揀左Facebook既留言版。而家如果有入啲post度睇既話應該會見到係頁底會有留言版存在。

唯一麻煩既係要登入Facebook先可以用到,所以可能之後會重新再開發一個FB以外可以匿名留言既功能......個構思仲係腦度。

於是乎就開始實作,首先要做既就係去Facebook for Developers(https://developers.facebook.com/)度登入你既FB帳號,無既就申請一個啦。登入後就按下「開始註冊」,如果你未有註冊過FB開發者既帳號的話就會要你做一輪註冊既步驟。

大部份既社交平台,諸如Twitter、Facebook等都會獨立要再申請多個Developer帳號。

申請完之後應該就可以入到去Facebook Developer既管理中心畫面。記住你既App ID,然後喺左邊既選單度搵「新增產品」,入到去再按「查看更多產品」。由於Facebook既Comment Box算係輔助社交既工具(?),所以你要入去「社交附加程式」度搵佢出黎。

Facebook for Developers仲有好多野可以俾你玩,前提當然係你有需要用到啦。有機會用到/想學既時候再分享上黎。

入去閱讀文件後就搵到「回應附加程式」既教學。佢有步驟可以俾你跟住做,亦可以直接用佢既生成器設定好相應URL、寬度及每頁顯示回應數量後取得代碼,就會重新彈出步驟。你跟住做基本上就可以啦。

基本設定好後就可以進行各種深入既操作,例如審核之類。因為我申請個app未正式俾FB審核變成公開,所以有興趣既可以自己去佢度睇下。網址: https://developers.facebook.com/docs/plugins/comments

得到呢段Code之後,當然唔係就咁塞入去網誌度啦。因為每篇文章都有唔同既URL,要同Laravel整合既最好方法就係將部份既代碼轉做variable。

首先就係將step 1既code變成以下咁樣。
<div id="fb-root"></div>
<script>
(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 = 'https://connect.facebook.net/zh_HK/sdk.js#xfbml=1&version=v2.11&appId={{ env('FACEBOOK_APP_ID') }}';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

將appId既位置變成Laravel既環境常數,然後係.env度加呢個值落去。再黎就係改寫step 2既代碼。
<div class="fb-comments" data-href="{{ Request::url() }}" data-width="100%" data-numposts="5"></div>

將data-href既位置變成隨住目前URL而改變既variable,咁無論你去邊個文章,個留言版都會指去相對既文章度啦。