Come aggiungere pulsanti di condivisione come sovrapposizione su video di YouTube in WordPress

I video sono uno dei modi migliori per aumentare il coinvolgimento degli utenti. Recentemente uno dei nostri utenti ci ha chiesto un modo per creare sovrapposizioni di pulsanti di condivisione su video simili al popolare sito UpWorthy. In questo articolo, ti mostreremo come aggiungere pulsanti di condivisione come sovrapposizione sui video di YouTube in WordPress.

Esempio di come sarebbe:

Aggiunta di pulsanti di condivisione come sovrapposizione nei video di YouTube

C'erano molti modi in cui ciò poteva essere fatto. La maggior parte dei modi richiede di incollare un bit di codice HTML ogni volta che aggiungi un video. Invece di farlo, abbiamo deciso di creare uno shortcode che automatizzasse questo effetto di sovrapposizione.

Basta copiare e incollare il seguente codice in un plug-in specifico del sito o il file functions.php del tuo tema:

 /// I pulsanti di overlay della condivisione YouTube di WPBeginner funzionano con wpb_yt_buttons ($ atts) // Ottieni l'ID del video dall'estratto di shortcode (shortcode_atts (array ('video' => "), $ atts)) // Visualizza video $ string = ' '; // Aggiungi il pulsante di condivisione di Facebook $ string. =' Facebook
'; // Aggiungi il pulsante Tweet $ string. = 'Tweet
'; // Chiudi contenitore video $ string. = ''; // Restituisce l'output restituisce $ string;  // Aggiungi Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Questo codice crea uno shortcode che aggiunge automaticamente i link di condivisione di Twitter e Facebook ai tuoi video. Questi pulsanti sono visibili solo quando l'utente porta il mouse sul video. Puoi usarlo per aggiungere qualsiasi altro canale di social media.

Per utilizzare questo shortcode, tutto ciò che devi fare è aggiungere l'ID video di YouTube nel shortcode come questo:

[wpb-yt video = "qzOOy1tWBCg"]

Puoi ottenere l'ID video di YouTube dalla stringa dell'URL. Come questo:

Ora quando aggiungi un video, sarai in grado di vedere i tuoi video di YouTube e i link di testo in chiaro per condividere il video su Facebook o Twitter. Noterai che questi collegamenti non sono per niente stilizzati.

Quindi lascia lo stile di questi collegamenti per creare pulsanti, quindi sembra un po 'più bello. Nascondiamo anche questi pulsanti e li facciamo apparire solo quando un utente porta il mouse sul contenitore del video. Per fare ciò aggiungi il seguente CSS al foglio di stile del tema del tuo bambino.

 # share-video-overlay position: relativo; a destra: 40px; top: -190px; list-style-type: none; blocco di visualizzazione; opacità: 0; filtro: alfa (opacità = 0); -webkit-transition: opacity .4s, top .25s; -moz-transition: opacity .4s, top .25s; -o-transizione: opacità .4s, top .25s; transizione: opacità .4s, top .25s; z-index: 500;  # share-video-overlay: hover opacity: 1; Filtro: alpha (opacità = 100);  .share-video-overlay li margin: 5px 0px 5px 0px;  #facebook color: #ffffff; background-color: # 3e5ea1; larghezza: 70 px; imbottitura: 5px;  .facebook a: link, .facebook a: active, .facebook a: visited color: #fff; text-decoration: none;  #twitter background-color: # 00a6d4; larghezza: 70 px; imbottitura: 5px;  .twitter a, .twitter a: link, .twitter a: active, .twitter a: visited, .twitter a: hover color: #FFF; text-decoration: none;

È tutto. Ora dovresti avere pulsanti di condivisione sovrapposti sui tuoi video di YouTube in WordPress.

Aggiunta di pulsanti di condivisione come sovrapposizione per playlist video di YouTube in WordPress

Dopo aver pubblicato questo articolo, molti dei nostri lettori hanno chiesto come questo codice possa essere modificato per funzionare sia per le playlist di YouTube sia per i video. Se incorpori i video di YouTube e le playlist sul tuo sito WordPress, dovresti utilizzare questo codice.

 / * * Pulsanti di sovrapposizione di condivisione di WPBeginner * su video e playlist di YouTube * / funzione wpb_yt_buttons ($ atts) // Ottieni gli ID di video e playlist dall'estratto di shortcode (shortcode_atts (array ('video' => ", 'playlist' => ",), $ atts)); // Controlla se un ID della playlist è fornito con shortcode if (! $ Playlist == "): // Mostra playlist video $ string = ''; // Aggiungi il pulsante Facebook $ string. = 'Facebook
'; // Aggiungi il pulsante Twitter $ string. = 'Tweet
'; // Chiudi contenitore video $ string. = ''; // Se non viene fornito nessun ID della playlist: // Visualizza video $ string. = ''; // Aggiungi il pulsante Facebook $ string. = ' Facebook
'; // Aggiungi il pulsante Twitter $ string. = 'Tweet
'; // Chiudi contenitore video $ string. = ''; finisci se; // Restituisce l'output restituisce $ string;  // Aggiungi shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Utilizzando il codice sopra puoi anche aggiungere una playlist con pulsanti di condivisione sovrapposti. Per visualizzare la tua playlist dovrai fornire l'ID del video e l'ID della playlist nel shortcode come questo:

[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]

Puoi ottenere i tuoi ID di video e playlist visitando la playlist su YouTube e copiando l'ID dell'elenco dall'URL, in questo modo:

Aggiunta di WordPress Post Link nel pulsante Condividi Overlay su video di YouTube

Dopo aver pubblicato questo articolo, alcuni dei nostri utenti hanno chiesto loro di gradire i pulsanti di condivisione per condividere il link del loro post WordPress al posto del collegamento video di YouTube. Per fare ciò è necessario sostituire l'URL del video nei pulsanti di condivisione con il permalink del post di WordPress. Usa questo codice nel tuo functions.php o plugin specifico del sito:

 /// I pulsanti di overlay della condivisione YouTube di WPBeginner funzionano con wpb_yt_buttons ($ atts) // Ottieni l'ID del video dall'estratto di shortcode (shortcode_atts (array ('video' => "), $ atts)) // Visualizza video $ string = ' '; // Ottieni post permalink e codifica URL $ permalink_encoded = urlencode (get_permalink ()); // Aggiungi pulsante di condivisione Facebook $ string. =' Facebook
'; // Aggiungi il pulsante Tweet $ string. = 'Tweet
'; // Chiudi contenitore video $ string. = ''; // Restituisce l'output restituisce $ string;  // Aggiungi Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Sentiti libero di modificare i CSS o gli snippet di shortcode per soddisfare le tue esigenze. Per ottimizzare ulteriormente i tuoi video, puoi rendere i tuoi video di YouTube reattivi utilizzando il plugin jQuery di FitVids. Puoi anche disattivare i video correlati visualizzati alla fine del video. o persino creare immagini in primo piano dalle miniature dei video di YouTube.

Speriamo che questo articolo ti abbia aiutato ad aggiungere pulsanti di condivisione personalizzati come sovrapposizione nei video di YouTube in WordPress. Facci sapere quali canali di social media hai intenzione di aggiungere ai tuoi video lasciando un commento qui sotto.

« Come aggiungere domande di sicurezza alla schermata di accesso di WordPress Come aggiungere la voce di menu Shortlink nella barra di amministrazione di WordPress »