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 overlay di pulsanti di condivisione sui video simili al popolare sito UpWorthy. In questo articolo, ti mostreremo come aggiungere pulsanti di condivisione come overlay sui video di YouTube in WordPress.
Esempio di come apparirebbe:
Aggiungere pulsanti di condivisione come overlay sui video di YouTube
C'erano diversi modi per farlo. La maggior parte dei modi richiederebbe di incollare pezzi di codice HTML ogni volta che si aggiunge un video. Invece di farlo, abbiamo deciso di creare uno shortcode che automatizzasse questo effetto overlay.
Copia e incolla semplicemente il seguente codice in un plugin specifico per il sito o nel file functions.php del tuo tema:
/// WPBeginner's YouTube Share Overlay Buttons
function wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
'video' => ''
), $atts ) );
// Display video
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook share button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank">
Facebook</a></li>';
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Questo codice crea uno shortcode che aggiunge automaticamente collegamenti di condivisione Twitter e Facebook ai tuoi video. Questi pulsanti sono visibili solo quando l'utente sposta il mouse sul video. Puoi usarlo anche per aggiungere qualsiasi altro canale di social media.
Per utilizzare questo shortcode, tutto ciò che dovrai fare è aggiungere l'ID del video di YouTube nello shortcode in questo modo:
[wpb-yt video="qzOOy1tWBCg"]
Puoi ottenere l'ID del video di YouTube dalla stringa dell'URL. Come questo:
Ora, quando aggiungi un video, sarai in grado di vedere il tuo video di YouTube e collegamenti di testo semplice per condividere il video su Facebook o Twitter. Noterai che questi collegamenti non sono affatto stilizzati.
Quindi stilizziamo questi link per creare pulsanti, in modo che sembrino un po' più carini. Nasconderemo anche questi pulsanti e li faremo apparire solo quando un utente posiziona il mouse sul contenitore del video. Per fare ciò, aggiungi il seguente CSS al foglio di stile del tuo Tema figlio.
#share-video-overlay {
position: relative;
right: 40px;
top: -190px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
Tutto qui. Ora dovresti avere i pulsanti di condivisione sovrapposti ai tuoi video di YouTube in WordPress.
Aggiungere 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 potesse essere modificato per funzionare anche per le playlist di YouTube oltre che per i video. Se incorpori video di YouTube e playlist sul tuo sito WordPress, allora dovresti usare questo codice invece.
/*
* WPBeginner's Share Overlay Buttons
* on YouTube Videos and Playlists
*/
function wpb_yt_buttons($atts) {
// Get the video and playlist ids from shortcode
extract( shortcode_atts( array(
'video' => '',
'playlist' => '',
), $atts ) );
// Check to see if a playlist id is provided with shortcode
if (!$playlist == '' ) :
// Display video playlist
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '?list=' . $playlist . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '" target="_blank">Facebook</a></li>';
// Add Twitter button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// If no playlist ID is provided
else :
//Display video
$string .= '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank">
Facebook</a></li>';
// Add Twitter button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
endif;
// Return output
return $string;
}
// Add shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Usando 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 nello shortcode in questo modo:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Puoi ottenere gli ID dei tuoi video e delle tue playlist visitando la playlist su YouTube e copiando l'ID della lista dall'URL, in questo modo:
Aggiungere il link del post di WordPress nel pulsante di condivisione sovrapposto ai video di YouTube
Dopo aver pubblicato questo articolo, alcuni dei nostri utenti hanno chiesto che i pulsanti di condivisione condividessero il link del loro post di WordPress invece del link del video di YouTube. Per fare ciò, devi 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 per il sito:
/// WPBeginner's YouTube Share Overlay Buttons
function wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
'video' => ''
), $atts ) );
// Display video
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Get post permalink and encode URL
$permalink_encoded = urlencode(get_permalink());
// Add Facebook share button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u='. $permalink_encoded .'" target="_blank">
Facebook</a></li>';
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url='. $permalink_encoded .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Sentiti libero di modificare gli snippet CSS o shortcode per soddisfare le tue esigenze. Per ottimizzare ulteriormente i tuoi video, puoi rendere i tuoi video di YouTube responsive utilizzando il plugin jQuery FitVids. Puoi anche disattivare i video correlati che appaiono alla fine del video. o persino creare immagini in evidenza dalle miniature dei video di YouTube.
Speriamo che questo articolo ti abbia aiutato ad aggiungere pulsanti di condivisione personalizzati come overlay sui video di YouTube in WordPress. Facci sapere quali canali di social media hai in programma di aggiungere ai tuoi video lasciando un commento qui sotto.
Tracy
considerando che sono passati sei anni, non mi aspetto davvero una risposta, ma, sull'ultimo shortcode dici di inserire l'URL di WordPress invece di YouTube, ma non dici quale sia quel codice né dove metterlo. Puoi per favore tenere presente che i principianti assoluti non sapranno come fare questo?
Supporto WPBeginner
Ci scusiamo per l'eventuale confusione, ci impegneremo a migliorare la nostra formulazione in futuro per renderla più chiara.
Amministratore
Craig
“La maggior parte dei metodi richiederebbe di incollare ogni volta dei frammenti di codice HTML quando si aggiunge un video”
Mi piacerebbe imparare in questo modo... come si fa?
Grazie
Martin Dekker
Sto cercando un'immagine fissa diversa da un video di YouTube che ho sul mio sito. Quella che ha il proprietario del video non mi piace e ho sentito dire che si può scegliere un'immagine dalla timeline del video per farla diventare l'immagine fissa una volta terminato il video. Dato che non è il mio video, devo poterlo fare nel codice iframe incorporato.
È possibile e, in tal caso, potresti darmi il codice. Grazie
Tizy
Ciao,
questo è un tutorial incredibile. È possibile mostrare il pulsante di condivisione alla fine del video di YouTube e come? Grazie in anticipo per il tuo aiuto.
Staff di WPBeginner
Dave, abbiamo aggiornato l'articolo per includere un metodo che condividerà il link del tuo post invece del video di YouTube. Segui le istruzioni nella sezione “Aggiungere il link del post di WordPress nel sovrapposizione del pulsante di condivisione sui video di YouTube”.
Dave
Stavo per tornare indietro e modificare il mio commento perché ho avuto un momento “D’oh” e ho notato che non avevo attivato il plugin del sito. Non ho potuto modificare perché il mio commento doveva essere approvato.
Quando l'ho attivato, le mie opzioni di condivisione su Facebook e Twitter non si sovrapponevano al video. Erano sotto il video.
Non lo so, forse ho fatto qualcosa di sbagliato nel processo.
Mi piace il tuo sito e continuerò a tornare per altri ottimi articoli.
Jessie Delmo
come regolare lo spazio enorme in basso dopo il video?
Christenger
Questa è un'ottima soluzione, ma ho un problema strano. Alcuni ID funzionano, altri no.
Ad esempio, questo ID funziona per me [wpb-yt video=”7vJdBec_B6A”] ma quest'altro no [wpb-yt video=”CYveDEem5VA”]
Rednasil
Ciao ragazzi, grazie per il tutorial.. L'ho fatto funzionare in pochissimo tempo sul mio sito.
Ma sto usando il plugin video SEO di Yoast, e ho notato che non riconosce i video di YouTube incorporati con lo shortcode.
C'è un modo per farlo accadere? Forse una soluzione alternativa in cui non è necessario utilizzare gli shortcode??
Supporto WPBeginner
Non l'abbiamo provato con il plugin Video SEO di Yoast. Vedremo cosa possiamo fare.
Amministratore
Rednasil
Grazie, spero che possiate trovare una soluzione per questo.
Mat
Ciao a tutti,
Come posso aggiungere "Pulsanti di condivisione come overlay sui video di YouTube" con un embed di YouTube all'interno del Revolution Slider?
In quali file php e css dovrei incollare i codici?
Il tuo aiuto è molto apprezzato!!
Mat
Jay
Ehi — apprezzo davvero il post.
Sto cercando di modificare lo snippet di functions.php in modo che i pulsanti di condivisione/tweet si riferiscano al mio sito invece che al sito youtube.com. Sfortunatamente ho tutti i tipi di problemi. Puoi aiutarmi o indicarmi dove posso trovare aiuto?? Ci sto lavorando da un'ora senza progressi.
Sono davvero felice che tu abbia pubblicato questo. È incredibilmente utile!!
Supporto WPBeginner
Jay, abbiamo aggiornato il post e aggiunto un nuovo snippet che condivide il link del post invece del video di youtube. Speriamo che questo aiuti.
Amministratore
Ike Brown
Per favore, quando clicco sul link non funziona. i pulsanti compaiono ma quando ci clicchi non succede nulla
Farhan Shah
È fantastico e descrittivo.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
Supporto WPBeginner
Probabilmente dovrai regolare il CSS. Non possiamo essere sicuri che funzioni con tutti i temi, poiché ci sono migliaia di temi.
Amministratore
Martin
Ho creato questo plugin ora 27 volte e ancora non funziona affatto! Ho davvero bisogno di questa funzione, potresti per favore spiegarlo di nuovo e passo dopo passo. Per favore, evita di iniziare con "fai solo..." perché sono un vero principiante e quando mi siedo qui non so niente.. Ho già seguito il tuo tutorial di functions.php e il mio sito è completamente crashato. Capisco che offri un ottimo supporto qui, fantastico! Pollice in su!! Super!!! Ma per favore capisci che è davvero frustrante creare e seguire i passaggi così tante volte e senza risultati. Questo plugin non appare affatto nella mia installazione di wp.
Martin
"copialo solo in functions.php.." sai, dove in functions.php?? in cima dove inizia con 1 o in fondo dove ci sono i numeri 300 e così via?? o da qualche parte nel mezzo? Grazie <3
Supporto WPBeginner
in fondo al tuo file functions.php
Amministratore
Supporto WPBeginner
Martin, comprendiamo la tua frustrazione. Riesci a installare altri plugin sul tuo sito?
Amministratore
Martin
certo, nessun problema a installare plugin. Alla fine l'ho risolto anche da solo, ma il risultato era solo così così, non sembra molto ordinato, a dire il vero. Quindi l'ho cancellato di nuovo. Stavo cercando altre soluzioni ma non sembrano esistere, tutto è legato al "fare soldi" o al "bloccare contenuti"... perché qualcuno dovrebbe apprezzare una pagina per bloccarla? Ho davvero bisogno di questo plugin e non ho soldi per assumere persone. Per favore, offrimi un po' di supporto via email, potresti spiegarmi come posso stilizzare il tutto in modo che sembri migliore. Per favore, per favore, per favore! Lo apprezzerei molto. Grazie <3
Patrycja
Anche qui. Ho provato ad aggiungerlo solo a functions.php, poi con un plugin specifico per il sito. Niente. Nada. E mi piacerebbe davvero che funzionasse. Funziona con tutti i temi?
Salta
Codice fantastico che ho adattato e implementato su una pagina di prova, incluso anche Google+. So che la spinta non è CSS, ma volevo solo sottolineare che penso che opacity 0 sia una pessima idea, dato che sempre più navigazione avviene su touchscreen dove non c'è un evento hover e i pulsanti non verrebbero mai visti. O dimenticherei del tutto gli effetti di opacità, o imposterei un'opacità iniziale a 0,5, o userei media query per indirizzare dispositivi diversi con impostazioni di opacità individuali.
Jason Gooljar
Si può fare anche con l'attributo IMG?
Kannan M
Trucco Fantastico
Pam Simmons
Questo è molto utile. Sembra che i pulsanti di condivisione in questo esempio condividano effettivamente il link del video di YouTube, piuttosto che la pagina contenente il video incorporato come fanno le sovrapposizioni dei pulsanti UpWorthy. Come si potrebbe modificare il codice per acquisire il permalink della pagina anziché il link di YouTube?
Dave
I just wasted 30 minutes of my life. I did everything the tutorial said to do and it just showed a short code on my post. But even if it did work, according to the comment I am replying to, it would have driven traffic to youtube and not my site.
Madeline
Grazie. Sono entusiasta di provarlo e di farti sapere i risultati.
Manish Misra
È davvero buono e ci aiuta nel mio lavoro....
Chris
Questo è buono. Che ne dici di usare un ID playlist nello shortcode?
La maggior parte delle persone usa video statici nei post, ma nelle home page usiamo playlist.
Come potrebbe essere modificato questo codice per aggiungere i pulsanti di condivisione sui video delle playlist?
Cioè, per funzionare con il plugin YouTube Channel Gallery.
A proposito – SOTTO il codice, il tuo testo dice: "Il seguente codice crea uno shortcode che aggiunge automaticamente pulsanti Twitter e Facebook ai tuoi video."
Non dovrebbe dire "...codice PRECEDENTE..."?
Supporto WPBeginner
Chris, abbiamo aggiornato l'articolo, ora puoi usarlo anche con le playlist.
Amministratore
Krish Murali Eswar
Ben fatto. In genere sono contrario a cambiare qualsiasi cosa a livello di codice. Questo sembra un candidato plugin diretto. Sei sicuro che non esista un plugin?
Supporto WPBeginner
Questo codice può essere utilizzato in un plugin specifico per il sito.
Amministratore
Maggio
Sembra fantastico. Potresti fornire istruzioni molto semplici passo dopo passo su come installarlo – magari su YouTube?
Subbareddy
Questo è fantastico
Steven
Ottimo articolo!
Come si aggiunge questo shortcode ora all'editor di shortcode HTML che appare sulla barra di TinyMCE?
Steve Wharton
Codice piuttosto interessante. Non vedo l'ora di provarlo e aggiungerlo al mio nuovo sito. Grazie!
Tom Horn
C'è un modo per utilizzare un plugin per aggiungere questo codice in modo da non fare danni se non siamo abituati a lavorare sotto il cofano? Grazie per questo, ho visto cose simili prima e volevo davvero sapere come fare.
Supporto WPBeginner
Sì, puoi aggiungerlo a un plugin specifico per il sito.
Amministratore
Pam Blizzard
Grazie per aver condiviso questo, è una soluzione elegante.
Pensi che potrebbe funzionare anche per le playlist di YouTube, con la sintassi "PLxxxetc"?
Supporto WPBeginner
In sostanza, puoi modificare lo shortcode per generare qualsiasi tipo di embed e poi usare il CSS per posizionare i pulsanti di condivisione su quell'embed. Quindi sì, dovrebbe funzionare.
Amministratore
Steven Jacobs
Ci sarebbe un modo per farlo anche con i lettori di SoundCloud?
Ottimo articolo, comunque.
Supporto WPBeginner
Sì, dovrebbe funzionare con gli embed di SoundCloud, ma dovrai aggiungerli nello shortcode e poi usare il CSS per un corretto posizionamento.
Amministratore
Zimbrul
Questa è una cosa piuttosto interessante da fare sui tuoi video di YouTube: pulsanti di condivisione. Mi piacciono anche quei pulsanti fluttuanti sulle immagini aggiunti da FooBox
Pam
Questo è fantastico, grazie!
Pensi che potrebbe essere adattato per funzionare sia con le playlist che con i singoli video?