Aggiungi pigri pulsanti di condivisione social sharing al tuo blog WordPress

Una delle parti più comuni e importanti di ogni blog è una raccolta di pulsanti di social media, ad esempio il pulsante Mi piace di Facebook, il pulsante tweet di Twitter, il pulsante +1 di Google ecc. Ogni piattaforma social aggiunge un file JavaScript con i suoi pulsanti, questo significa quando una pagina del blog carica deve aspettare i 300kb dei social media. Si blocca il rendering della pagina che si traduce in un aumento del tempo di caricamento della pagina. Per risolvere questo problema alcuni dei blog più grandi hanno escogitato alcune tecniche attraverso le quali i pulsanti dei social media possono essere caricati in modo asincrono. In questo tutorial imparerai come aggiungere questi pulsanti di condivisione social "lazy loading" al tuo blog WordPress.

Introduzione:

Queste icone utilizzeranno una libreria JavaScript creata da David Bushell. La rivista .Net ha pubblicato la Grande domanda: dovremmo eliminare i pulsanti dei social media? con opinioni e aneddoti di vari professionisti. Questo lo ha spinto a rispondere con un simpatico snippet di codice a portata di mano.

I widget sociali sono massiccio. Sono efficacemente siti web aggiuntivi, incapsulati in piccoli iframe e la maggior parte sono scarsamente ottimizzati. Il pulsante "mi piace" di Facebook è spaventoso. Questo problema non può essere sottovalutato e ho sviluppato Socialite.js proprio per questa ragione. Socialite rinvia il caricamento e funziona molto bene. Non riduce la quantità di byte che vengono spediti, ma fa caricare il tuo sito web prima che il flusso sia saturo di extra sociali.
- David

Alcune parole su Socialite

Socialite fornisce un modo molto semplice per implementare e attivare una pletora di pulsanti di condivisione sociale, ogni volta che lo desideri. Sul carico del documento, sull'articolo al passaggio del mouse, su qualsiasi evento!

Se vendi la tua anima, puoi farlo in modo asincrono.
- David

Caratteristiche e vantaggi

Nessuna dipendenza da usare.
Carica le risorse esterne solo quando necessario.
Meno di 5kb quando è ridotto e compresso.
Impostazioni predefinite e fallback più accessibili e modificabili.
Supporto per Twitter, Google+, Facebook, LinkedIn, Pinterest e Spotify.
Estensibile con altri social network.
Imita l'implementazione nativa quando attivata.
Supportato in tutti i browser (a condizione che i pulsanti siano).

Passaggio 1 Caricamento del codice JavaScript

Diamoci dentro. Il primo passo è caricare il file socialite.min.js file, che consiglio di caricare nel footer. Scarica il pacchetto da socialitejs.com, aprilo e carica il file socialite.min.js file al tuo wp-content / themes / vostro-theme-cartella / js / cartella (se il js la cartella non esiste, creala prima).

Passaggio 2 Aggiunta dello script al piè di pagina

Aggiungi socialite

Dopo aver caricato il file JS nella cartella del tema, aggiungi il codice seguente nel tema functions.php file.

 function wptuts_load_socialite () // Registra socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Ora accendi Socialite wp_enqueue_script ('socialite') ; add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Inizializza socialite

Ora crea un nuovo file JS nel tuo wp-content / themes / vostro-theme-cartella / js / cartella chiamata wptuts-social.js e inserire il seguente codice in esso.

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

Ora abbiamo un secondo file JS, abbiamo bisogno di modificare il codice PHP che abbiamo aggiunto al nostro functions.php file, quindi dovrebbe apparire come il seguente.

 function wptuts_load_socialite () // Registra socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Registra lo script di inizializzazione sociale wp_register_script ('wptuts- social ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), ", true); // Ora accodare Socialite wp_enqueue_script ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Cos'è questo codice?

Nel primo passaggio che hai caricato socialite.min.js alla cartella del tuo tema, dopo di che nel secondo passo hai inserito lo script nel piè di pagina del tuo tema. Poi hai aggiunto un piccolo codice per attivare il pulsante social sul MouseEnter proprietà per una classe specifica, ad esempio la classe dei nostri pulsanti social sociali bottoni, quando il mouse entra in quella classe o si potrebbe dire quando si passa il mouse sopra il mouse sociali bottoni classe, i pulsanti di condivisione social si caricheranno proprio in quel momento.

Nel codice sopra questa linea è responsabile per l'attivazione dei pulsanti social, puoi cambiare la sua classe (es. sociali bottoni) a qualsiasi altro tu voglia.

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

Passaggio 3 Aggiunta del CSS

Discuteremo dove aggiungere HTML in seguito, aggiungiamo prima il CSS. Quindi, stiamo per aggiungere il CSS che nasconderà il testo del pulsante e mostrerà un'immagine al posto di loro quando non sono caricati. Sei libero di modificare il CSS per adattarlo al tuo tema, in questo modo ti distinguerà dagli altri. David ha codificato il seguente CSS.

Crea un nuovo file CSS chiamato wptuts-social.css nel tuo wp-content / themes / vostro-theme-cartella / css / cartella (se il css la cartella non esiste, creala prima).

Quindi aggiungere il seguente codice nel file.

 / * * Impostazioni predefinite Socialite Look * / .social-buttons display: block; stile elenco: nessuno; padding: 0; margine: 20px;  .social-buttons> li display: block; margine: 0; imbottitura: 10px; fluttuare: a sinistra;  .social-buttons .socialite display: block; posizione: relativa; background: 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 nessuna ripetizione;  .social-buttons .socialite-loaded background: none! important;  .social-buttons .twitter-share width: 55px; altezza: 65 px; background-position: 0 0;  .social-buttons .googleplus-one width: 50px; altezza: 65 px; background-position: -75px 0;  .social-buttons .facebook-like width: 50px; altezza: 65 px; background-position: -145px 0;  .social-buttons .linkedin-share width: 60px; altezza: 65 px; background-position: -215px 0;  .vhidden border: 0; clip: rect (0 0 0 0); altezza: 1px; margine: -1px; overflow: nascosto; padding: 0; posizione: assoluta; larghezza: 1px;

Ora torniamo indietro e modifichiamo il codice PHP che inseriamo nel nostro functions.php file di nuovo per caricare il nuovo file CSS, come segue.

 function wptuts_load_socialite () // Registra socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), ", true); // Registra lo script di inizializzazione sociale wp_register_script ('wptuts- social ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), ", true); // Ora accodare Socialite wp_enqueue_script ('wptuts-social'); // Registra social CSS wp_register_style ('wptuts-social', get_template_directory_uri (). '/Css/wptuts-social.css'); // Ora accodare social wp_enqueue_style ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Punto su cui riflettere

Assicurati di cambiare il percorso dell'immagine sprite sul tuo server. Puoi scaricare l'immagine qui sotto e caricarla sul tuo blog e poi scambiare la sua posizione alla riga n. 7 del codice CSS precedente.

Passaggio 4 HTML Markup

Vediamo il codice HTML per questi pulsanti

  "data-url =""data-count =" vertical "data-via =" twitter-username-here ">Condividi su Twitter
 ">Condividi su Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Condividi su Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""contatore dati =" top ">Condividi su LinkedIn

Cose da fare qui:

Modificare Twitter-username-here con il tuo nome utente Twitter nel codice sopra.

Dove aggiungere questo codice?

Questo codice può essere aggiunto a molti posti con molti metodi. Lasciatemi fare alcuni esempi

Puoi aggiungere questo codice:

Sotto il post meta nel tuo single.php
Di seguito il contenuto nel tuo single.php
Nel tuo index.php all'interno del ciclo ecc.

Passaggio 5 Aggiunta di HTML a WordPress

Metodo manuale

Vai al tuo wp-content / themes / vostro-theme-cartella / cartella e apri il tuo single.php file. Quindi trova il contenuto, e troverai del codice come questo . Aggiungi il codice HTML mostrato sotto o sopra di esso.

Aggiunta prima di un post

Vai al tuo wp-content / themes / vostro-theme-cartella / cartella e apri il tuo functions.php file. Aggiungi il seguente codice alla fine:

 function social_before_the_content ($ content) $ custom_content = '  "data-url =""data-count =" vertical "data-via =" twitter-username-here ">Condividi su Twitter
 ">Condividi su Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Condividi su Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""contatore dati =" top ">Condividi su LinkedIn
 
 '; $ custom_content. = $ contenuto; return $ custom_content;  add_filter ('the_content', 'social_before_the_content');

Aggiunta dopo un post

Di nuovo vai al tuo wp-content / themes / vostro-theme-cartella / cartella e apri il tuo functions.php file. Aggiungi il seguente codice alla fine:

 funzione social_after_the_content ($ content) $ custom_content. = $ content; $ custom_content. = '  "data-url =""data-count =" vertical "data-via =" twitter-username-here ">Condividi su Twitter
 ">Condividi su Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Condividi su Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""contatore dati =" top ">Condividi su LinkedIn
 
 '; return $ custom_content;  add_filter ('the_content', 'social_after_the_content');

Screenshots

Diamo un'occhiata a questi pigri pulsanti di social sharing che caricano:

Prima di Hover

Ecco come appaiono le icone sociali quando viene caricata la pagina

Dopo Hover

Quando passi il mouse sopra di loro, i pulsanti caricano i loro file per diventare come mostrato di seguito

Parole finali

Mancia: Sii creativo, non limitarti a copiare / incollare il codice sopra e metterlo sul tuo blog, prova a dargli un nuovo look. Lascia scorrere il flusso creativo!

Qualche esempio

Techcrunch
Mashable

Come posso usarli?

Puoi vedere l'immagine qui sotto dal mio blog, come li uso. (Ispirato da Mashable) (Live View)

Codice