Voeg Lazy Social Sharing Buttons-knoppen toe aan je WordPress-blog

Een van de meest voorkomende en belangrijke onderdelen van elk blog is een verzameling sociale mediaknoppen, bijvoorbeeld de Facebook-knop Leuk, de tweetknop van Twitter, de +1-knop van Google, enz. Elk sociaal platform voegt een JavaScript-bestand toe met de bijbehorende knoppen, dit betekent wanneer een blogpagina laadt het moet wachten op de 300kb aan sociale media. Hierdoor blijft de weergave van de pagina hangen, wat leidt tot een langere laadtijd van de pagina. Om dit probleem op te lossen, hebben enkele van de echt grote blogs bepaalde technieken bedacht waarmee de knoppen voor sociale media asynchroon kunnen worden geladen. In deze tutorial leer je hoe je deze "luie ladende" social sharing-knoppen toevoegt aan je WordPress-blog.

Invoering:

Deze pictogrammen maken gebruik van een JavaScript-bibliotheek gemaakt door David Bushell. .Net magazine publiceerde de grote vraag: moeten we sociale mediaknoppen laten vallen? met meningen en anekdotes van verschillende professionals. Dit inspireerde hem om ze te beantwoorden met een leuk handig codefragment.

Sociale widgets zijn massief. Het zijn in feite extra websites die zijn ingesloten in kleine iframes en de meeste zijn slecht geoptimaliseerd. Facebook's "like" -knop is verschrikkelijk. Dit probleem kan niet worden onderschat en ik heb het ontwikkeld Socialite.js om precies die reden. Socialite verlaagt laden en werkt buitengewoon goed. Het vermindert niet het aantal bytes dat wordt verzonden, maar het laat uw website wel eerst laden voordat de stream verzadigd is met sociale extra's.
- David

Sommige woorden over Socialite

Socialite biedt een zeer eenvoudige manier om een overvloed aan knoppen voor sociaal delen te implementeren en activeren - wanneer je maar wilt. Over het laden van documenten, over artikelbewegingen, over elk evenement!

Als je je ziel verkoopt, kun je het net zo goed asynchroon doen.
- David

Kenmerken en voordelen

Geen afhankelijkheden om te gebruiken.
Laad externe bronnen alleen als dat nodig is.
Minder dan 5 kB wanneer verkleind en gecomprimeerd.
Meer toegankelijke en styleable standaardinstellingen / fallbacks.
Ondersteuning voor Twitter, Google+, Facebook, LinkedIn, Pinterest en Spotify.
Uit te breiden met andere sociale netwerken.
Bootst de eigen implementatie na als deze is geactiveerd.
Ondersteund in alle browsers (mits de knoppen zijn).

Stap 1 Het uploaden van de JavaScript

Laten we gaan. De eerste stap is het uploaden van de socialite.min.js bestand, dat ik u aanraad om in uw voettekst te laden. Download het pakket van socialitejs.com, open het en upload het socialite.min.js bestand naar uw wp-content / themes / your-theme-map / js / map (als de js map bestaat niet, maak deze eerst aan).

Stap 2 Het script toevoegen aan de voettekst

Voeg Socialite toe

Na het uploaden van het JS-bestand naar de map van uw thema, voegt u de volgende code toe aan uw thema's functions.php het dossier.

 function wptuts_load_socialite () // Registreer Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Nuque socialite wp_enqueue_script ('socialite') inruilen ; add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Initialiseer Socialite

Maak nu een nieuw JS-bestand in uw wp-content / themes / your-theme-map / js / map genoemd wptuts-social.js en plaats de volgende code erin.

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

Nu hebben we een tweede JS-bestand, we moeten de PHP-code die we aan ons hebben toegevoegd, wijzigen functions.php bestand, zodat het er nu als volgt uitziet.

 functie wptuts_load_socialite () // Registreer Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Social initialiseerscript registreren wp_register_script ('wptuts- sociaal ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), ", true); // Socialiseer nu Socialite wp_enqueue_script ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Wat is deze code?

In de eerste stap die je hebt geüpload socialite.min.js naar de map van uw thema, daarna heeft u in de tweede stap dat script opgenomen in het voettekst van uw thema. Vervolgens heb je een kleine code toegevoegd om de sociale knop op de MouseEnter eigenschap voor een specifieke klasse, dat wil zeggen de klasse van onze sociale knoppen is sociaal-knoppen, wanneer de muis die klasse binnengaat of je zou kunnen zeggen wanneer iemand met de muis over de muis beweegt sociaal-knoppen klasse, de knoppen voor sociaal delen worden op dat moment geladen.

In de bovenstaande code is deze regel verantwoordelijk voor het activeren van de sociale knoppen, kunt u de klasse ervan wijzigen (d.w.z.. sociaal-knoppen) naar een andere die u wilt.

 $ ('. sociale-knoppen'). een ('mouseenter', function ()

Stap 3 Toevoegen van de CSS

We zullen bespreken waar de HTML later moet worden toegevoegd, laten we eerst de CSS toevoegen. Dus we staan op het punt om de CSS toe te voegen die de tekst van de knop zal verbergen en een afbeelding in plaats daarvan zal tonen wanneer ze niet zijn geladen. Je bent vrij om de CSS aan te passen aan jouw thema, op die manier zal het je laten opvallen van anderen. David heeft de volgende CSS gecodeerd.

Maak een nieuw CSS-bestand met de naam wptuts-social.css in uw wp-content / themes / your-theme-map / css / map (als de css map bestaat niet, maak deze eerst aan).

Voeg vervolgens de volgende code toe aan het bestand.

 / * * Socialite-look-achtige standaard * / .social-knoppen display: block; lijststijl: geen; opvulling: 0; marge: 20px;  .social-knoppen> li display: block; marge: 0; opvulling: 10px; zweven: links;  .social-buttons .socialite display: block; positie: relatief; achtergrond: url ('images_22 / add-lazy-loading-social-sharing-buttons-to-your-wordpress-blog.png "data-original-url =" https://tuts-authors.s3.amazonaws.com/ wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png ') 0 0 niet herhaald;  .social-buttons .socialite-loaded background: none! important;  .social-buttons .twitter-share width: 55px; hoogte: 65 px; achtergrondpositie: 0 0;  .social-buttons .googleplus-one width: 50px; hoogte: 65 px; achtergrond-positie: -75px 0;  .social-buttons .facebook-like width: 50px; hoogte: 65 px; achtergrondpositie: -145 px 0;  .social-buttons .linkedin-share width: 60px; hoogte: 65 px; achtergrondpositie: -215 px 0;  .vhidden border: 0; clip: rect (0 0 0 0); hoogte: 1px; marge: -1px; overloop verborgen; opvulling: 0; positie: absoluut; breedte: 1px;

Laten we nu teruggaan en de PHP-code die we in onze hebben geplaatst, wijzigen functions.php bestand opnieuw om het nieuwe CSS-bestand als volgt te laden.

 functie wptuts_load_socialite () // Registreer Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Social initialiseerscript registreren wp_register_script ('wptuts- sociaal ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), ", true); // Socialiseer nu Socialite wp_enqueue_script ('wptuts-social'); // Registreer sociale CSS wp_register_style ('wptuts-social', get_template_directory_uri (). '/Css/wptuts-social.css'); // Nu wacht sociale wp_enqueue_style ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Point to Ponder

Zorg ervoor dat u het sprite-afbeeldingspad naar uw eigen server wijzigt. Je kunt de onderstaande afbeelding downloaden en deze uploaden naar je blog en vervolgens de locatie omwisselen op regel # 7 in de bovenstaande CSS-code.

Stap 4 HTML-markering

Laten we de HTML-code voor deze knoppen bekijken

  "data-url =""data-count =" vertical "data-via =" twitter-gebruikersnaam-here ">Delen op Twitter
 ">Deel op Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Delen op Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Deel op LinkedIn

Dingen om hier te doen:

Verandering twitter-gebruikersnaam-here met je eigen Twitter-gebruikersnaam in de bovenstaande code.

Waar deze code toe te voegen?

Deze code kan op veel plaatsen door veel methoden worden toegevoegd. Ik zal u een paar voorbeelden geven

U kunt deze code toevoegen:

Onder de bericht-meta in uw single.php
Onder de inhoud in uw single.php
In uw index.php in de lus enz.

Stap 5 HTML toevoegen aan WordPress

Handmatige methode

Ga naar je wp-content / themes / your-theme-map / map en open uw single.php het dossier. Zoek dan de inhoud, en je zult een code als deze vinden . Voeg de HTML-code toe die hieronder of erboven wordt weergegeven.

Vóór een bericht toevoegen

Ga naar je wp-content / themes / your-theme-map / map en open uw functions.php het dossier. Voeg de onderstaande code aan het einde toe:

 function social_before_the_content ($ content) $ custom_content = '  "data-url =""data-count =" vertical "data-via =" twitter-gebruikersnaam-here ">Delen op Twitter
 ">Deel op Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Delen op Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Deel op LinkedIn
 
 '; $ custom_content. = $ inhoud; return $ custom_content;  add_filter ('the_content', 'social_before_the_content');

Toevoegen na een bericht

Nogmaals Ga naar uw wp-content / themes / your-theme-map / map en open uw functions.php het dossier. Voeg de onderstaande code aan het einde toe:

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

screenshots

Laten we deze luie social sharing-knoppen voor het laden bekijken:

Voor Zweven

Dit is hoe de sociale pictogrammen eruit zien wanneer de pagina voor het eerst wordt geladen

After Hover

Wanneer u eroverheen beweegt, laden de knoppen hun bestanden zodat ze worden zoals hieronder wordt weergegeven

Laatste woorden

Tip: Wees creatief, kopieer en plak de bovenstaande code niet en plaats deze niet op je blog, probeer hem een nieuwe look te geven. Laat de creatieve sappen stromen!

Een paar voorbeelden

Techcrunch
Mashable

Hoe gebruik ik ze?

Je kunt de afbeelding hieronder zien op mijn blog, hoe ik ze gebruik. (Geïnspireerd door Mashable) (Live View)

Code