Tutoriale

Cum de a adăuga butoanele de distribuire sub formă de suprapunere pe videoclipuri YouTube în WordPress

Videoclipurile reprezintă una dintre cele mai bune modalități de a stimula implicarea utilizatorilor. Recent, unul dintre utilizatorii noștri ne-a întrebat despre o modalitate de a crea suprapuneri ale butonului de distribuire pentru videoclipuri asemănătoare cu site-ul popular UpWorthy. În acest articol, vă vom arăta cum să adăugați butoane de distribuire ca suprapunere pe videoclipuri YouTube în WordPress.

Exemplu de cum ar arata:

Adăugarea butoanelor de distribuire ca suprapunere în videoclipurile YouTube

Au existat câteva moduri în care acest lucru s-ar putea face. Cele mai multe moduri necesită inserarea unui cod HTML de fiecare dată când adăugați un videoclip. În loc să facem acest lucru, am decis să creăm un scurtcod care ar automatiza acest efect de suprapunere.

Trebuie doar să copiați și să inserați următorul cod într-un plugin specific site-ului sau în fișierul functions.php al temei:

 /// WPBeginner: Butoanele de suprapunere a distribuției YouTube, funcția wpb_yt_buttons ($ atts) // Obțineți ID-ul video din extrasul de scurtături (shortcode_atts (array ('video' =>), $ atts) '; // Adauga butonul de partajare Facebook $ string = =' Facebook
„; // Adauga butonul $ $ string = 'Tweet
„; // Închideți containerul video $ string. = ''; // Intoarcere retur de iesire $ string;  // Adăugați codul scurt add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Acest cod creează un cod scurt care adaugă în mod automat link-uri de twitter și Facebook share la videoclipurile dvs. Aceste butoane sunt vizibile numai atunci când utilizatorul aduce mouse-ul peste videoclip. Puteți să-l utilizați și să adăugați orice alt canal social media.

Pentru a utiliza acest scurtcod, tot ce trebuie să faceți este să adăugați ID-ul videoclipului YouTube în codul scurt astfel:

[wpb-yt video = "qzOOy1tWBCg"]

Puteți obține codul video YouTube din șirul de adrese URL. Asa:

Acum, când adăugați un videoclip, veți putea vedea videoclipurile YouTube și link-urile de text simplu pentru a distribui videoclipul pe Facebook sau pe Twitter. Veți observa că aceste linkuri nu sunt deloc decorate.

Deci, le permite stilul acestor link-uri să creeze butoane, așa că arată puțin mai frumos. De asemenea, vom ascunde aceste butoane și le vom face să apară numai atunci când un utilizator își duce mouse-ul pe containerul video. Pentru a face acest lucru, adăugați următoarea CSS în foaia de stil a Copilului.

 # share-video-overlay poziție: relativă; dreapta: 40px; top: -190px; listă-tip: none; afișare: bloc; opacitate: 0; filtru: alfa (opacitate = 0); -webkit-tranziție: opacitate .4s, top .25s; -moz-tranziție: opacitate .4s, top .25s; -o-tranziție: opacitate .4s, top .25s; tranziție: opacitate .4s, top .25s; z-index: 500;  # share-video-overlay: hover opacitate: 1; Filtru: alpha (opacitate = 100);  .share-video-overlay li margine: 5px 0px 5px 0px;  #facebook culoare: #ffffff; fundal-culoare: # 3e5ea1; lățime: 70px; padding: 5px;  .facebook a: link, .facebook a: activ, .facebook a: vizitat culoare: #fff; text-decoration: none;  #twitter fundal-culoare: # 00a6d4; lățime: 70px; padding: 5px;  .twitter a, .twitter a: link, .twitter a: activ, .twitter a: vizitat, .twitter a: hover culoare: #FFF; text-decoration: none;

Asta e tot. Acum ar trebui să aveți suprapuse butoanele de distribuire a videoclipurilor dvs. YouTube în WordPress.

Adăugarea butoanelor de distribuire ca suprapunere pentru listele de redare 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 pentru playlisturile YouTube, precum și pentru videoclipuri. Dacă încorporați videoclipuri YouTube și liste de redare pe site-ul dvs. WordPress, atunci ar trebui să utilizați acest cod în schimb.

 / * * Butoanele de suprapunere a partajării WPBeginner * în videoclipurile și listele de redare YouTube / / wpb_yt_buttons ($ atts) // Obțineți ID-urile videoclipurilor și playlist-urilor din extrasul de scurtături (shortcode_atts (array ('video' => ",), $ atts)); // Verificați dacă un cod de redare este furnizat cu cod scurt dacă (! $ Playlist == "): // Afișați playlistul video $ string = ''; // Adaugă butonul Facebook $ string = = 'Facebook
„; // Adauga butonul Twitter $ string = = 'Tweet
„; // Închideți containerul video $ string. = ''; // Dacă nu este furnizat alt ID de redare: // Afișați videoclipul $ string = ''; // Adauga butonul Facebook $ string = = ' Facebook
„; // Adauga butonul Twitter $ string = = 'Tweet
„; // Închideți containerul video $ string. = ''; endif; // Intoarcere retur de iesire $ string;  // Adăugați shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Folosind codul de mai sus, puteți adăuga, de asemenea, o listă de redare cu butoane de partajare de suprapunere. Pentru a afișa lista dvs. de redare, va trebui să furnizați ID-ul videoclipului și ID-ul playlistului în codul scurt ca acesta:

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

Puteți obține codurile de identificare pentru videoclipuri și playlist accesând lista de redare de pe YouTube și copiind ID-ul listei de la adresa URL, astfel:

Adăugarea link-ului WordPress Post în suprapunerea pe butonul de distribuire pe YouTube

După ce am publicat acest articol, unii dintre utilizatorii noștri au cerut ca aceștia să-și plătească link-urile postului WordPress în locul videoclipului YouTube. Pentru a face acest lucru, trebuie să înlocuiți URL-ul videoclipului în butoanele de distribuire cu permalink-ul postului WordPress. Utilizați acest cod în pluginul funcții.php sau site-specific:

 /// WPBeginner: Butoanele de suprapunere a distribuției YouTube, funcția wpb_yt_buttons ($ atts) // Obțineți ID-ul video din extrasul de scurtături (shortcode_atts (array ('video' =>), $ atts) '/ / Trimite linkul permalink și codifica URL $ permalink_encoded = urlencode (get_permalink ()); // Adauga Facebook share button $ string = =' Facebook
„; // Adauga butonul $ $ string = 'Tweet
„; // Închideți containerul video $ string. = ''; // Intoarcere retur de iesire $ string;  // Adăugați codul scurt add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Simțiți-vă liber să modificați fragmentele CSS sau shortcode pentru a vă satisface nevoile. Pentru a vă optimiza în continuare videoclipurile, puteți face videoclipurile YouTube să reacționeze folosind pluginul FitVids jQuery. De asemenea, puteți dezactiva videoclipurile similare care apar la sfârșitul videoclipului. sau chiar să creeze imagini recomandate din miniaturile video YouTube.

Sperăm că acest articol v-a ajutat să adăugați butoane de partajare personalizate ca suprapunere pe videoclipuri YouTube în WordPress. Anunțați-ne ce canale de socializare pe care intenționați să le adăugați pe videoclipurile dvs. lăsând un comentariu mai jos.

« Cum de a adăuga întrebări de securitate la ecranul de conectare WordPress Cum de a adăuga un element de meniu Shortlink în bara de administrare WordPress »