Wie können Facebook, Disqus, Google+ Kommentare in Jekyll integriert werden?

Durch Rajan Bhattarai - vor 5 Monaten und 1 Tag / Jan 2020
Wie können Facebook, Disqus, Google+ Kommentare in Jekyll integriert werden?

Ursprünglich veröffentlicht am: 2017-08-15. Aktualisiert am: 2020-01-24.


Für meinen jekyll-Blog habe ich das Kommentarsystem implementiert. Benutzer können entweder facebook, disqus und google+ benutzen. Der Vorteil aller drei und getrennt zu sein, ist, dass der Benutzer Freiheit haben kann. Zum Beispiel können Benutzer, die bereits bei Facebook angemeldet sind, direkt kommentieren, ohne Namen und E-Mail zu registrieren. Auf der anderen Seite können Sie mit disqus in einer breiteren Perspektive kommentieren, ohne Ihre sozialen Medien zu zeigen. Und es gibt google+, von dem ich glaube, dass es wertlos sein wird zu erklären, warum google+ in Blogs kommentiert. Beginnen wir also ohne Verzögerung mit der Konfiguration. Diese Konfiguration funktioniert nur bei jekyll. Suchen Sie auf google nach einer anderen Plattform.

Hier ist meine aktuelle Kommentatorenplattform im Blog, auf der die Benutzer wählen können, wo sie die Medien nutzen und ihren Kommentar veröffentlichen möchten.

Kommentar

1 Verfolgen Sie diese Facebook-Dokumente zur Einrichtung des Kommentars oder zur Verwendung der Facebook-Kommentarplattform.

2. ein Konto auf Diskus erstellen. Google+ wird keine weiteren Dinge benötigen, außer sicherzustellen, dass Sie eingeloggt sind.

3.eine Datei mit dem Namen any erstellen. Ich werde die Datei comment.html verwenden, die sich im Include-Ordner befinden sollte.

4 Der nächste Schritt besteht darin, die Kofiguration für verschiedene Systeme hinzuzufügen. Unten finden Sie eine Liste aller Konfigurationen. Vergewissern Sie sich, dass Sie mit der richtigen Konfiguration und unter Single File wechseln, auch wenn die Kernpunkte unterschiedlich aufgelistet sind.

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 Nachdem Sie die obige Konfiguration gespeichert haben, gehen Sie nun zu _Layouts/post.html und fügen Sie das Folgende an einer relevanten Stelle hinzu. Kommentar einschließen.html Include with { and % .

Sobald Schritt 5 abgeschlossen ist, führen Sie die lokale Überprüfung durch jekyller Aufschlag.

Hinweis: Sie müssen die Variablen oder Parameter in der Datei config.yml für disqus deutlich erwähnen.

Dies vervollständigt das Kommentarsystem im jekyll-Blog.




Rajan Bhattarai
Rajan Bhattarai
Software-Ingenieur nach Werk. Full Stack Ruby on Rails-Entwickler. DevOps und Blockchain.Tech Blogger. Anfragen und Artikel: hello@cdrrazan.com -Rb


Kommentare powered by Disqus