Ajouter des boutons de partage social de chargement paresseux à votre blog WordPress

Une des parties les plus communes et les plus importantes de chaque blog est une collection de boutons de médias sociaux, à savoir le bouton J'aime de Facebook, le bouton de tweet de Twitter, le bouton +1 de Google, etc. Chaque plateforme sociale ajoute un fichier JavaScript avec ses boutons. Cela signifie qu'une page de blog charge, il doit attendre les 300kb de médias sociaux. Cela bloque le rendu de la page, ce qui augmente le temps de chargement de la page. Pour résoudre ce problème, certains des très gros blogs ont mis au point certaines techniques permettant de charger les boutons de médias sociaux de manière asynchrone. Dans ce tutoriel, vous allez apprendre à ajouter ce bouton de partage social à "chargement paresseux" à votre blog WordPress..

Introduction:

Ces icônes utiliseront une bibliothèque JavaScript créée par David Bushell. Le magazine .Net a publié la grande question: faut-il laisser tomber les boutons des médias sociaux? avec des opinions et des anecdotes de divers professionnels. Cela l'a inspiré à leur répondre avec un bel extrait de code pratique.

Les widgets sociaux sont massif. Ce sont en réalité des sites Web supplémentaires situés dans de minuscules iframes et la plupart d'entre eux sont mal optimisés. Le bouton «J'aime» de Facebook est épouvantable. Ce problème ne peut pas être sous-estimé et j'ai développé Socialite.js pour exactement cette raison. Socialite diffère le chargement et fonctionne extrêmement bien. Cela ne réduit pas la quantité d'octets expédiés, mais laisse votre site Web se charger avant que le flux ne soit saturé avec des extras sociaux..
- David

Quelques mots sur Socialite

Socialite fournit un moyen très simple d'implémenter et d'activer une pléthore de boutons de partage social, à tout moment. Sur le chargement de document, sur le survol d'article, sur n'importe quel événement!

Si vous vendez votre âme, vous pouvez aussi bien le faire de manière asynchrone.
- David

Caractéristiques et avantages

Aucune dépendance à utiliser.
Charge des ressources externes uniquement en cas de besoin.
Moins de 5 Ko lorsque minified et compressé.
Défauts / substitutions plus accessibles et stylables.
Prise en charge de Twitter, Google+, Facebook, LinkedIn, Pinterest et Spotify.
Extensible avec d'autres réseaux sociaux.
Imite l'implémentation native lors de l'activation.
Pris en charge dans tous les navigateurs (à condition que les boutons soient).

Étape 1 Télécharger le code JavaScript

Roulons. La première étape consiste à télécharger le socialite.min.js fichier, que je vous recommande de charger dans votre pied de page. Téléchargez le package à partir de socialitejs.com, ouvrez-le et téléchargez le socialite.min.js déposer dans votre wp-content / themes / votre dossier-theme / js / dossier (si le js le dossier n'existe pas, créez-le d'abord).

Étape 2 Ajout du script au pied de page

Ajouter Socialite

Après avoir téléchargé le fichier JS dans le dossier de votre thème, ajoutez le code suivant à celui de votre thème. functions.php fichier.

 function wptuts_load_socialite () // Inscrire Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // lance maintenant la file d'attente Socialite wp_enqueue_script ('socialite') ; add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Initialiser Socialite

Maintenant, créez un nouveau fichier JS dans votre wp-content / themes / votre dossier-theme / js / dossier appelé wptuts-social.js et mettez le code suivant dedans.

 jQuery (document) .ready (function ($) $ ('. social-buttons'). one ('mouseenter', function () Socialite.load ($ (this) [0]);) ;

Maintenant, nous avons un deuxième fichier JS, nous devons modifier le code PHP que nous avons ajouté à notre functions.php fichier, donc il devrait maintenant ressembler à ce qui suit.

 function wptuts_load_socialite () // Inscrire Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Enregistrer le script d'initialisation social wp_register_script ('wptuts- social ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), ", true); // Maintenant en file d'attente Socialite wp_enqueue_script ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Quel est ce code?

Dans la première étape, vous avez téléchargé socialite.min.js dans le dossier de votre thème, après cela, dans la deuxième étape, vous avez inclus ce script dans le pied de page de votre thème. Ensuite, vous avez ajouté un petit code pour déclencher le bouton social sur le mouseenter propriété pour une classe spécifique, c’est-à-dire la classe de nos boutons sociaux est boutons sociaux, lorsque la souris entre dans cette classe ou vous pourriez dire quand quelqu'un survole la souris sur la boutons sociaux classe, les boutons de partage social se chargeront à ce moment.

Dans le code ci-dessus, cette ligne est responsable du déclenchement des boutons sociaux, vous pouvez changer sa classe (i.e. boutons sociaux) à tout autre que vous voulez.

 $ ('. social-buttons'). one ('mouseenter', function ()

Étape 3 Ajout du CSS

Nous discuterons de l’endroit où ajouter le HTML ultérieurement, ajoutons d’abord le CSS. Donc, nous sommes sur le point d'ajouter le CSS qui cachera le texte du bouton et montrera une image à leur place quand ils ne seront pas chargés. Vous êtes libre de modifier le code CSS en fonction de votre thème pour le distinguer des autres. David a codé le code CSS suivant.

Créez un nouveau fichier CSS appelé wptuts-social.css dans ton wp-content / themes / votre-dossier-theme / css / dossier (si le css le dossier n'existe pas, créez-le d'abord).

Puis ajoutez le code suivant dans le fichier.

 / * * Socialite Valeurs par défaut similaires * / .social-buttons display: block; style de liste: aucun; rembourrage: 0; marge: 20px;  .social-buttons> li display: block; marge: 0; rembourrage: 10px; float: gauche;  .social-buttons .socialite display: block; position: relative; background: url ('images_22 / add-lazy-loading-social-sharing-boutons-à-votre-wordpress-blog.png "data-original-url =" https://tuts-authors.s3.amazonaws.com/ wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png ') 0 0 no-repeat;  .social-buttons .socialite-Load background: none! important;  .social-buttons .twitter-share width: 55px; hauteur: 65px; position de fond: 0 0;  .social-buttons .googleplus-one width: 50px; hauteur: 65px; position d'arrière-plan: -75px 0;  .social-buttons .filebook-like width: 50px; hauteur: 65px; position d'arrière-plan: -145px 0;  .social-buttons .linkedin-share width: 60px; hauteur: 65px; position d'arrière-plan: -215px 0;  .vhidden border: 0; clip: rect (0 0 0 0); hauteur: 1px; marge: -1px; débordement caché; rembourrage: 0; position: absolue; largeur: 1px;

Revenons maintenant et modifions le code PHP que nous avons mis dans notre functions.php Fichier à nouveau pour charger le nouveau fichier CSS, comme suit.

 function wptuts_load_socialite () // Inscrire Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Enregistrer le script d'initialisation social wp_register_script ('wptuts- social ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), ", true); // Maintenant en file d'attente Socialite wp_enqueue_script ('wptuts-social'); // Enregistrer les CSS sociaux wp_register_style ('wptuts-social', get_template_directory_uri (). '/Css/wptuts-social.css'); // Maintenant en file d'attente social wp_enqueue_style ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Point à méditer

Assurez-vous de changer le chemin de l'image de l'image-objet sur votre propre serveur. Vous pouvez télécharger l'image ci-dessous et la télécharger sur votre blog, puis la remplacer à la ligne 7 dans le code CSS ci-dessus..

Étape 4 Balisage HTML

Voyons le code HTML pour ces boutons

  "data-url =""data-count =" vertical "data-via =" twitter-nom_utilisateur-ici ">Partager sur Twitter
 ">Partager sur Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Partager sur Facebook
 & title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Partager sur LinkedIn

Choses à faire ici:

Changement twitter-nom d'utilisateur-ici avec votre propre nom d'utilisateur Twitter dans le code ci-dessus.

Où ajouter ce code?

Ce code peut être ajouté à beaucoup d'endroits par beaucoup de méthodes. Laisse moi te donner quelques exemples

Vous pouvez ajouter ce code:

Ci-dessous le post méta dans votre single.php
Ci-dessous le contenu de votre single.php
Dans ton index.php dans la boucle, etc..

Étape 5 Ajout de HTML à WordPress

Méthode manuelle

Aller à votre wp-content / themes / votre-dossier-theme / dossier et ouvrez votre single.php fichier. Puis trouver le contenu, et vous trouverez un code comme celui-ci . Ajoutez le code HTML indiqué ci-dessous ou au-dessus.

Ajout avant un post

Aller à votre wp-content / themes / votre-dossier-theme / dossier et ouvrez votre functions.php fichier. Ajoutez le code ci-dessous à la fin:

 fonction social_before_the_content ($ content) $ custom_content = '  "data-url =""data-count =" vertical "data-via =" twitter-nom_utilisateur-ici ">Partager sur Twitter
 ">Partager sur Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Partager sur Facebook
 & title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Partager sur LinkedIn
 
 '; $ custom_content. = $ content; return $ custom_content;  add_filter ('le_contenu', 'social_avant_le_content');

Ajout après un post

Encore une fois, allez à votre wp-content / themes / votre-dossier-theme / dossier et ouvrez votre functions.php fichier. Ajoutez le code ci-dessous à la fin:

 function social_after_the_content ($ content) $ custom_content. = $ content; $ custom_content. = '  "data-url =""data-count =" vertical "data-via =" twitter-nom_utilisateur-ici ">Partager sur Twitter
 ">Partager sur Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Partager sur Facebook
 & title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Partager sur LinkedIn
 
 '; return $ custom_content;  add_filter ('the_content', 'social_after_the_content');

Captures d'écran

Jetons un coup d'oeil à ces boutons de partage social de chargement paresseux:

Avant de survoler

Voici à quoi ressemblent les icônes sociales lors du premier chargement de la page

Après le survol

Lorsque vous les survolez, les boutons chargent leurs fichiers pour qu'ils deviennent comme ci-dessous.

Mots finaux

Pointe: Soyez créatif, ne vous contentez pas de copier / coller le code ci-dessus et de le mettre sur votre blog, essayez de lui donner un nouveau look. Laisser couler le jus de la créativité!

Quelques exemples

Techcrunch
Mashable

Comment les utiliser?

Vous pouvez voir l'image ci-dessous de mon blog, comment je les utilise. (Inspiré par Mashable) (Live View)

Code