YouTube Videolarına Overlay Paylaş Düğmeleri Ekleme
Videolar kullanıcı katılımını artırmanın en iyi yollarından biridir. Geçenlerde kullanıcılarımızdan biri popüler sitelerden birinde gördüğü videolarda yer alan paylaşım butonlarının nasıl ekleneceği hakkında bize sordu. Bu yazıda, WordPress sitemizdeki YouTube videolarının paylaşımı için overlay düğmelerin nasıl ekleneceğini size anlatacağım.
Benzer örneği:
Bu uygulamanın çeşitli yolları var. Bir video eklemek için bunun HTML kodunu siteye yapıştırmak gerekir. Bunun yerine, paylaşım butonlarını videoya bindirme efektini otomatik olarak yapacak bir shortcode oluşturduk. Öncelikle aşağıdaki bir kodu temanın functions.php dosyasına yapıştırın:
[php]
/// 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’);
[/php]
Bu kod otomatik olarak videolarınıza twitter ve facebook paylaşım bağlantıları ekleyen bir shortcode oluşturur. Kullanıcı video üzerine fareyi getirdiğinde bu düğmeler görülebilir. Bunun yanı sıra herhangi bir diğer sosyal medya kanalı da ekleyebilir ve kullanabilirsiniz.
Bu shortcode kullanmak için, yapmanız gereken aşağıdaki gibi bir SHORTCODE kullanarak, içinde YouTube video kimliğini ekleyin:
[youtube-vid video=”qzOOy1tWBCg”]
Ekleyeceğin videonun URL dizesinden YouTube video kimliğini alabilirsin. Böyle:
Şimdi, Facebook ya da Twitter üzerinde video paylaşmak için YouTube videosunda düz metin bağlantıları görmek mümkün olacak. Bu bağlantılar için de biraz daha güzel butonlar göstermek için aşağıdaki CSS kodlarını style.css sayfanıza eklemeniz gerekiyor:
[css]
#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;
}
[/css]
Hepsi bu kadar.
Faydalı buldunuz mu?
