Bouton "J'aime" de Facebook sur index du forum

[bibounegreg]

Bonjour à tous,

Je viens de passer des heures à lire les différents sujets concernant l'intégration d'un bouton "J'aime" de Facebook, d'essayer diverses méthodes mais sans résultat. C'est pourquoi j'en arrive à devoir poser moi aussi la même question que les autres car visiblement, les réponses sont personnalisées selon le code de chacun.

Donc voilà le forum (en pleine reconstruction) : http://hordesque.forumactif.org/forum
Voilà l'adresse de la page facebook pour le forum : https://www.facebook.com/pages/Hordesque-Les-Gangr%C3%A9n%C3%A9s/367590219924635
Je souhaite donc un bouton like avec le petit compteur à sa droite et le bouton "envoyer" à droite encore, comme ceci :

Voici donc les réglages effectué sur facebook :

Une fois Get Code cliqué, j'obtiens au point 1 ceci : (C'est HTML5 qui est sélectionné)

Code:

<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 = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239835259425375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

et au point 2, cela :

Code:

<div class="fb-like" data-href="https://www.facebook.com/pages/Hordesque-Les-Gangr%C3%A9n%C3%A9s/367590219924635" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Jusqu'ici, ça va. Ensuite vient la question : J'en fais quoi ?
Alors, j'ai testé de mettre le code 1 dans un nouveau module de code Javascript et le 2 dans le template général -> index_box mais rien.
J'ai modifié auparavant quelques templates dont celui-ci justement et je ne sais pas à quel endroit mettre le code facebook du point 2 (ni même si j'ai bien fait pour le point 1, d'ailleurs...)

Bref, pourriez-vous m'aider s'il vous plait ? Je peux vous donner les codes des templates si vous le souhaitez.

Cordialement,

Bibou.

[Invité]

Bonjour,

Le code s'affiche si je mets l'ensemble des 2 codes dans le message d'accueil.

Code:

<div class="fb-like" data-href="https://www.facebook.com/pages/Hordesque-Les-Gangr%C3%A9n%C3%A9s/367590219924635" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div><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 = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239835259425375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Où voulez-vous le placer sur l'index?

Cordialement.

[bibounegreg]

Bonjour Isolde, merci pour votre réponse.

Je viens à l'instant de tester avec l'ensemble des deux codes et effectivement, il apparaît bien et est fonctionnel !

Par contre, c'est vrai que je n'arrive pas à le placer où je le souhaite...
J'ai réussi à le mettre juste au dessus du chat et au dessous de la barre de navigation, ce qui n'est pas trop mal comme endroit.
L'idéal à mon goût, serait de le placer juste au dessus de la barre de navigation, pas collé non plus mais centré en hauteur entre l'écriteau "Hordesque" et le haut de la barre, histoire de rendre l'espace cohérent et aligné à gauche de l'espace.
Sera-t-il possible d'insérer un "suivre" de Twitter par la suite, à côté ?

Tant qu'à être sur cette page d'index, j'aimerai également pouvoir diminuer la largeur du chat à 90% de l'espace que j'ai souhaité, comme j'ai fait avec le reste de la page et centrer le tout évidemment (chat, barre, forums, qui est en ligne (qui est déjà centré), etc.)

Encore merci de bien vouloir me consacrer de votre temps.

Cordialement,

Bibou

[Invité]

On peut essayer en insérant un tableau dans le template overall_header, mais ce sera présent sur tout les pages du forum.

Dans le template overall_header, repérez :

Code:

<!-- END switch_logo_right -->
               </tr>
            </table>
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">

Et remplacez par :

Code:

<!-- END switch_logo_right -->
               </tr>
            </table>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
               <tr>
                                          <td  align="center" valign="middle">
                                            <div class="fb-like" data-href="https://www.facebook.com/pages/Hordesque-Les-Gangr%C3%A9n%C3%A9s/367590219924635" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div><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 = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239835259425375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
                                            <br />
                                          </td>
                            </tr>
                          </table>
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">

Il suffira de rajouter une cellule au tableau pour ajouter le Twitter.

Cordialement.

[bibounegreg]

Super, ça fonctionne très bien ! Bravo et encore merci à vous pour votre disponibilité.
Je vais désormais tenter d'affiner tout ça et de diminuer l'espace entre la barre de navigation, je super nouveau bouton et le titre graphique au dessus.

Bonne journée.

Bibou

[Invité]

Concernant l'espace au dessus c'est celui de l'emplacement de la description du site. A moins d'enlever la variable dans le template, je ne vois pas comment le diminuer.

Pour l'espace en dessous, j'ai mis un saut de ligne <br /> dans le tableau, vous pouvez le retirer .

Cordialement.