add fb comment (#350)

* add fb comment

* Update README.md for facebook comments

* Update _config.yml

* Update README.md
This commit is contained in:
npes87184 2018-06-09 06:25:07 +08:00 committed by Dean Attali
parent 786849a7c2
commit b9a562da4f
5 changed files with 30 additions and 4 deletions

View File

@ -104,9 +104,13 @@ Many personalization settings in `_config.yml`, such as setting your name and si
### Allowing users to leave comments
If you want to enable comments on your site, Beautiful Jekyll supports the [Disqus](https://disqus.com/) comments plugin. To use it, simply sign up to Disqus and add your Disqus shortname to the `disqus` parameter in the `_config.yml`.
If you want to enable comments on your site, Beautiful Jekyll supports either the [Disqus](https://disqus.com/) comments plugin or [Facebook](https://developers.facebook.com/docs/plugins/comments) comments.
If the `disqus` parameter is set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
To use Disqus, simply sign up to [Disqus](https://disqus.com/) and add your Disqus shortname to the `disqus` parameter in the `_config.yml` file.
To use Facebook comments, create a Facebook app using [Facebook developers](https://developers.facebook.com/docs/apps/register), and add the Facebook App ID to the `fb_comment_id` parameter in `_config.yml`.
If either `disqus` or `fb_comment_id` parameters are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
### Adding Google Analytics to track page views

View File

@ -118,9 +118,15 @@ url-pretty: "MyWebsite.com" # eg. "deanattali.com/beautiful-jekyll"
# uri: "demo.wiki.pro"
# opt-out: true
# --- Misc --- #
# --- Comments --- #
# Fill in your Disqus shortname (NOT the userid) if you want to support Disqus comments
#disqus: ""
# disqus: ""
# To use Facebook Comments, fill in a Facebook App ID
# fb_comment_id: ""
# --- Misc --- #
# Facebook App ID
# fb_app_id: ""

14
_includes/fb-comment.html Normal file
View File

@ -0,0 +1,14 @@
{%- if site.fb_comment_id -%}
<div class="comments">
<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/en_US/sdk.js#xfbml=1&version=v2.12&appId={{ site.fb_comment_id }}&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
<noscript>Please enable JavaScript to view the comments powered by Facebook.</noscript>
</div>
{%- endif -%}

View File

@ -12,6 +12,7 @@ layout: base
<div class="disqus-comments">
{% include disqus.html %}
</div>
{% include fb-comment.html %}
{% endif %}
</div>
</div>

View File

@ -69,6 +69,7 @@ layout: base
<div class="disqus-comments">
{% include disqus.html %}
</div>
{% include fb-comment.html %}
{% endif %}
</div>
</div>