Comment intégrer les commentaires de Facebook, Disqus, Google+ dans Jekyll ?

Par Rajan Bhattarai - il y a 5 mois et 1 jour / jan 2020
Comment intégrer les commentaires de Facebook, Disqus, Google+ dans Jekyll ?

Publié initialement le : 2017-08-15. Mise à jour le : 2020-01-24.


Pour mon blog jekyll, j'ai mis en place tout le système de commentaires. L'utilisateur peut utiliser soit facebook, disqus et google+. L'avantage d'être les trois et d'être séparés est que l'utilisateur peut avoir la liberté. Par exemple, les utilisateurs qui sont déjà connectés à facebook peuvent commenter directement sans avoir à enregistrer leur nom et leur adresse électronique. D'autre part, disqus vous permet de commenter de manière plus large sans montrer vos médias sociaux. Et il y a google+, dont je pense qu'il sera inutile d'expliquer pourquoi google+ commente dans les blogs. Alors, sans plus attendre, commençons la configuration. Cette configuration ne fonctionne que pour jekyll. Cherchez sur google pour une autre plateforme.

Voici ma plateforme de commentaires actuelle dans le blog où l'utilisateur peut choisir où utiliser les médias et poster son commentaire.

Commentaire

Suivez les documents facebooks sur la façon de configurer le commentaire ou d'utiliser la plate-forme de commentaires facebook.

2.faire un compte sur les disqus. Google+ n'aura pas besoin d'autre chose, si ce n'est de s'assurer que vous êtes connecté.

3.faire un fichier nommé any. J'utiliserai comment.html qui doit se trouver dans le dossier includes.

4) L'étape suivante consiste à ajouter la cofiguration pour les différents systèmes. Vous trouverez ci-dessous la liste de toutes les configurations. Assurez-vous de modifier la bonne configuration et le fichier unique, même si l'essentiel est différent.

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>

Après avoir sauvegardé la configuration ci-dessus, il faut maintenant _layouts/post.html et ajoutez ce qui suit à un endroit pertinent. inclure un commentaire.html Include with { and % .

Une fois l'étape 5 terminée, allez vérifier localement en exécutant jekyll serve.

Note : Vous devez mentionner clairement les variables ou paramètres dans le fichier config.yml pour disqus.

Cela complète le système de commentaires du blog jekyll.




Rajan Bhattarai
Rajan Bhattarai
Ingénieur logiciel par métier. Développeur Full Stack Ruby on Rails. Blogger de DevOps et Blockchain.Tech. Demandes de renseignements et articles : hello@cdrrazan.com -Rb


commentaires alimentés par Disqus