Ang mga video ay isa sa mga pinakamahusay na paraan upang mapalakas ang pakikipag-ugnayan ng user. Kamakailan lamang ay tinanong kami ng isa sa aming mga gumagamit tungkol sa isang paraan upang lumikha ng mga overlay na button ng pagbabahagi sa mga video na katulad ng sikat na site UpWorthy. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng mga pindutan sa pagbabahagi bilang overlay sa mga video sa YouTube sa WordPress.
Halimbawa ng kung ano ang magiging hitsura nito:
Pagdaragdag ng Mga Pindutan sa Ibahagi bilang Overlay sa Mga Video sa YouTube
Mayroong maraming mga paraan na maaaring magawa ito. Karamihan sa mga paraan ay nangangailangan sa iyo na mag-paste ng isang piraso ng HTML code sa bawat oras na magdagdag ka ng isang video. Sa halip na gawin iyon, nagpasya kaming lumikha ng isang shortcode na i-automate ang epekto ng overlay na ito.
Kopyahin at i-paste ang sumusunod na code sa isang plugin na tukoy sa site o mga function.php file ng iyong tema:
/// Mga YouTube Share Overlay Button ng site
function wpb_yt_buttons ($ atts) {
// Kumuha ng video ID mula sa shortcode
Extract (shortcode_atts (array (
'video' => ''
), $ atts));
// Ipakita ang video
// Idagdag ang pindutan ng pagbabahagi ng Facebook
$ string. = '
‘;
// Isara ang lalagyan ng video
$ string. = ”;
// Return output
bumalik $ string;
}
// Magdagdag ng shortcode
add_shortcode (‘wpb-yt’, ‘wpb_yt_buttons’);
Lumilikha ang code na ito ng isang shortcode na awtomatikong nagdaragdag ng twitter at facebook share link sa iyong mga video. Ang mga pindutan na ito ay makikita lamang kapag ang gumagamit ay nagdudulot ng kanilang mouse sa video. Maaari mo itong gamitin magdagdag ng iba pang social media channel.
Upang gamitin ang shortcode na ito, ang kailangan mong gawin ay idagdag ang ID ng video ng YouTube sa shortcode na katulad nito:
[wpb-yt video = "qzOOy1tWBCg"]
Maaari mong makuha ang YouTube video ID mula sa URL string. Ganito:
Ngayon kapag nagdagdag ka ng isang video, makikita mo ang iyong YouTube video at mga plain text link upang ibahagi ang video sa Facebook o Twitter. Mapapansin mo na ang mga link na ito ay hindi naka-istilong sa lahat.
Kaya hinahayaan ang estilo ng mga link na ito upang lumikha ng mga pindutan, kaya mukhang isang mas mahusay. Itatatag din namin ang mga pindutan na ito at ipapakita lamang ang mga ito kapag ang isang gumagamit ay tumatagal ng kanilang mouse sa lalagyan ng video. Upang gawin ito idagdag ang sumusunod na CSS sa stylesheet ng iyong Child Theme.
# share-video-overlay {
posisyon: kamag-anak;
kanan: 40px;
itaas: -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, nangungunang .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 {
kulay: #ffffff;
background-color: # 3e5ea1;
lapad: 70px;
padding: 5px;
}
.facebook a: link, .facebook a: aktibo, .facebook a: binisita {
kulay: #fff;
text-decoration: none;
}
#twitter {
background-color: # 00a6d4;
lapad: 70px;
padding: 5px;
}
.twitter a, .twitter a: link, .twitter a: aktibo, .twitter a: binisita, .twitter a: hover {
kulay: #FFF;
text-decoration: none;
}
Iyon lang. Ngayon ay dapat na mayroon kang magbahagi ng mga overlay button sa iyong mga video sa YouTube sa WordPress.
Pagdaragdag ng Mga Pindutan sa Ibahagi bilang Overlay para sa Mga Video Playlist ng YouTube sa WordPress
Pagkatapos i-publish ang artikulong ito, marami sa aming mga mambabasa ang nagtanong, kung paano mababago ang code na ito upang gumana para sa mga playlist ng YouTube pati na rin ang mga video. Kung nag-embed ka ng mga video sa YouTube pati na rin ang mga playlist sa iyong WordPress site, dapat mong gamitin ang code na ito sa halip.
/ *
* Ibahagi ang Overlay na Mga Pindutan ng site
* sa Mga Video at Playlist ng YouTube
* /
function wpb_yt_buttons ($ atts) {
// Kunin ang mga video at mga playlist playlist mula sa shortcode
Extract (shortcode_atts (array (
'video' => '',
'playlist' => '',
), $ atts));
/ / Suriin upang makita kung ang isang playlist id ay may shortcode
kung (! $ playlist == ''):
// Ipakita ang playlist ng video
// Magdagdag ng pindutan sa Facebook
$ string. = '
‘;
// Isara ang lalagyan ng video
$ string. = ”;
// Kung walang playlist ID ay ibinigay
iba pa:
// Ipakita ang video
// Magdagdag ng pindutan sa Facebook
$ string. = ‘
‘;
// Isara ang lalagyan ng video
$ string. = ”;
tapusin kung;
// Return output
bumalik $ string;
}
// Magdagdag ng shortcode
add_shortcode (‘wpb-yt’, ‘wpb_yt_buttons’);
Gamit ang code sa itaas, maaari ka ring magdagdag ng playlist na may overlaying share buttons. Upang maipakita ang iyong playlist kailangan mong ibigay ang video id at playlist id sa shortcode tulad nito:
[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]
Makukuha mo ang iyong mga video at playlist ID sa pamamagitan ng pagbisita sa playlist sa YouTube at pagkopya ng listahan ng ID mula sa URL, tulad nito:
Pagdaragdag ng WordPress Post Link sa Overlay ng Pindutan ng Ibahagi sa Mga Video sa YouTube
Pagkatapos naming mai-publish ang artikulong ito, hiniling ng ilan sa aming mga gumagamit na nais nilang ibahagi ang mga pindutan upang maibahagi ang link ng kanilang WordPress post sa halip na link sa video sa YouTube. Upang gawin iyon kailangan mong palitan ang URL ng video sa mga pindutan ng magbahagi sa permalink ng post ng WordPress. Gamitin ang code na ito sa iyong functions.php o plugin na tukoy sa site:
/// Mga YouTube Share Overlay Button ng site
function wpb_yt_buttons ($ atts) {
// Kumuha ng video ID mula sa shortcode
Extract (shortcode_atts (array (
'video' => ''
), $ atts));
// Ipakita ang video
// Kumuha ng post na permalink at i-encode ang URL
$ permalink_encoded = urlencode (get_permalink ());
// Idagdag ang pindutan ng pagbabahagi ng Facebook
$ string. = '
‘;
// Isara ang lalagyan ng video
$ string. = ”;
// Return output
bumalik $ string;
}
// Magdagdag ng shortcode
add_shortcode (‘wpb-yt’, ‘wpb_yt_buttons’);
Huwag mag-atubiling baguhin ang CSS o ang shortcode snippet upang matugunan ang iyong mga pangangailangan. Upang higit pang ma-optimize ang iyong mga video, maaari mong gawing tumutugon ang iyong mga video sa YouTube gamit ang FitVids jQuery plugin. Maaari mo ring i-off ang mga kaugnay na video na lumilitaw sa dulo ng video. o lumikha ng mga itinatampok na larawan mula sa mga thumbnail ng YouTube video.
Umaasa kami na ang artikulong ito ay nakatulong sa iyo na magdagdag ng mga custom na pindutan sa pagbabahagi bilang overlay sa mga video sa YouTube sa WordPress. Ipaalam sa amin kung aling mga channel ng social media ang pinaplano mong idagdag sa iyong mga video sa pamamagitan ng pag-iwan ng komento sa ibaba.