Add Facebook Comment System

README.md

@@ -78,6 +78,7 @@ I hope you will LoveIt ❤️!
 * Disqus comment system support by [Disqus](https://disqus.com)
 * Gitalk comment system support by [Gitalk](https://github.com/gitalk/gitalk)
 * Valine comment system support by [Valine](https://valine.js.org/)
+* Facebook comment system support by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 
 ### Extended Features
 
@@ -207,6 +208,7 @@ Thanks to the authors of following resources included in the theme:
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
+* [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 
 ## Author
 

exampleSite/config.toml

@@ -221,6 +221,13 @@ staticDir = ["static", "../assets/others"]               # static directories
     placeholder = "Your comment ..."
     visitor = true
     recordIP = true
+  
+  [params.facebook]                                      # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments)
+    enable = false
+    width = "100%"
+    numPosts = 10
+    appId = ""
+    languageCode = "en_US"
 
 [privacy]                                             #### Privacy Info (https://gohugo.io/about/hugo-and-gdpr/)
   [privacy.googleAnalytics]

layouts/partials/comments.html

@@ -75,4 +75,22 @@
             });
         </script>
     {{- end -}}
+
+    <!-- facebook comment -->
+    {{- if .Site.Params.facebook.enable -}}
+        {{ .Site.Params.baseURL }}{{ .Permalink | absURL }}
+        <div id="fb-root"></div>
+        <script 
+            async 
+            defer 
+            crossorigin="anonymous" 
+            src="https://connect.facebook.net/{{ .Site.Params.facebook.languageCode }}}/sdk.js#xfbml=1&version=v5.0&appId={{ .Site.Params.facebook.appId }}&autoLogAppEvents=1"
+        ></script>
+        <div 
+            class="fb-comments" 
+            data-href="{{ .Site.Params.baseURL }}{{ .Permalink | absURL }}"
+            data-width="{{ .Site.Params.facebook.width }}" 
+            data-numposts="{{ .Site.Params.facebook.numPosts }}"
+        ></div>
+    {{- end -}}
 {{- end }}