臉書

[教學] 免外掛!手動將Facebook留言,取代WordPress 內建的留言板

2019/06/04

梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
  將Facebook留言板整合到WordPress已不是什麼新鮮事,甚至透過Facebook留言,也能有基本的防垃圾留言的機制,但有用過的朋友,應該都有相同的經驗,那就是得先到Facebook的應用程式中,先建立一個應用程式,再取得API KEY後,再把Facebook留言機制,整合到網站中。

  而除了透過此方法外,還有個更簡單的方法,就能將Facebook的留言功能,整合到WordPress中,同時還具有管理留言的功能,因此想將Facebook留言功能,整合到WordPress佈景的朋友,現在也一塊來看看囉!


Facebook 輔助站台
取得Facebook User ID:http://findmyfbid.com/
Facebook 除錯網站:https://developers.facebook.com/tools/debug/

Step1
首先,進到WordPress後台的「編輯佈景主題」面板,再點選「singe.php」。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
Step2
get_header的下方加入「程式片段1」,以及在comment的地方,加入「程式片段2」。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
程式片段1
<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

程式片段2
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5"></div>

Step3
接著再切到「header.php」,在<head>下方加入「程式片段3」。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
程式片段3
<meta property="fb:admins" content="Fcebook ID"/>

Step4
至於Facebook ID可由下方的網站中取得。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
Step5
當輸入自己Facebook的帳號後,就取出現一組數字,而這就是你的Facebook ID。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
Step6
再回到WordPress前台,這時就會看到原來的留言區塊,就變成Facebook了。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
Step7
當文章在還沒新增留言時,就被Facebook抓取時,這時可到Facebook Debug面板中,重新再抓取一次。
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中
Step8
當重新抓取完畢後,在留言上方就會看到「審核工具」,這就可以管理你的留言,而這個方法不限於WordPress,任何網站皆可套用,唯一的差別就在於步驟2的data-href,要自行更換目前文章的網址就可以囉!是不是超簡單的呀!
梅問題-[教學] 免註冊Facebook應用程式,就能快速將Facebook留言板加入WordPress網站中