Installer des commentaires Facebook et Blogger Responsive

Installer des commentaires Facebook et Blogger Responsive - Les commentaires sur Facebook et Blogger côte à côte sont deux choses très liées, car nous savons que dans les commentaires de blogger, l'administrateur ne propose généralement que la colonne de commentaire par défaut du blogger et que certains visiteurs peuvent ne pas avoir de compte Google, mais un compte Facebook.

Nous devons donc également mettre la colonne de commentaires sur Facebook aux côtés des commentaires Blogger afin que les visiteurs qui n'ont pas un compte Google puissent commenter à l'aide de leur compte Facebook. Le code Responsive des commentaires Facebook est associé à un tutoriel du blog Mon Blogger Code sur l'article Comment installer des commentaires Responsive Facebook sur Blogger

Comment installer côte à côte les commentaires Responsive Facebook et Blogger

1. Connectez-vous à blogger >> Thème >> Modifier le code HTML Copiez le code ci-dessous et collez le avant la balise ]]></b:skin> ou </style>

CSS/* Commentaires Facebook et Blogger */
.komentargabungan-page,.komentargabungan-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10}
.komentargabungan-page{background:rgba(255,255,255,1);width:100%;max-width:100%;margin:0 0 20px}
#blogger-comments-page h4{display:none}
#blogger-comments-page p{color:#444;}
#blogger-comments-page {padding:0px 5px;display:none;}
.komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;}
.komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;}
.komentargabungan-tab:hover:nth-child(2) {background:#e1954a;}
.komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px}
.komentargabungan-tab:hover{background-color:#324c82;}
.inactive-select-tab {background:#aaa}
.inactive-select-tab,.komentargabungan-tab:hover {background-color:#324c82;}

2. Copiez ensuite le code ci-dessous et collez le avant la balise </body>

JS<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize",function(){var o=location.protocol+"//"+location.host+location.pathname,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>'),FB.XFBML.parse()});
//]]>
</script>

3. Dans le modèle, il y a deux codes <div class='comments' id='comments'>, copier le code ci-dessous et collez le juste en dessous des deux codes, <div class='comments' id='comments'>

HTML<div class='komentargabungan-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<fb:comments-count expr:href='data:post.url'/> Commentaires Facebook</div>
<div class='komentargabungan-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<data:post.numComments/> Commentaires Blogger</div>
<div class='clear'/>
</div>
<div class='komentargabungan-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if></div>
<div class='comments komentargabungan-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/fr_FR/all.js#xfbml=1'/>
<script type='text/javascript'>
function commentToggle(selectTab) {$(&quot;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}
</script>

4. Enregistrez le modèle et consultez les résultats sur le blog.

J'espère que cette article vous sera utile au revoir et à bientôt 😊