Partager vos articles WordPress (sans plugin)

Bonjour tout le monde ! Aujourd’hui, je vais vous montrer comment ajouter des boutons de partage de vos articles WordPress sur les réseaux sociaux. Nous nous attarderons sur Facebook, Twitter et Google+. Notez que les manipulations n’ont vraiment rien de complexe ; le grand avantage sera ici que vous ne passerez par aucun plugin. La raison est vraiment toute simple : la plupart des plugins permettant de partager vos articles sont des extensions en général relativement lourdes et qui mettent du temps à se charger dans vos pages. Ici, vous verrez, il n’y a vraiment rien de complexe.

Pour ceux qui se sentent perdus, sur ce site, c’est la barre suivante qui permet tout ça. Elle n’a en soi rien de complexe, voyez plutôt :

Partager

Si vous avez testé les boutons sur cette barre (n’hésitez pas si l’article vous plait bien entendu), vous devriez remarquer qu’une fenêtre popup apparait. C’est la première chose que nous allons voir : comment gérer cette fenêtre. Pour cela, nous passerons par une petite fonction javascript.

function PopupWindow(source, strWindowToOpen){
  var strWindowFeatures = "toolbar=no,resize=no,titlebar=no";
  strWindowFeatures = strWindowFeatures + "width=700,height=380";
  window.open(strWindowToOpen, '', strWindowFeatures);
}

Cette fonction est relativement simple ; Elle prend deux paramètres :
– Une source ;
– Un élément à ouvrir : ici, ce sera le lien vers un site (Twitter, Facebook ou Google+).

Premiers paramètres auxquels nous allons nous intéresser, ce sont les suivants : « toolbar=no,resize=no,titlebar=no ». Ils permettent de définir les actions disponibles sur la popup : l’affichage de la barre d’outils, la possibilité de modifier la taille de la fenêtre etc. Ici, s’agissant d’une fenêtre popup « temporaire », nous n’avons pas d’intérêt à ce qu’elle possède tous les outils d’une fenêtre classique, du coup nous mettons tous les paramètres à no.

Les deux paramètres les plus intéressants sont les suivants : « width=700,height=380 ». Très simples à comprendre, ils permettent de modifier la taille de la popup. Mettez-y les tailles que vous voulez, mais pensez à ne pas les faire trop grandes (surtout pour ce qu’elles auront à afficher) histoire que les petits écrans ne s’y perdent pas.

Nous allons maintenant nous concentrer sur les trois boutons de droite en commençant par Twitter. Je vous donne de suite le code, on l’analysera ensuite :

<a href="javascript:PopupWindow(this, 'https://twitter.com/home?status=J\'aime un article sur <?php echo bloginfo('url'); ?> » <?php echo the_permalink(); ?>');" rel="nofollow">Twitter</a>

Comme vous le voyez, c’est extrêmement simple, dans le lien, on réalise un appel javascript de notre fonction PopupWindow auquel on donne en paramètre le lien Twitter à ouvrir.

Twitter nous permet d’écrire un statut directement dans la barre d’adresse via l’utilisation de status= »mon texte ». Pour que cela soit plus dynamique, nous allons lui passer des paramètres directement en php via deux fonctions WordPress. Libre à vous d’adapter bien entendu… Dans cet exemple (celui de ce site), nous lui passons le lien du blog et le lien de l’article.

On ajoute ensuite l’attribut rel= »nofollow » utile pour demander aux moteurs de recherche de ne pas suivre le lien (plus d’informations chez Google).

Testez donc et ho magie, ça marche (normalement…)

exemple

Passons maintenant à Facebook !

<a href="javascript:PopupWindow(this, 'https://www.facebook.com/share.php?u=<?php echo the_permalink(); ?>');" rel="nofollow">Facebook</a>

Pour Facebook, on va simplifier un petit peu la chose : techniquement ça marche comme pour Twitter, on a simplement changé « status » par « u ». Ensuite, on lui donne le lien à partager et le visiteur n’aura plus qu’à écrire ce qu’il veut sur l’article et partager. Vous devriez obtenir le résultat suivant :

exemple

Et pour Google+, vous savez quoi ? Toujours pareil… remplacez juste « status » ou « u » par « share?url » et vous obtiendrez ce code et cette preview :

<a href="javascript:PopupWindow(this, 'https://plus.google.com/share?url=<?php echo the_permalink(); ?>');" rel="nofollow">Google+</a>

Et visuellement vous obtiendrez ceci :

exemple

Et voila, avec ça vous avez déjà de quoi faire pas mal de choses. Et comme vous le voyez, ça ne prend pas plus de 10 lignes de code… Pourquoi s’en priver du coup ?

N’hésitez pas à tester ça avec cet article, vous verrez que ça fonctionne bien et vous me rendez heureux !

Envie de partager cet article ? Google+

Date de sortie : 7 avril 2013
Auteur : Bardyl
Consultations : 2942
Commentaires : 0
Catégorie : Développement

Bardyl, une histoire de pousin.

Poussin de son état, Mathieu Menut (alias Bardyl ou Bardylette suivant les lieux) est un simple passionné du Web depuis de nombreuses années. Mathieu aime tout ce qui attrait au développement, au graphisme, référencement... Il s'intéresse à plus ou moins tout et prône la généralisation des 35 heures par jour.

Twitter : @Bardylette / web : menutmathieu.fr