Videolar, kullanıcı etkileşimini artırmanın en iyi yollarından biridir. Yakın zamanda kullanıcılarımızdan biri bize popüler site UpWorthy'ye benzer şekilde videolar üzerinde paylaş düğmesi kaplamaları oluşturmanın bir yolu hakkında sordu. Bu makalede, WordPress'te YouTube videolarına kaplama olarak paylaş düğmelerinin nasıl ekleneceğini göstereceğiz.
Nasıl görüneceğine dair örnek:
YouTube Videolarında Kaplama Olarak Paylaşım Düğmeleri Ekleme
Bunu yapmanın birkaç yolu vardı. Çoğu yol, her video eklediğinizde bir miktar HTML kodu yapıştırmanızı gerektirirdi. Bunu yapmak yerine, bu kaplama efektini otomatikleştirecek bir kısa kod oluşturmaya karar verdik.
Aşağıdaki kodu bir siteye özel eklentiye veya temanızın functions.php dosyasına kopyalayıp yapıştırmanız yeterlidir:
/// 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');
Bu kod, videolarınıza otomatik olarak Twitter ve Facebook paylaşım bağlantıları ekleyen bir kısa kod oluşturur. Bu düğmeler yalnızca kullanıcı fareyi videonun üzerine getirdiğinde görünür. Başka herhangi bir sosyal medya kanalını da eklemek için kullanabilirsiniz.
Bu kısa kodu kullanmak için tek yapmanız gereken YouTube video kimliğini şu şekilde kısa koda eklemektir:
[wpb-yt video="qzOOy1tWBCg"]
YouTube video kimliğini URL dizesinden alabilirsiniz. Şöyle ki:
Artık bir video eklediğinizde, YouTube videonuzu ve videoyu Facebook veya Twitter'da paylaşmak için düz metin bağlantılarını görebileceksiniz. Bu bağlantıların hiç stilinin olmadığını fark edeceksiniz.
O halde bu bağlantıları düğmeler oluşturacak şekilde biçimlendirelim, böylece biraz daha hoş görünür. Bu düğmeleri gizleyeceğiz ve yalnızca bir kullanıcı faresini video kapsayıcısının üzerine getirdiğinde görünmelerini sağlayacağız. Bunu yapmak için aşağıdaki CSS'yi Çocuk Temanızın stil sayfasına ekleyin.
#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;
}
Hepsi bu kadar. Artık WordPress'teki YouTube videolarınızın üzerinde paylaş düğmeleri görünecek.
WordPress'te YouTube Video Oynatma Listeleri İçin Paylaşım Düğmelerini Kenar Boşluğu Olarak Ekleme
Bu makaleyi yayınladıktan sonra okuyucularımızın çoğu, bu kodun YouTube oynatma listeleri ve videolar için nasıl değiştirilebileceğini sordu. WordPress sitenize hem YouTube videoları hem de oynatma listeleri yerleştiriyorsanız, bunun yerine bu kodu kullanmalısınız.
/*
* 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');
Yukarıdaki kodu kullanarak, paylaş düğmelerini kaplayan bir çalma listesi de ekleyebilirsiniz. Çalma listenizi görüntülemek için kısa kodda video kimliğini ve çalma listesi kimliğini şu şekilde sağlamanız gerekir:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Video ve oynatma listesi kimliklerinizi, oynatma listesini YouTube'da ziyaret edip URL'den liste kimliğini kopyalayarak şu şekilde alabilirsiniz:
YouTube Videolarında Paylaş Düğmesi Üst Katmanına WordPress Gönderi Bağlantısı Ekleme
Bu makaleyi yayınladıktan sonra, bazı kullanıcılarımız paylaş düğmelerinin YouTube video bağlantısı yerine WordPress gönderisinin bağlantısını paylaşmasını istediklerini sordular. Bunu yapmak için paylaş düğmelerindeki video URL'sini WordPress gönderisinin kalıcı bağlantısıyla değiştirmeniz gerekir. Bunu functions.php dosyanızda veya siteye özgü eklentide kullanın:
/// 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');
İhtiyaçlarınızı karşılamak için CSS veya kısa kod parçacıklarını değiştirmekten çekinmeyin. Videolarınızı daha da optimize etmek için, YouTube videolarınızı FitVids jQuery eklentisini kullanarak duyarlı hale getirebilirsiniz. Ayrıca, videonun sonunda görünen ilgili videoları kapatabilir veya hatta YouTube video küçük resimlerinden öne çıkan görseller oluşturabilirsiniz.
Bu makalenin, WordPress'te YouTube videolarına özel paylaşım düğmelerini kaplama olarak eklemenize yardımcı olduğunu umuyoruz. Aşağıya yorum bırakarak videolarınıza hangi sosyal medya kanallarını eklemeyi planladığınızı bize bildirin.
Tracy
altı yıl sonrasını düşündüğümde pek bir yanıt beklemiyorum ama son kısa kodda youtube yerine wordpress url'sini koymamı söylüyorsunuz ama o kodun ne olduğunu veya nereye konulacağını söylemiyorsunuz. Çok yeni başlayanların bunu bilmeyeceğini aklınızda bulundurabilir misiniz?
WPBeginner Desteği
Verdiğimiz rahatsızlıktan dolayı özür dileriz, gelecekte bunu daha net hale getirmek için ifadelerimizi geliştirmeye özen göstereceğiz.
Yönetici
Craig
"Çoğu yöntem, bir video eklediğinizde her seferinde bir parça HTML kodu yapıştırmanızı gerektirir"
Bu şekilde öğrenmek isterim…. nasıl yapılıyor?
Teşekkürler
Martin Dekker
Sitemde bulunan bir YouTube videosundan farklı bir hareketsiz resim arıyorum. Video sahibinin sahip olduğu resimden hoşlanmıyorum ve videonun zaman çizelgesinden bir resim seçerek videonun sonunda hareketsiz resminiz olmasını sağlayabileceğinizi duydum. Bu benim videom olmadığı için bunu yerleştirme iframe kodunda yapabilmem gerekiyor.
Bu mümkün mü ve mümkünse bana kodu verebilir misiniz? Teşekkürler
Tizy
Merhaba,
bu inanılmaz bir eğitim. YouTube videosunun sonunda paylaş düğmesini göstermek mümkün mü ve nasıl? Yardımınız için şimdiden teşekkürler.
WPBeginner Ekibi
Dave, makaleyi gönderi bağlantınızı YouTube videosu yerine paylaşacak bir yöntemi içerecek şekilde güncelledik. “YouTube Videolarında Paylaşım Düğmesi Kaplamasına WordPress Gönderi Bağlantısı Ekleme” bölümündeki talimatları izleyin.
Dave
Yorumumu düzenlemeye gidecektim çünkü bir “D’oh” anı yaşadım ve site eklentisini hiç etkinleştirmediğimi fark ettim. Yorumum onaylanması gerektiği için düzenleyemedim.
Etkinleştirdiğimde Facebook ve Twitter paylaşım seçeneklerim videonun üzerine gelmedi. Videonun altında kaldılar.
Bilmiyorum, belki de süreçte bir şeyler yanlış yaptım.
Sitenizi beğendim ve daha harika makaleler için geri gelmeye devam edeceğim.
Jessie Delmo
videodan sonra altta oluşan büyük boşluğu nasıl ayarlarım?
Christenger
Bu harika bir çözüm, ancak garip bir sorunum var. Bazı kimlikler çalışıyor ama diğerleri çalışmıyor.
Örneğin, bu kimlik benim için çalışıyor [wpb-yt video=”7vJdBec_B6A”] ancak diğeri çalışmıyor [wpb-yt video=”CYveDEem5VA”]
Rednasil
Merhaba millet, öğretici için teşekkürler.. Sitemde hiç vakit kaybetmeden çalıştırdım.
Ancak Yoast'ın video SEO eklentisini kullanıyorum ve kısa kodla gömülen YouTube videolarını tanımadığını fark ettim.
Bunu yapmanın bir yolu var mı? Belki kısa kodları kullanmak zorunda kalmayacağınız bir çözüm??
WPBeginner Desteği
Yoast'ın Video SEO eklentisiyle denemedik. Ne yapabileceğimizi göreceğiz.
Yönetici
Rednasil
Teşekkürler, umarım bunun için bir çözüm bulabilirsiniz.
Mat
Herkese merhaba,
YouTube videolarına "Paylaşım Düğmeleri Kaplama Olarak Ekle" özelliğini, Revolution Slider içine yerleştirilmiş bir YouTube videosu ile nasıl entegre edebilirim?
Hangi php ve css dosyalarına kodları yapıştırmalıyım?
Yardımınız çok takdir ediliyor!!
Mat
Jay
Merhaba — gönderi için gerçekten minnettarım.
Paylaşım/tweet düğmelerinin youtube.com sitesi yerine sitemi göstermesi için functions.php kod parçasını değiştirmeye çalışıyorum. Ne yazık ki her türlü sorun yaşıyorum. Yardımcı olabilir misiniz veya yardım edebilecek bir yere yönlendirebilir misiniz?? Bir saattir ilerleme kaydedemeden uğraşıyorum.
Bunu paylaştığınız için gerçekten çok memnunum. İnanılmaz derecede kullanışlı!!
WPBeginner Desteği
Jay, gönderiyi güncelledik ve YouTube videosu yerine gönderi bağlantısını paylaşan yeni bir kod parçacığı ekledik. Umarım yardımcı olur.
Yönetici
Ike Brown
Lütfen bağlantıya tıkladığımda çalışmıyor. düğmeler görünüyor ama tıkladığınızda hiçbir şey olmuyor
Farhan Shah
Harika ve açıklayıcı.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
WPBeginner Desteği
Muhtemelen CSS ayarlamaları yapmanız gerekecektir. Binlerce tema olduğu için bunun tüm temalarla çalışacağından emin olamayız.
Yönetici
Martin
Bu eklentiyi şimdiye kadar 27 kez oluşturdum ve hala hiç çalışmıyor! Bu fonksiyona gerçekten ihtiyacım var, lütfen bunu adım adım tekrar açıklar mısınız. Lütfen "sadece yap.." ile başlamaktan kaçının çünkü ben gerçek bir yeniyim ve burada oturduğumda hiçbir şey bilmiyorum.. Zaten functions.php eğitiminizi takip ettim ve sitem tamamen çöktü. Burada harika bir destek sunduğunuzu anlıyorum, harika! Süper!!! Ama lütfen bu kadar çok kez oluşturup adımları takip etmenin ve sonuç alamamanın gerçekten sinir bozucu olduğunu anlayın. Bu eklenti wp kurulumumda hiç görünmüyor.
Martin
“sadece functions.php’ye kopyalayın..” biliyorsunuz, functions.php’nin neresine?? 1 ile başlayan üst kısma mı yoksa 300 gibi sayılarla biten alt kısma mı?? yoksa ortada bir yere mi? Teşekkürler <3
WPBeginner Desteği
functions.php dosyanızın en altında
Yönetici
WPBeginner Desteği
Martin, hayal kırıklığınızı anlıyoruz. Sitenize başka eklentiler yükleyebilir misiniz?
Yönetici
Martin
Elbette, eklenti yüklemek sorun değil. Ben de sonunda kendim düzelttim ama sonuç sadece idare ederdi, dürüst olmak gerekirse pek düzenli görünmüyordu. Bu yüzden tekrar sildim. Başka çözümler arıyordum ama pek yok gibi görünüyor, her şey “para kazanma” veya “içerik kilitleme” ile ilgili.. neden biri içeriği kilitlemek için bir sayfayı beğensin ki? Bu eklentiye gerçekten ihtiyacım var ve insanları işe alacak param yok. Lütfen e-posta yoluyla bana destek olun, tüm bunları daha iyi görünmesi için nasıl stil verebileceğimi açıklayabilirsiniz. Lütfen Lütfen Lütfen! Gerçekten minnettar olurum. Teşekkürler <3
Patrycja
Burada da aynı durum. Sadece functions.php'ye eklemeyi denedim, sonra siteye özel bir eklentiyle. Hiçbir şey. Hiçbir şey. Ve gerçekten çalışmasını çok isterim. Tüm temalarda çalışıyor mu?
Atla
Harika bir kod, test sayfamda Google+ ile birlikte uyarlayıp uyguladım. İtmenin CSS olmadığını biliyorum ama sadece şunu belirtmek istedim: opacity 0'ın gerçekten kötü bir fikir olduğunu düşünüyorum çünkü dokunmatik ekranlarda gezinme giderek artıyor ve orada hover olayı yok, bu yüzden düğmeler asla görünmez. Ya opacity efektlerini tamamen unuturdum ya da başlangıç opacity'sini 0.5 olarak ayarlardım ya da farklı cihazları bireysel opacity ayarlarıyla hedeflemek için medya sorguları kullanırdım.
Jason Gooljar
Bu IMG özniteliği ile de yapılabilir mi?
Kannan M
Harika Hile
Pam Simmons
Bu çok yardımcı oldu. Bu örnekteki paylaşım düğmelerinin, UpWorthy düğme katmanlarının yaptığı gibi, yerleştirilmiş videoyu içeren sayfayı değil, aslında YouTube videosunun bağlantısını paylaştığı görülüyor. Kodu, YouTube bağlantısı yerine sayfanın kalıcı bağlantısını almak için nasıl değiştirmeli?
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
Teşekkür ederim. Bunu denemek ve sonuçları size bildirmek için heyecanlıyım.
Manish Misra
Gerçekten çok iyi ve işime yaramasına yardımcı oluyor....
Chris
Bu iyi. Kısa kodda çalma listesi kimliği kullanmaya ne dersiniz?
Çoğu insan gönderilerde statik videolar kullanır ancak ana sayfalarda oynatma listeleri kullanırız.
Bu kod, oynatma listesi videolarının üzerine paylaşım düğmeleri eklemek için nasıl değiştirilebilir?
Yani YouTube Kanal Galerisi eklentisiyle çalışmak için.
Bu arada – kodun ALTINDAki metniniz şöyle diyor: “Aşağıdaki kod, videolarınıza otomatik olarak Twitter ve Facebook düğmeleri ekleyen bir kısa kod oluşturur.”
“…ÖNCEKİ kod…” şeklinde mi olmalıydı?
WPBeginner Desteği
Chris makaleyi güncelledik, artık çalma listeleriyle de kullanabilirsiniz.
Yönetici
Krish Murali Eswar
Güzel bir çalışma. Genellikle kod düzeyinde bir şeyi değiştirmekten kaçınırım. Bu, doğrudan bir eklenti adayı gibi görünüyor. Emin misiniz, bir eklenti yok mu?
WPBeginner Desteği
Bu kod, siteye özel bir eklentide kullanılabilir.
Yönetici
Mayıs
Bu harika görünüyor. Kurulumu için çok basit adım adım talimatlar verebilir misiniz – belki YouTube'da?
Subbareddy
Bu harika
Steven
Harika makale!
Bu kısa kodu şimdi tinymce çubuğunda görünen html kısa kod düzenleyicisine nasıl eklersiniz?
Steve Wharton
Oldukça havalı kod. Onu denemek ve yeni siteme eklemek için sabırsızlanıyorum. Teşekkürler!
Tom Horn
Bu kodu eklemek için bir eklenti kullanmanın bir yolu var mı, böylece arka planda çalışmaya alışık değilsek işleri karıştırmayız? Bunun için teşekkürler, daha önce buna benzer şeyler gördüm ve nasıl yapılacağını gerçekten bilmek istiyordum.
WPBeginner Desteği
Evet, bunu bir siteye özel eklentiye ekleyebilirsiniz.
Yönetici
Pam Blizzard
Bunu paylaştığınız için teşekkürler, zarif bir çözüm.
Bunun "PLxxxetc" sözdizimi ile YouTube Çalma Listeleri için de işe yarayacağını düşünüyor musunuz?
WPBeginner Desteği
Temel olarak, kısa kodu herhangi bir yerleştirme türünü çıktı verecek şekilde değiştirebilir ve ardından CSS kullanarak paylaşım düğmelerini bu yerleştirmenin üzerine konumlandırabilirsiniz. Yani evet, çalışması gerekir.
Yönetici
Steven Jacobs
Bunu SoundCloud oynatıcılarıyla da yapmanın bir yolu olur mu?
Bu arada harika bir makale.
WPBeginner Desteği
Evet, sesli yayın yerleştirmeleriyle çalışması gerekir, ancak bunları kısa kod içine eklemeniz ve ardından doğru konumlandırma için CSS kullanmanız gerekecektir.
Yönetici
Zimbrul
YouTube videolarınızda bunu yapmak oldukça harika bir şey: paylaşım düğmeleri. Ayrıca FooBox tarafından eklenen resimlerdeki kayan düğmeleri de beğendim.
Pam
Bu harika, teşekkür ederim!
Bunun çalma listeleriyle ve bireysel videolarla da çalışacak şekilde ayarlanabileceğini düşünüyor musunuz?