Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious....
Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration.
Insertion dans les pages
Le plugin utilise la balise #INSERT_HEAD de vos squelettes.
Il suffit de configurer le plugin via cfg en indiquant le nom de votre div, et d’insérer éventuellement le code suivant dans les squelettes :
<div id="socialtags"></div>La noisette ou le div va donc afficher une série d’icônes relatives aux sites choisis, une petite image vaut mieux qu’un long discours :
Le plugin offre une très grande liste de réseaux sociaux et de bookmarking, notamment :
Digg, Delicious, Facebook, Google Bookmarks, Technorati, Live, Scoopeo, Wikio, Furl, Blogmarks, Reddit, Mister wong, Viadéo, MySpace...
Le plugin est téléchargeable sur la zone :
socialtags.zip.
Vous êtes invité à ajouter des sites de réseaux sociaux si vous le désirez, c’est sur la zone.
Réserver les boutons aux visiteurs en provenance du site concerné
Cette nouvelle option (version 0.8 du plugin) permet de réserver l’affichage du bouton « partager » aux seuls utilisateurs en provenance de Facebook. Ceci afin de ne pas gêner les visiteurs qui ne souhaitent pas utiliser Facebook.
L’option fonctionne en ajoutant un cookie social_facebook=1 à tout visiteur provenant de Facebook. Dès lors, l’affichage du bouton « partager » sera conditionné à la présence de ce cookie.
Pour tester cette fonctionnalité, on peut passer le referer dans l’URL : http://zzz.rezo.net/?HTTP_REFERER=h... ; pour revenir à l’état précédent, il suffit de supprimer son cookie social_facebook.
Ajouter un badge Facebook
Le bloc de badge javascript permet d’afficher un badge Facebook ou autre. Il est programmé de manière à pouvoir être réservé aux visiteurs en provenance de Facebook. Voici, à titre d’exemple, comment je procède pour mettre le badge du site per.sonn.es sur le site zzz.rezo.net.
La page http://www.facebook.com/facebook-wi... m’indique que je peux utiliser comme badge le code HTML suivant :
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR"></script>
<script type="text/javascript">
FB.init("f38e69d43f79cbe7e03bba1d54c0a01c");
</script>
<fb:fan profile_id="213643810738" stream="1" connections="10" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px">
<a href="http://www.facebook.com/pages/personnes/213643810738">per.sonn.es sur Facebook</a>
</div>On remarque que ce badge :
- appelle la librarie JS de Facebook http://static.ak.connect.facebook.c...
- définit une largeur de 300 pixels (width="300")
- affichera le flux de nouvelles de la page (stream="1")
- affichera 10 photos de fans (connections="10")
- conduira vers la page profile_id="213643810738"
- est marqué d’une clé d’API "f38e69d43f79cbe7e03bba1d54c0a01c"
- pose un lien « en dur » vers la page (ce qui permet au passage à Facebook d’augmenter son pagerank).
Pour obtenir l’équivalent en javascript on écrira dans la boîte JS :
if (document.cookie.match('social_facebook=1'))
$.getScript('http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR', function() {
$('.menu.subscribe')
.append('<fb:fan profile_id="213643810738" stream="1" connections="8" width="250"><\/fb:fan>');
FB.init('f38e69d43f79cbe7e03bba1d54c0a01c');
});À la 1re ligne, je vérifie si le visiteur a un cookie indiquant qu’il est dejà venu sur ce site depuis Facebook ; le cas échéant, on va lui envoyer le badge.
La deuxième ligne charge la librairie facebook, puis, une fois celle-ci chargée, insère le marqueur de badge, avec toute sa configuration, dans le bloc .menu.subscribe, et enfin exécute le script avec la clé d’API.
On remarque au passage que je n’ai pas conservé le « lien en dur », inutile et pas très esthétique.
À noter : une fois le code HTML d’un badge renseigné dans le CFG du plugin, il est possible de l’insérer dans les squelettes avec #MODELE{socialtags_badge}, ou dans un article avec le raccourci <socialtags|badge>.
Ajouter Google+1
Si vous avez le plugin google+1 activé, vous pouvez choisir de l’afficher à la suite de vos images de tags.
Pensez à configurer le plugin google+1 pour adapter la taille du bouton.
Noisettes
Le plugin fournit des noisettes paramétrables utilisables dans le noiZetier et permettant d’afficher les badges et boites de type « J’aime » de Facebook.
Discussions par date d’activité
240 discussions
Je viens de faire une mise à jour du plugin lui permettant de gérer des badges Facebook et de limiter l’affichage en fonction du referer du visiteur. Du coup, grosse mise à niveau de la doc.
Répondre à ce message
ça mach"pô
Trac Error
No node /_plugins_/socialtags at revision 22438
Répondre à ce message
Concernant le placement des icônes, j’ai édité le fichier
spip/plugins/auto/socialtags/socialtags.js.html
et j’ai changé la ligne à la ligne 41 selector.after par selector.html
On peut ainsi appliquer du style directement sur #socialtags.
Répondre à ce message
Bonjour à tous,
j’ai tout fais de mon coté mais rien ne s’affiche , configurer CFG en mettant #socialtags et dans ma page d’article j’ai mis #INSERT_HEAD dans le head, et le code suivant
en bas du #TEXTE. Si quelqu’un peut bien m’aider merci
Répondre à ce message
Idem, depuis la nouvelle version et sa config via CFG, rien ne s’affiche !
Rectification : je suis sous Wamp en local et là rien ne s’affiche !
Sur 1&1 mon hébergeur cela fonctionne parfaitement.
Si quelqu’un a la solution, je suis preneur.
Autre remarque : en local j’ai bien le texte inséré entre
(option que j’ai choisi et je fais avec, soit sans l’affichage des icônes et du plugin même) or sur l’hébergeur, j’ai ce texte en haut sous la date donc le code par défaut mais les icônes au niveau du bas du logo de l’article...
enigme...
ps : voir interaction avec le plugin notation
a première vue la rédaction de code n’est pas possible ici, ce qui nous aurait aider à comprendre l’énigme...
Répondre à ce message
je réponds à mon post.
Entre mes balises
J’avais bien inséré#INSERT_HEADdans toutes mes pages de squelettes, mais sur la page article elle était avant un<INCLURE..>Je l’ai placé après et ca marche. le code contenu dans mon INCLURE semblait parasiter socialtag ...
Peut-être la solution pour d’autres personnes qui semblaient perdu (après avoir vidé tmp...) :
et non pas
Répondre à ce message
Pour tous ceux où la balise cfg n’affiche rien, voici comment j’ai procéder :
- Dans la config de cfg, j’ai précisé le nom de mon div : #socialtags
- J’ai enregistré les modifications avec cfg
- Dans mon squelettes, j’ai mis le div suivant :
- J’ai lancé une fois mon squelette et rien ne s’affichait.
- J’ai vidé le cache complet du site.
- Et là, tout s’affiche et tout fonctionne nikel !
Salut Della, dans ton message je ne vois pas le Div que tu as mis dans ton squelette. Peux-tu nous le faire apparaître en l’encadrant des balises « code » ? merci
Wéééééééééééééééééééé ! ca maaaaaaaaaaaaaaaaarche !
Della tu es un Génie !
C’est vrai qu’il suffisait juste de vider le Cache !!!!!!!!
Allez Phill, modifies ton texte et insères çà :) !
Répondre à ce message
Bonjour,
Chez moi (sous 2.0.9) cela marche si je suis dans mes squelettes rubrique, ainsi que sommaire, par contre rien ne s’affiche sur la page article...
Avec
<div id="socialtags"></div>et le paramétrage associé dans cfg...
Répondre à ce message
Salut à tous,
A mon tour de rencontrer des problèmes avec cette version. J’ai suivi le tutoriel puis les astuces de Romy (la balise de Toto), mais rien n’y fait : le postionnement par CFG n’affiche rien.
Une idée ?
A dire vrai, la 0.2 m’allait impecc. sauf qu’il manquait Twitter. Quelqu’un sait il comment ajouter seulement Twitter aux réseaux ?
Merci !
Répondre à ce message
Juste une petite suggestion d’amélioration : passer les icônes en css sprite.
Une seule image pour tous les réseaux, au lieu d’une par réseaux... les serveurs apprécieront ;)
PS : si j’ai le temps, je proposerai la modif...
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
