Videoclipurile sunt una dintre cele mai bune modalități de a crește implicarea utilizatorilor. Recent, unul dintre utilizatorii noștri ne-a întrebat despre o modalitate de a crea suprapuneri cu butoane de partajare pe videoclipuri, similar cu site-ul popular UpWorthy. În acest articol, vă vom arăta cum să adăugați butoane de partajare ca suprapunere pe videoclipurile YouTube în WordPress.
Exemplu de cum ar arăta:
Adăugarea butoanelor de partajare ca suprapunere pe videoclipurile YouTube
Au existat mai multe moduri în care acest lucru ar fi putut fi realizat. Majoritatea metodelor ar necesita să inserați bucăți de cod HTML de fiecare dată când adăugați un videoclip. În loc să faceți acest lucru, am decis să creăm un shortcode care să automatizeze acest efect de suprapunere.
Pur și simplu copiați și lipiți următorul cod într-un plugin specific site-ului sau în fișierul functions.php al temei dvs.:
/// 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');
Acest cod creează un shortcode care adaugă automat linkuri de partajare pe Twitter și Facebook la videoclipurile dvs. Aceste butoane sunt vizibile doar atunci când utilizatorul își duce mouse-ul peste videoclip. Puteți folosi acest lucru pentru a adăuga orice alt canal de social media.
Pentru a utiliza acest shortcode, tot ce va trebui să faceți este să adăugați ID-ul videoclipului YouTube în shortcode, astfel:
[wpb-yt video="qzOOy1tWBCg"]
Puteți obține ID-ul videoclipului YouTube din șirul URL. Astfel:
Acum, când adăugați un videoclip, veți putea vedea videoclipul dvs. YouTube și linkuri text simple pentru a partaja videoclipul pe Facebook sau Twitter. Veți observa că aceste linkuri nu sunt stilizate deloc.
Deci, să stilizăm aceste linkuri pentru a crea butoane, astfel încât să arate puțin mai bine. De asemenea, vom ascunde aceste butoane și le vom face să apară doar atunci când un utilizator își mută mouse-ul peste containerul video. Pentru a face acest lucru, adăugați următorul CSS la foaia de stiluri a Child Theme-ului dvs.
#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;
}
Atât. Acum ar trebui să aveți butoane de partajare suprapuse pe videoclipurile dvs. YouTube în WordPress.
Adăugarea butoanelor de partajare ca suprapunere pentru playlisturile video YouTube în WordPress
După publicarea acestui articol, mulți dintre cititorii noștri au întrebat cum poate fi modificat acest cod pentru a funcționa și pentru playlist-urile YouTube, precum și pentru videoclipuri. Dacă încorporați videoclipuri YouTube, precum și playlist-uri pe site-ul dvs. WordPress, atunci ar trebui să folosiți acest cod în schimb.
/*
* 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');
Folosind codul de mai sus, puteți adăuga și o listă de redare cu butoane de partajare suprapuse. Pentru a afișa lista de redare, va trebui să furnizați ID-ul videoclipului și ID-ul listei de redare în shortcode, astfel:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Puteți obține ID-urile videoclipului și ale playlistului vizitând playlistul pe YouTube și copiind ID-ul listei din URL, astfel:
Adăugarea linkului postării WordPress în suprapunerea butonului de partajare pe videoclipurile YouTube
După ce am publicat acest articol, unii dintre utilizatorii noștri au cerut ca butoanele de partajare să partajeze linkul postării lor WordPress în loc de linkul videoclipului YouTube. Pentru a face acest lucru, trebuie să înlocuiți URL-ul videoclipului din butoanele de partajare cu permalink-ul postării WordPress. Utilizați acest cod în fișierul functions.php sau în pluginul specific site-ului dvs.:
/// 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');
Simțiți-vă liber să modificați CSS-ul sau fragmentele de shortcode pentru a vă satisface nevoile. Pentru a vă optimiza și mai mult videoclipurile, puteți face ca videoclipurile dvs. YouTube responsive folosind pluginul jQuery FitVids. Puteți, de asemenea, dezactiva videoclipurile înrudite care apar la sfârșitul videoclipului. sau chiar crea imagini de prezentare din miniaturile videoclipurilor YouTube.
Sperăm că acest articol v-a ajutat să adăugați butoane personalizate de partajare ca suprapunere pe videoclipurile YouTube în WordPress. Spuneți-ne pe ce canale de socializare plănuiți să adăugați pe videoclipurile dvs. lăsând un comentariu mai jos.
Tracy
având în vedere că au trecut șase ani, nu prea mă aștept la un răspuns, dar, pe ultimul shortcode, spui să introduci URL-ul WordPress în loc de YouTube, dar nu spui care este acel cod sau unde să-l pun. Poți să ții cont că începătorii foarte noi nu vor ști cum să facă asta?
Suport WPBeginner
Ne cerem scuze pentru orice confuzie, ne vom asigura să depunem eforturi pentru a ne îmbunătăți formularea în viitor pentru a face acest lucru mai clar
Admin
Craig
„Majoritatea metodelor ar necesita să lipiți bucăți de cod HTML de fiecare dată când adăugați un videoclip”
Aș dori să învăț în acest fel... cum se face?
Mulțumesc
Martin Dekker
Caut o imagine statică diferită dintr-un videoclip de pe YouTube pe care îl am pe site-ul meu. Cea pe care o are proprietarul videoclipului nu-mi place și am auzit că poți alege o imagine din cronologia videoclipului pentru a deveni imaginea ta statică odată ce videoclipul se termină. Deoarece nu este videoclipul meu, trebuie să pot face acest lucru în codul iframe de încorporare.
Este posibil acest lucru și, dacă da, ați putea să-mi dați codul. Mulțumesc
Tizy
Bună ziua,
acesta este un tutorial incredibil. Este posibil să afișați butonul de partajare la sfârșitul videoclipului YouTube și cum? Vă mulțumesc anticipat pentru ajutor.
Echipa WPBeginner
Dave, am actualizat articolul pentru a include o metodă care va partaja linkul postării dvs. în loc de videoclipul YouTube. Urmați instrucțiunile din secțiunea „Adăugarea linkului postării WordPress în suprapunerea butonului de partajare pe videoclipurile YouTube”.
Dave
Mă gândeam să mă întorc și să-mi editez comentariul pentru că am avut un moment de tip „D’oh” și am observat că nu am activat niciodată pluginul site-ului. Nu am putut edita deoarece comentariul meu a trebuit să fie aprobat.
Când l-am activat, opțiunile mele de partajare pe Facebook și Twitter nu s-au suprapus peste video. Erau sub video.
Nu știu, poate am făcut ceva greșit în proces.
Îmi place site-ul tău și voi continua să revin pentru mai multe articole grozave.
Jessie Delmo
cum să ajustez spațiul uriaș de jos după video?
Christenger
Aceasta este o soluție excelentă, dar am o problemă ciudată. Unele ID-uri funcționează, dar altele nu.
De exemplu, acest ID funcționează pentru mine [wpb-yt video=”7vJdBec_B6A”], dar acesta celălalt nu [wpb-yt video=”CYveDEem5VA”]
Rednasil
Salut băieți, mulțumesc pentru tutorial.. Am reușit să fac asta să funcționeze pe site-ul meu în cel mai scurt timp.
Dar folosesc pluginul Yoast pentru SEO video și am observat că nu recunoaște videoclipurile YouTube încorporate cu shortcode.
Există o modalitate de a face acest lucru să se întâmple? Poate o soluție temporară unde nu trebuie să folosești shortcode-uri??
Suport WPBeginner
Nu am încercat cu pluginul Video SEO de la Yoast. Vom vedea ce putem face.
Admin
Rednasil
Mulțumesc, sper că puteți găsi o soluție pentru asta.
Mat
Salut tuturor,
Cum pot adăuga „Butoane de partajare ca suprapunere pe videoclipurile YouTube” cu un embed YouTube în Revolution Slider?
În ce fișiere php și css ar trebui să lipesc codurile?
Vă mulțumesc, ajutorul dumneavoastră este foarte apreciat!!
Mat
Jay
Salut - apreciez cu adevărat postarea.
Încerc să modific fragmentul functions.php astfel încât butoanele de partajare/tweet să facă referire la site-ul meu în loc de site-ul youtube.com. Din păcate, am tot felul de probleme. Mă puteți ajuta sau mă puteți îndruma undeva unde pot primi ajutor?? M-am chinuit cu asta timp de o oră fără niciun progres.
Mă bucur cu adevărat că ai postat asta. Este incredibil de util!!
Suport WPBeginner
Jay, am actualizat postarea și am adăugat un nou fragment care partajează linkul postării în loc de videoclipul YouTube. Sperăm că acest lucru ajută.
Admin
Ike Brown
Vă rog, când dau clic pe link, nu funcționează. butoanele apar, dar când dai clic pe ele nu se întâmplă nimic
Farhan Shah
Este grozav și descriptiv.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
Suport WPBeginner
Probabil veți avea nevoie de ajustări CSS. Nu putem fi siguri că acest lucru funcționează cu toate temele, deoarece există mii de teme.
Admin
Martin
Am creat acest plugin de 27 de ori acum și tot nu funcționează deloc! Am cu adevărat nevoie de această funcție, ați putea, vă rog, să explicați din nou și pas cu pas. Vă rog să evitați să începeți cu „doar faceți..” pentru că sunt un începător real și când stau aici nu știu nimic.. Am urmat deja tutorialul dvs. despre functions.php și site-ul meu s-a blocat complet. Înțeleg că oferiți un suport grozav aici, minunat! Felicitări!! Super!!! Dar vă rog să înțelegeți că este cu adevărat frustrant să creezi și să urmezi pași de atâtea ori și fără rezultat. Acest plugin nu apare deloc în instalarea mea wp.
Martin
„doar copiați-l în functions.php..” știți, unde în functions.php?? în partea de sus unde începe cu 1 sau în partea de jos unde sunt numerele 300 și așa mai departe?? sau undeva la mijloc? Mulțumesc <3
Suport WPBeginner
la sfârșitul fișierului dvs. functions.php
Admin
Suport WPBeginner
Martin, înțelegem frustrarea dvs. Puteți instala alte pluginuri pe site-ul dvs.?
Admin
Martin
sigur, nu e nicio problemă să instalez pluginuri. L-am remediat și eu în cele din urmă, dar rezultatul a fost doar așa-așa, nu arată foarte îngrijit, sincer. Așa că l-am șters din nou. Căutam alte soluții, dar nu par să existe, totul este legat de „a face bani” sau „blocarea conținutului” .. de ce ar plăcea cineva o pagină pentru a o bloca? Chiar am nevoie de acest plugin și nu am bani să angajez oameni. Vă rog să-mi oferiți suport prin email, ați putea să-mi explicați cum pot stiliza totul pentru a arăta mai bine. Vă rog, vă rog, vă rog! Aș aprecia foarte mult. Mulțumesc <3
Patrycja
La fel și aici. Am încercat să-l adaug doar în functions.php, apoi cu un plugin specific site-ului. Nimic. Nada. Și mi-ar plăcea foarte mult să funcționeze. Funcționează pe toate temele?
Skip
Cod grozav pe care l-am adaptat și implementat pe o pagină de test, inclusiv Google+. Știu că scopul nu este CSS, dar voiam doar să subliniez că opacitatea 0 este o idee foarte proastă, deoarece tot mai multă navigare se face pe ecrane tactile unde nu există eveniment de hover și butoanele nu ar fi niciodată vizibile. Aș renunța fie la efectele de opacitate în general, fie aș seta o opacitate inițială la 0,5 sau aș folosi interogări media pentru a viza diferite dispozitive cu setări individuale de opacitate.
Jason Gooljar
Se poate face acest lucru și cu atributul IMG?
Kannan M
Truc grozav
Pam Simmons
Acest lucru este foarte util. Se pare că butoanele de partajare din acest exemplu partajează de fapt linkul videoclipului YouTube, mai degrabă decât pagina care conține videoclipul încorporat, așa cum fac suprapunerile butoanelor UpWorthy. Cum s-ar putea modifica codul pentru a prelua permalink-ul paginii, mai degrabă decât linkul 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
Mulțumesc. Sunt entuziasmat să încerc asta și să vă spun rezultatele.
Manish Misra
Este foarte bun și ne ajută la munca mea....
Chris
Acest lucru este bun. Ce zici de utilizarea unui ID de playlist în shortcode?
Majoritatea oamenilor folosesc videoclipuri statice în postări, dar pe paginile de pornire folosim playlisturi.
Cum ar putea fi modificat acest cod pentru a adăuga butoanele de partajare peste videoclipurile din playlisturi?
Adică, pentru a lucra cu pluginul YouTube Channel Gallery.
Apropo – SUB codul textul tău spune asta: „Următorul cod creează un shortcode care adaugă automat butoane Twitter și Facebook la videoclipurile tale.”
Nu ar trebui să scrie „…cod PRECEDENT…”?
Suport WPBeginner
Chris, am actualizat articolul, îl poți folosi acum și cu playlisturi.
Admin
Krish Murali Eswar
Bine făcut. În general, sunt reticent în a schimba ceva la nivel de cod. Aceasta pare o candidatură directă pentru un plugin. Sunteți sigur că nu există un plugin?
Suport WPBeginner
Acest cod poate fi utilizat într-un plugin specific site-ului.
Admin
Mai
Arată grozav. Ai putea să oferi instrucțiuni foarte simple, pas cu pas, despre cum să-l instalez – poate pe YouTube?
Subbareddy
Acesta este grozav
Steven
Articol grozav!
Cum adăugați acum acest shortcode în editorul de shortcode HTML care apare pe bara tinymce?
Steve Wharton
Cod destul de cool. Abia aștept să mă joc cu el și să-l adaug pe noul meu site. Mulțumesc!
Tom Horn
Există o modalitate de a utiliza un plugin pentru a adăuga acest cod, astfel încât să nu stricăm lucrurile dacă nu suntem obișnuiți să lucrăm la nivelul de bază? Mulțumesc pentru asta, am văzut lucruri de genul acesta înainte și chiar am vrut să știu cum să o fac.
Suport WPBeginner
Da, puteți adăuga acest lucru la un plugin specific site-ului.
Admin
Pam Blizzard
Mulțumesc pentru distribuire, este o soluție elegantă.
Crezi că ar funcționa și pentru listele de redare YouTube, cu sintaxa „PLxxxetc”?
Suport WPBeginner
Practic, puteți modifica shortcode-ul pentru a genera orice tip de embed și apoi să folosiți CSS pentru a poziționa butoanele de partajare pe acel embed. Deci, da, ar trebui să funcționeze.
Admin
Steven Jacobs
Ar exista vreo modalitate de a face acest lucru și cu playere SoundCloud?
Articol grozav, apropo.
Suport WPBeginner
Da, ar trebui să funcționeze cu embed-uri Soundcloud, dar va trebui să le adăugați în shortcode și apoi să folosiți CSS pentru o poziționare corectă.
Admin
Zimbrul
Acesta este un lucru destul de grozav de făcut pe videoclipurile dvs. YouTube: butoane de partajare. Îmi plac și acele butoane plutitoare pe imagini adăugate de FooBox
Pam
Acest lucru este grozav, mulțumesc!
Crezi că ar putea fi ajustat pentru a funcționa atât cu playlist-uri, cât și cu videoclipuri individuale?