Invité

[Modif & astuce] Bouton " J'aime et partager " Facebook

Messages recommandés

Invité   
Invité

Bouton " J'aime et partager " Facebook

Voir le fichier

IMPORTANT:
Toute utilisation de cette version sur votre site par vous même le sera à vos risques et péril, en aucun cas l'auteur de celle ci ne sera
tenu pour responsable en cas de problème dans son utilisation faite par vous même et sous votre entière responsabilité.

 

Nota :

Pour les fichiers marqués * et en gras dans la description , ce sont des fichiers open source libre de modification ( avec dans le cas des scripts un lien menant directement vers le site de l'auteur du fichier original afin de respecter les droits de l'auteur original du script au cas ou celui ci le spécifierait d'une manière quelconque de ne pas enlever ses propres références dans le script par l'utilisateur final ).

ceci afin de respecter le travail de l'auteur original si une telle spécification était expressément demandée par celui ci.

 

Pour mettre dans votre Zwiicms un bouton " j'aime " et un bouton de partage sur votre page Facebook procédez comme suis

dans votre fichier main.php situé dans le dossier "../core/layout/main.php " de votre site construit avec zwii vous
allez ajouter ceci entre les balises <body> et </body>

( j'ai pour ma part mis ce code en bas de la page juste avant </body>

 

  <!-- bouton partager Facebook -->
<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/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

5925c69eb0096_FBscript.thumb.PNG.f3383b5410225b086732c213480b4523.PNG

 

Rendez vous ensuite sur cette page pour personnaliser et paramétrer vos bouton Facebook en cliquant sur le configurateur de bouton
https://developers.facebook.com/docs/plugins/like-button

 

5925c6dec98f9_fbconfig.thumb.PNG.ed40ea84c2d353d10dab1c2900937314.PNG

5925c70792175_fbconfig1.thumb.PNG.5d8a9b9b8a7ba079f2512945ce35d11b.PNG

 

Une fois votre configuration choisie vous cliquez sur le bouton " Obtenir le code " , cela
ouvrira une popup contenant le code pour afficher votre bouton là où vous le désirez sur votre site web.
( ne vous souciez pas du code à l'étape 2 de la popup , c'est le m^me que je vous ai mis au début du tuto )
Prendre le code qui est sous la flèche rouge
5925c7759a09b_fbcode.thumb.PNG.490cd3803ee9bdfcefaf18dd3566e153.PNG

 

5925c792bc191_fbcode1.thumb.PNG.c26ddafcb70aa4454b5a69b2dfff3c93.PNG

 

Ne vous reste plus ensuite qu'à coller ce code dans la page de votre zwii où vous souhaiter le voir afficher
dans le bas de site

5925c7dcacbdd_fbbdp.thumb.PNG.684c36faeb140b29125b0e53dfaa8705.PNG

 

5925c807dfaa9_fbbdp1.thumb.PNG.1dd95494906fbd5a4893e8b4619e09a8.PNG

 

5925c82f7947e_fbbdp2.thumb.PNG.96fe30568f0a9036e44a83b1ab4d7b45.PNG


dans une page ( utilisez votre éditeur en code source comme ci dessous )
5925c89956ce7_fbbdpp.thumb.PNG.85283358341f43423deda2e8ebbb0c61.PNG

 

5925c8d72ea64_fbbdpp1.thumb.PNG.0fafc76d0a13c36dab31e0028681a3e4.PNG

 

Vous pouvez bien entendu personnaliser à votre guise la div qui affiche votre bouton, il suffit de faire marcher votre
imagination pour ce faire ... :)

 

* Sources des fichiers modifiés :

Aucun fichier modifié sauf ceux du zwii pour permettre l'affichage du bouton fourni gracieusement ( les codes ) depuis leur espace développeurs ici:

https://developers.facebook.com/docs/plugins/like-button

Juste une bonne recherche web permet à tout un chacun de faire la m^me chose avec d'autre boutons de réseaux sociaux...

 

 

* Posez vos questions ou découvrez des astuces pour ce plugin dans  le forum qui lui est consacré pour son support .

* Soyez aussi sympa si vous l'estimez de laisser un commentaire une fois votre téléchargement effectué et noter ce plug

Enjoy !!!  


 

Modifié par Invité (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

Bin vi , quand on aime Zwii , bin on prend les idées qu'un membre vous souffle à l'oreille et on se débrouille pour en faire un plug :D

Pi y'a plein de gens qui se servent de ce genre de boutons , mais aussi d'un tas d'autres choses qui ne sont pas encore à portée de main dans zwii , alors bin super si je peux apporter ma petite pierre de cette façon :P

Merci Rémi pour le compliment, j'apprécie beaucoup tu sais et ça encourage à faire plus pour Zwii :thumbsup:

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par dangee
      Bonjour à tou (te) s,
       
      Tout d'abord, bravo aux concepteurs de Zwii ! J'ai essayé bcp de flat cms et celui-ci est vraiment génial :)) Très simple à prendre en main. Je n'ai pas encore fait le tour de l'arborescence, mais cela s'annonce bien !
       
      Voici ma première question sur ce forum
      Je suis entrain d'insérer un code dans main.php, pour pouvoir partager les pages sur les différents réseaux sociaux et il me manque 3 variables php : 
      le titre de la page son url et la description y a t-il un moyen de les récupérer ??
       
      Voici mon code
      <ul> <li><a href="https://www.facebook.com/sharer.php?u=<?php echo $pageTitle; ?>&t=<?= $titre ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">facebook</a> </li> <li><a href="https://twitter.com/share?url=<?= $lien ?>&text=<?= $titre ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">twitter</a> </li> <li><a href="https://plus.google.com/share?url=<?= $lien ?>&hl=fr" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">google+</a> </li> <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?= $lien ?>&title=<?= $titre ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">linkedin</a> </li> <li><a href="https://pinterest.com/pin/create/button/?url=<?= $lien ?>&media=<?= $urlmedia ?>&description=<?= $titre ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">pinterest</a> </li> </ul> Merci et à bientôt !
    • Invité
      Par Invité
      J'aime le site visité
      Voir le fichier IMPORTANT:
      Toute utilisation de ce plugin sur votre site par vous même le sera à vos risques et péril, en aucun cas l'auteur de celui ci ne sera tenu pour responsable en cas de problème dans son utilisation faite par vous même et sous votre entière responsabilité.
       
      Nota :
      Pour les fichiers marqués * et en gras dans la description , ce sont des fichiers open source libre de modification ( avec dans le cas des scripts un lien menant directement vers le site de l'auteur du fichier original afin de respecter les droits de l'auteur original du script au cas ou celui ci le spécifierait d'une manière quelconque de ne pas enlever ses propres références dans le script par l'utilisateur final ).
      ceci afin de respecter le travail de l'auteur original si une telle spécification était expressément demandée par celui ci.
       
      Explication de cet addon
       
      Vous aimeriez sans doute savoir si les gens aiment votre site web quand ils le visite, et bien ajoutez lui tout simplement un lien cliquable ( ou une image ) pour ce faire...
      Vous verrez grâce à ce compteur de clics tout simple ( et vos futurs visiteurs aussi ) la popularité que procure la lecture de votre site web auprès de ceux qui auront pris la peine de le parcourir.

       
       
      Comment faire pour l'installer
       1° Téléchargez l'archive et décompressez celle ci sur votre pc
       2° Envoyez à la racine de votre FTP le fichier compteclic.php et suivez juste les instructions
      contenue dans le fichier " installation du compteur de clic.txt " joint à l'archive
      3° Ouvrez votre navigateur web sur votre site et savourez le résultat.
       
      Installation du compteur.
      1° Placez votre fichier php dans le même dossier que la page html.
      2° Créez le lien que doivent prendre en compte les bdont les clics.
      Pour cela, placez le code suivant dans votre fichier html, à l'endroit désiré,
      en remplaçant
      http://adresse du zwii/accueil par l'URL qui doit être affiché dans le navigateur et "J'aime ce site" par votre propre texte ( où mettez y une image en guise de texte ).
      a href="compteclic.php?url=http://adresse du zwii/accueil">J'aime ce site</a>  
      3. Afficher le nombre de clics déjà exécutés sur le lien.
      Pour cela, placez le code suivant dans votre page de site web, à l'endroit où doit être affiché le nombre actuel de clics exécutés,
      en remplaçant éventuellement le texte avant et après la balise SCRIPT.
      Dans cet exemple ci dessous, cette ligne affichera "Vous êtes déjà cliqué " X nombre " à nous aimer !"
      Vous êtes déjà <script type="text/javascript" src="compteclic.php"></script> à nous aimer ! Et voilà, votre compteur de clics est prêt !
      Vous pouvez éventuellement modifier la ligne
       $fileName = "compteclic.dat";
      pour spécifier un nom de fichier différent.
      Au premier clic, le fichier est créé automatiquement.
      Pensez à verifier les droits d'écriture CHMOD pour compteclic.dat.
      Vous devriez avoir quelque chose du style:
      <a href="compteclic.php?url=http://adresse du zwii/accueil">J'aime ce site</a> Vous êtes déjà <script type="text/javascript" src="compteclic.php"></script> à nous aimer ! que vous pouvez placer par exemple dans le footer en texte personnalisé..;
      le script tel qu'il est dans le fichier php
      $fileName = "compteclic.dat"; // à changer par votre prope nom de fichier ou laisser tel que $n = @file_get_contents($fileName); if (!$n) $n=0; $n = floor($n); if (isset($_GET["url"])) { $n++; $fd = @fopen($fileName, "w") or die("ERREUR : Impossible d'ouvrir le fichier $fileName pour enregistrer les données"); // à changer par votre prope phrase ou laisser tel que @fwrite($fd, $n); @fclose($fd); header("Location:".$_GET["url"].""); exit(); } else { echo("\r\n document.write('$n'); \r\n"); } ?>  
       
      Un fichier d'explication du patch est joint à l'archive, le lire pour en connaître de plus amples détails de même qu'un fichier image au format png à héberger si vous souhaitez remplacer le texte à cliquer par un bouton image.
       
      * Sources des fichiers modifiés :
      - sources:
      Inspiration venue depuis ce site web et ce sujet en particulier :
      https://openclassrooms.com/forum/sujet/compteur-de-clic-2
       
      - fichiers modifiés :
      Aucun
       
      Enjoy les amis
      Roger nounours
      Contributeur Roger nounours Soumis 23/08/2017 Catégorie Modifications et astuces