如何整合Facebook,Disqus,谷歌+评论在杰基尔?

拉詹·巴特拉伊 - 5个月零2周前 / Jan 2020
如何整合Facebook,Disqus,谷歌+评论在杰基尔?

原文发布于:2017-08-15。更新日期:2020-01-24。


对于我的jekyll博客,我已经实现了所有的评论系统。用户可以使用facebook, disqus和google+。三者分开的好处是,用户可以有自由度。例如,已经登录到facebook的用户可以直接发表评论,无需注册姓名和邮箱。另一方面,disqus可以让你在不显示你的社交媒体的情况下,在更大范围内发表评论。还有就是google+,我认为这将是没有价值的解释为什么google+在博客中的评论。所以,不耽误任何时间,让我们开始配置。这个配置只适用于jekyll。在google上搜索其他平台。

下面是我目前在博客中的评论平台,用户可以选择在哪里使用媒体,在这里发表评论。

评论

1.按照这个facebook的docs说明如何设置评论或使用facebook评论平台。

2、在disqus上注册一个账号。Google+不需要任何其他东西,只需要确认你已经登录。

3.做一个文件,命名为any。我将使用comment.html,这个文件应该在include文件夹中。

4.然后下一步就是添加不同系统的配置。下面是所有配置的列表。请确保用你的正确的,并在单个文件下进行更改,即使GIST是以不同的方式列出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="buttons">
<div style="width: 100%">
    <button class="buttons1" onclick="openComment(event, 'Facebook')" id="defaultOpen"><i class="fa fa-facebook fa-3x" aria-hidden="true"></i></button>
    <button class="buttons2" onclick="openComment(event, 'Disqus')"><i class="fa fa-commenting-o fa-3x" aria-hidden="true"></i></button>
</div>
</div>
<div id="Facebook" class="tabcontent">
    <div class="fb-comments" data-href="/blog/integrate-fb-google-disqus-comment-in-jekyll/" data-width="auto" data-numposts="5"></div>
</div>
<div id="Disqus" class="tabcontent">
    <div class="comment-wrapper">
        
    </div>
</div>
<div id="Google+" class="tabcontent">
    <script src="https://apis.google.com/js/plusone.js">
    </script>
    <div id="google_comments"></div>
    <script>
    gapi.comments.render('google_comments', {
        href: window.location,
        width: '900',
        height: '200',
        first_party_property: 'BLOGGER',
        view_type: 'FILTERED_POSTMOD'
    });
    </script>
</div>
<script>
function openComment(evt, CommentName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(CommentName).style.display = "block";
    evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<style>
.buttons {
    background-color: black; /* Green */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
</style>

5.现在保存上述配置后,转到 _layout/post.html 并在相关的地方增加以下内容: 纳入评论 Include with { and % .

第5步完成后,在本地检查,运行 爵士乐.

注意:你需要在config.yml文件中明确提到disqus的变量或参数。

这就完成了Jekyll博客中的评论系统。




拉詹·巴特拉伊
Rajan Bhattarai
软件工程师的工作。全栈Ruby on Rails开发者。DevOps和Blockchain.Tech Blogger。查询和文章:hello@cdrrazan.com -Rb


由 Disqus供电的评论