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é.
Afficher des boutons de partage
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="https://platform.twitter.com/widgets.js"></script>
<div>
<iframe
src="https://www.facebook.com/plugins/like.php?href='.
urlencode(get_permalink($post->ID))
.'&layout=button_count&show_faces=false&width=200&action=like&colorscheme=light&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.
Pour avoir un bouton de partage Linkedin, il faudra placer ce bout de code dans votre fichier single.php :
<script type="text/javascript" src="https://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.
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="https://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.
Afficher ses activités récentes
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é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.
Rendre son contenu plus lisible
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 (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à le plugin Jetpack, 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 !
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)
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 ?
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?
@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 😀 ), 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.
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 !
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.
« 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?!
@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.
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
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é.
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…
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 ^^
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 …
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
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.
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
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 😉
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.
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?
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.
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)
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 🙂
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.
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.
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!!
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 ????????????
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.
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)
Personnellement, je trouve ça plus simple d’installer un plugin ou encore mieux d’installer un thème qui propose directement des boutons de partage vers les réseaux sociaux.