Trucs et astuces pour rendre votre WordPress plus social sans plugin

Dans cet article, je vous propose quelques astuces pour rendre votre site ou votre blog sous WordPress plus social sans avoir à installer des plugins, pour plus de rapidité et d’efficacité.

Affichez des boutons de partage sur votre site

Partage Facebook, Twitter et Google+

Facebook et Twitter

Si vous souhaitez afficher des boutons de partage Facebook et Twitter à la fin de vos articles, vous n’avez plus qu’à copier-coller ce bout de code dans votre fichier functions.php :

function share_this($content){
if(!is_feed() && !is_home()) {
$content .= '<div>
<a href="http://twitter.com/share"
class="twitter-share-button"
data-count="horizontal">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
<div>
<iframe
src="http://www.facebook.com/plugins/like.php?href='.
urlencode(get_permalink($post->ID))
.'&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;colorscheme=light&amp;height=21"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px; height:21px;"
allowTransparency="true"></iframe>
</div>
</div>';
}
return $content;
}
add_action('the_content', 'share_this');

Astuce trouvée sur wprecipes.com.

Google+

Pour Google+, il s’agit de faire la même manipulation, copier-coller ce bout de code dans votre fichier functions.php :

add_filter('the_content', 'wpr_google_plusone');
function wpr_google_plusone($content) {
$content = $content.'<div><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
return $content;
}
add_action ('wp_enqueue_scripts','wpr_google_plusone_script');
function wpr_google_plusone_script() {
wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}

Astuce trouvée sur spyrestudios.com.

Linkedin

Pour avoir un bouton de partage Linkedin, il faudra placer ce bout de code dans votre fichier single.php :

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<? the_permalink(); ?>" data-counter="top"></script>

Si vous souhaitez avoir votre bouton après l’affichage du contenu, vous devrez le placer après cette ligne : <?php the_content() ?>.

Astuce trouvée sur wpsnipp.com.

Pinterest

Si vous souhaitez un bouton de partage Pinterest « Pin it! », alors placez ce bout de code là où vous souhaitez avoir votre bouton :

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); if ( has_post_thumbnail() ) { ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; } ?>&description=<?php the_title(); ?>" count-layout="horizontal">Pin It</a>

Puis, vous devrez placer ce code dans votre fichier footer.php :

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Astuce trouvée sur marketingtechblog.com et éditée pour afficher une image uniquement si il existe une image à la une.

Affichez vos activités récentes

TwitterTwitter

Pour afficher vos derniers tweets sur votre site/blog WordPress, il existe une multitude de plugins le permettant mais cela n’est pas nécessaire. Ce bout de code suffit amplement :

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=webandseo'); // Remplacer webandseo par votre pseudo
$maxitems = $rss->get_item_quantity(3); // Remplacer $maxitems par le nombre maximum de tweets à afficher
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>Aucun tweet r&eacute;cent.</li>';
else
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>

Vous pourrez le placer où vous le souhaitez dans votre code. N’oubliez pas de changer le pseudo à la ligne 3 et le nombre maximum de tweets à afficher ligne 5, remplacez $maxitems par le nombre de tweets que vous souhaitez.

Astuce trouvée sur smashingmagazine.com.

Google+Google+

Idem que pour Twitter, si vous êtes un utilisateur de Google+ alors vous pourrez également afficher vos derniers posts en utilisant ce code :

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('http://plusfeed.appspot.com/116107055372625666045'); // Remplacer 116107055372625666045

if (!is_wp_error( $rss ) ) :
$maxitems = $rss->get_item_quantity(1); // Le nombre de mises à jour à afficher
$rss_items = $rss->get_items(0, $maxitems);
endif;

if ($maxitems == 0)
echo '<li>Aucune mise à jour récente.';
else
foreach ( $rss_items as $item ) :
?>
<a href="<?php echo esc_url( $item->get_permalink() ); ?>" title="<?php echo esc_html( $item->get_title() ); ?>">
<?php echo esc_html( $item->get_title() ); ?>
</a>
<?php
endforeach;
?>

A placer où vous le souhaitez dans le code, et n’oubliez pas de remplacer l’identifiant Google+ par le votre à la ligne 3 ! Vous pourrez également éditer le nombre maximum de posts à afficher à la ligne 6.

Astuce trouvée sur geekeries.fr.

Rendez votre contenu plus lisible pour les réseaux sociaux

Fonctionnement de l'Open Graph

Fonctionnement de l’Open Graph

Créé par Facebook, le protocole Open Graph permet de rendre le contenu de vos pages mieux lisible pour les réseaux sociaux. Peut-être avez-vous déjà remarqué que lorsqu’on partage des articles sur Facebook ou Google+ (en renseignant une URL ou en cliquant sur un bouton de partage), ceux-ci pouvaient avoir du mal à interpréter les informations, c’est parce certains sites sont difficilement lisibles pour les réseaux sociaux. Si vous rencontrez ce problème sur votre site/blog, voici la solution :

1. Coller ce code dans votre fichier functions.php :

<?php
function wptuts_opengraph_for_posts() {
if ( is_singular() ) {
global $post;
setup_postdata( $post );
$output = '<meta property="og:type" content="article" />' . "\n";
$output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
$output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
$output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
if ( has_post_thumbnail() ) {
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
$output .= '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
}
echo $output;
}
}
add_action( 'wp_head', 'wptuts_opengraph_for_posts' );
?>

2. Éditer votre balise <html> par ce code (dans header.php) :

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

Cet exemple vous permettra de renseigner le titre, l’extrait de l’article, son URL et l’image à la une. Si vous souhaitez en savoir plus sur l’Open Graph, rendez-vous sur le site officiel : ogp.me. Si vous utilisez déjà l’excellent plugin Jetpack (version 2.0 ou supérieure), vous n’aurez pas besoin de mettre en place ce code car sa fonctionnalité Publicize prend en compte l’Open Graph.

Astuce trouvée sur tutsplus.com.

Voila tout pour aujourd’hui, j’espère que ces quelques snippets pourront servir et rendre votre WordPress plus social, rapide et parlant pour les réseaux sociaux. Si vous aussi vous avez des snippets intéressants à partager, toujours liés aux réseaux sociaux, n’hésitez pas à les partager en commentaire !

Cet article vous a plu ? Faites-le savoir !

Les ressources Premium Wordpress indispensables :

  • CodeCanyon : la place de marché de plugins la plus importante
  • WP Rocket : plugin de cache permettant de booster les performances d'un site
  • OptinSkin : plugin d'opt-in permettant d'améliorer le taux de conversion, et d'augmenter le nombre d'abonnés et de partages sociaux
  • Social Locker : plugin permettant d'afficher un contenu verrouillé aux visiteurs contre un partage social
  • Easy Social Share Buttons : plugin de partage social complet, design et simple d'utilisation

Guide OFFERT : "Améliorez votre productivité en déléguant"
Trucs et astuces pour déléguer efficacement et développer son business

28 réactions instructives :

  1. 2 février 2013 à 4 h 29 min #

    Ben alors là chapeau bas, mois qui cherchais un plugin pour ajouter simplement FB Twitter et G+ en bas de mes articles et qui ne voulais pas une usine à gaz de plus dans mon wordpress, j’ai copié collé ton code et ça marche nickel.

    J’ai simplement modifié FB Twitter en enlevant un des et en le remplaçant par un   histoire que les 2 petits boutons ne soient pas l’un sous l’autre mais l’un a côté de l’autre.

    Tout fonctionne parfaitement et je te remercie pour ce partage bien utile, pour moi en tous cas (Y)

  2. 2 février 2013 à 4 h 44 min #

    Merci pour ces bouts de code. Je voudrais avoir ton avis sur la question. Quels sont tes arguments justifiant l’installation d’un plugin pour les réseaux sociaux et quels sont tes arguments contre ?

  3. 2 février 2013 à 4 h 47 min #

    Merci beaucoup max, pour toutes ses infos. C’est sympa ce que tu nous déniches, je vais sans plus tarder à mettre en pratique les astuces dans mon wordpress :)

    Tu as utilisé cette astuce dont tu nous parles pour ton blog « webandseo » ou pas?

  4. Maximilien Labadie
    2 février 2013 à 5 h 19 min #

    @Blograma Merci, ça fait plaisir que ce code t’ai servi ;)

    @InvestMan L’avantage d’utiliser un plugin, c’est que la mise en place est super rapide et la configuration également. Si tu souhaites ajouter/supprimer un bouton c’est très rapide. L’inconvénient, c’est que ça utilise plus de ressources que la mise en place des boutons dans le code.

    A l’inverse, insérer les boutons sociaux dans le code prend un peu plus de temps, pour les placer comme il faut, cela demande quelques petites connaissances en HTML/CSS, mais l’avantage est qu’il n’y a pas plus rapide à charger.

    @John Tu m’en diras des nouvelles ! Jusqu’à présent, j’utilise le plugin Async Social Sharing (pratique pour les feignants comme moi et très léger :D ), mais je ne vais pas tarder par le remplacer par un autre plugin premium qui remplira d’autres fonctions (plus de fonctionnalités et de l’A/B Testing), j’en ferai certainement un billet sur le blog dans un ou deux mois.

  5. Alain
    2 février 2013 à 10 h 45 min #

    Je dis bravo ! Effectivement le code nécessite quelques adaptations mineures pour aligner correctement les icones, mais c’est vraiment rien à faire et à l’arrivée c’est vraiment TOP. Je viens de le mettre en place sur mes deux blogs.
    Maximilien, un grand merci !

  6. 2 février 2013 à 22 h 17 min #

    Merci bien pour ces bouts de code , ça va m’éviter de rajouter encore et encore des plugins sociaux qui mine de rien bouffent pas mal de ressources.

    Bien sur pour avoir pour les placer ou l’on souhaite , un peu de css et ça fera l’affaire.

    Merci pour le partage.

    Au plaisir.

  7. anthony
    3 février 2013 à 0 h 46 min #

    « sans installer des plugins, pour plus de rapidité et d’efficacité » oui mais est ce que sa joue beaucoup sur la rapidité si on instalent un ou deux plugins qui rendent les choses beaucoup plus simple?!

  8. Maximilien Labadie
    3 février 2013 à 2 h 50 min #

    @Alain Super, merci pour ton retour :)

    @Anthony Certains plugins sont de vraies usines à gaz, alors oui tu peux très bien perdre une ou deux secondes. Un plugin comme Async Social Sharing est super léger mais multiplier l’utilisation de plugins ferra considérablement augmenter la vitesse de chargement, mieux vaut donc limiter.

  9. Harmony Com
    4 février 2013 à 11 h 16 min #

    Bonjour,
    Je suis très intéressée car justement mon blog est un peu long à charger, mais où faut-il intégrer ces codes au juste dans le fichier fonctions ? Ou ça n’a pas d’importance ?
    Merci

  10. 4 février 2013 à 14 h 41 min #

    Hello Maximilien, merci pour le partage :) C’est vrai que là, on est sur du super combo avec la possibilité de vraiment multi-diffuser son contenu !

    C’est vrai que de prime abord, tout ce code est un peu rébarbatif mais il n’y a vraiment que du copier/coller à faire donc trois fois rien, vraiment.

    Merci encore Maximilien pour le boulot effectué.

  11. Pierre
    4 février 2013 à 17 h 30 min #

    J’avais déjà mis des boutons mais je n’ai pas de partage, du coup je les ai supprimés parceque ça faisait quand même arbre de noël au niveau des boutons…

  12. 5 février 2013 à 8 h 17 min #

    Salut,
    Je ne suis pas contre me passer de plugins en échange de quelques bouts de code, surtout quand on sait que plus on en a des plugins, et plus ça plombe la vitesse d’un blog. Moi sur les miens, j’en ai déjà de trop lol ^^

  13. Pierre
    6 février 2013 à 10 h 03 min #

    Un bon rappel des snippets pour éviter d’avoir des plugins. Après moi j’aime bien les plugins car si il y a une mise à jour à faire dans les fonctions que tu donnes, pour les plugins en 1 clic c’est fait, alors que pour les fonctions il faut passer sur chaque site …

  14. fatima
    6 février 2013 à 12 h 47 min #

    Bonjour et merci pour ce code,
    Svp j’ai une question , j’ai bien ajouté les boutons facebook et twiter ,et ils sont ajouter ajouter à la fin de chaque articles ,mais j’aimerais aussi les ajouter dans les articles de ma page d’accueil , car il n’ont s’affiche pas , quelqu’un peux m’aider

  15. Cerbere
    7 février 2013 à 21 h 43 min #

    J’utilise toujours beaucoup trop de plugins et souvent d’ailleurs pour des fonctions relativement simples.
    Bref si je peux supprimer quelques plugins je me gêne pas. Merci à toi pour cet article.
    Le code pour afficher ses derniers messages en provenance de son compte google+ va me servir.

  16. adam
    12 février 2013 à 12 h 20 min #

    lol et bien j’aurai aimé que tu écrives ton article un peu plus tôt car j’y ai passé quelques heures le mois précédent !! :) merci

  17. 12 février 2013 à 14 h 52 min #

    Excellent article, avec de très bonnes astuces qui permettront d’éviter de recourir à des plugins pour rendre son blog social. Bon, il faudra tout de même mettre les mains dans le cambouis mais le jeu en vaut véritablement la chandelle. Outre la possibilité de pouvoir placer les boutons à sa guise, cela alourdira moins le poids des pages qu’avec une accumulation de plugins, ce qui est bénéfique à la fois en termes d’expérience utilisateur et de référencement.

    Encore merci ;)

  18. 12 février 2013 à 23 h 07 min #

    Merci pour ces petites astuces. Je suis un peu comme tout le monde, je vais toujours au plus simple et c’est clair qu’ajouter encore et toujours des plugin pour faire le job, il y a un moment où ça marche plus…
    Je me gardes donc cet article au chaud… Améliorer et surtout faciliter le partage d’article, c’est une des (nombreuses) choses que j’ai encore à faire.

  19. 27 février 2013 à 21 h 45 min #

    Bonjour,

    Je cherchais justement à éliminer des plugins pour gagner en vitesse de chargement sur mon site, alors vos astuces tombent à point nommé, merci.
    Est-ce que cela affiche tout-de-même le nombre de partages?

  20. 1 mars 2013 à 22 h 36 min #

    C’est fou comme le hasard fait bien les choses…, J’ai passé un bout de temps à essayer d’aligner correctement ces boutons de partage, avant de perdre patience et de me rabattre sur un plugin, pas in mal au demeurant (1-click Retweet/Share/Like) Mais voilà que je tombe sur ce billet! Cherchant à optimiser la vitesse d’affichage de mon site, je suis content de découvrir ces lignes de code. Je vais les tester au plus vite. Merci.

  21. 17 mars 2013 à 19 h 34 min #

    Personnellement, j’aime pas trop toucher au code source car j’ai de très mauvaises expériences avec des tutos soit disant “simples”… Donc je m’en tiens aux plugins pour le moment.. (Je peux changer d’avis après)

  22. 23 avril 2013 à 16 h 56 min #

    Un bout de code parfait pour moi aussi. Il est temps que j’allège un peu mon site même si je n’utilise que 8 plug-in dans l’absolu.
    Par contre ton plug social à droite, tu le trouves fiable ?
    Merci a toi :)

  23. BandC
    29 mai 2013 à 15 h 36 min #

    Bonjour
    Pourrai tu me dire quel plugin tu utilise pour montrer ton activité Facebook, Twitter et google+ .
    Je parle du plugin qui est sur le cote droit de ton site.
    Merci à toi et bravo pour ton blog très instructif.

  24. Lucho
    11 octobre 2013 à 17 h 49 min #

    Un petit tuto pour contrôler ce que vous partagez avec vos boutons sociaux: lestutosdelucho.fr/optimiser-son-site-wordpress-avec-facebook-opengraph.html
    N’hésitez pas à commenter et partager.

  25. 12 octobre 2013 à 20 h 25 min #

    Bonjour!

    Merci pour ce code!! C’est fabuleux!!! Je rencontre toutefois un petit problème sans doute simple à régler, peut-être pourrez-vous m’aider. Lorsque le lien est partager sur un fil FB, le llien de redirection n’est pas correct. Il affiche : -franceanne.hannicar.com/pourquoi-je-me-presente-a-la-mairie-de-saint-julien/?fb_action_ids=10151636485405683&fb_action_types=og.likes&fb_source=other_multiline&action_object_map=%7B%2210151636485405683%22%3A526488697428360%7D&action_type_map=%7B%2210151636485405683%22%3A%22og.likes%22%7D&action_ref_map=%5B%5D

    alors qu’il devrai mettre : -franceanne.hannicar.com/pourquoi-je-me-presente-a-la-mairie-de-saint-julien/

    Vous avez une idée ? Merci!!

  26. 8 juin 2014 à 9 h 12 min #

    Bonjour, je cherchais une solution pour éviter les plugins de boutons de réseaux sociaux sur WordPress, qui ralentissaient trop le chargement de ma page.

    Je suis tombé sur votre site et j’ai voulu mettre le « code de boutons de partage Facebook et Twitter » dans le fichier Function.PHP

    le problème c’est que j’ai surement fait une mauvaise manipulation, car depuis ce moment je ne PEUX PLUS DU TOUT ACCEDER A MON ESPACE ADMINISTRATEUR WORDPRESS…
    quant à mon site, il plante complètement.

    Je suis désespéré… comment récupérer l’accès à mon site et supprimer cette ligne de code du fichier Function.php ????????????

    • Maximilien Labadie
      11 juin 2014 à 15 h 43 min #

      Bonjour Sylvain,

      Cela signifie que tu as mal inséré le code sur la page functions.php depuis l’éditeur de WordPress. Pour corriger ce bug, tu dois :

      1) te connecter à ton FTP
      2) aller dans le dossier wp-content de ton thème
      3) télécharger le fichier functions.php sur ton ordi, l’ouvrir avec notepad++ (si possible)
      4) trouver l’erreur et la corriger
      5) uploader le fichier corrigé sur le FTP en remplaçant l’ancien

      Et normalement tout devrait rentrer dans l’ordre ! Si tu ne trouves pas l’erreur, rends toi sur le forum WordPress-fr, et présente le bout de code la où tu penses qu’il y a l’erreur.

  27. 16 juin 2014 à 15 h 53 min #

    Merci pour ces précisions, j’ai réussi entre temps à corriger l’erreur en passant par le FTP.

    Petite suggestion, préciser au début de l’article que le fichier functions.php peut faire planter complètement le site, je l’ignorais et je n’y aurais jamais touché si j’avais su ça (je suis un débutant complet en code HTML)

Laissez un commentaire :