Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te YouTube Videolarına Paylaşım Düğmelerini Yer Paylaşımı Olarak Ekleme

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

Videolar, kullanıcı etkileşimini artırmanın en iyi yollarından biridir. Kısa süre önce kullanıcılarımızdan biri, popüler UpWorthy sitesine benzer şekilde videolar üzerinde paylaş düğmesi kaplamaları oluşturmanın bir yolunu sordu. Bu makalede, WordPress’te YouTube videolarına paylaşım düğmelerini nasıl ekleyeceğinizi göstereceğiz.

Nasıl görüneceğine dair bir örnek:

How to Add Share Buttons as Overlay on YouTube Videos in WordPress

YouTube Videolarına Paylaşım Düğmelerini Yer Paylaşımı Olarak Ekleme

Bunun yapılabileceği birkaç yol vardı. Çoğu yol, her video eklediğinizde bir parça HTML kodu yapıştırmanızı gerektiriyordu. Bunu yapmak yerine, bu kaplama efektini otomatikleştirecek bir kısa kod oluşturmaya karar verdik.

Aşağıdaki kodu kopyalayıp siteye özel bir eklentiye veya temanızın functions.php dosyasına 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&amp;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ı faresini videonun üzerine getirdiğinde görünür. Başka herhangi bir sosyal medya kanalı eklemek için de kullanabilirsiniz.

Bu kısa kodu kullanmak için tek yapmanız gereken YouTube video kimliğini aşağıdaki gibi kısa koda eklemektir:

[wpb-yt video="qzOOy1tWBCg"]

YouTube video kimliğini URL dizesinden alabilirsiniz. Bunun gibi:

Finding the YouTube Video ID

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ç şekillendirilmediğini fark edeceksiniz.

Bu bağlantıları düğmeler oluşturacak şekilde şekillendirelim, böylece biraz daha güzel görünür. Ayrıca bu düğmeleri gizleyeceğiz ve yalnızca kullanıcı faresini video konteynerinin üzerine getirdiğinde görünmelerini sağlayacağız. Bunu yapmak için Alt Temanızın stil sayfasına aşağıdaki CSS’yi 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ızda paylaşım düğmelerinin yer alması gerekir.

WordPress’te YouTube Video Oynatma Listeleri için Paylaşım Düğmelerini Yerleşim Olarak Ekleme

Bu makaleyi yayınladıktan sonra birçok okuyucumuz, bu kodun videoların yanı sıra YouTube oynatma listeleri için de çalışacak şekilde nasıl değiştirilebileceğini sordu. WordPress sitenize YouTube videolarının yanı sıra oynatma listeleri de 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&amp;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&amp;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üğmeleriyle birlikte bir oynatma listesi de ekleyebilirsiniz. Oynatma listenizi görüntülemek için kısa kodda video kimliğini ve oynatma listesi kimliğini aşağıdaki gibi sağlamanız gerekecektir:

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

Video ve oynatma listesi kimliklerinizi YouTube’daki oynatma listesini ziyaret ederek ve liste kimliğini URL’den kopyalayarak alabilirsiniz, bunun gibi:

Getting YouTube Video and Playlist ID from URL

YouTube Videolarında Paylaş Düğmesi Yerleşimine WordPress Gönderi Bağlantısı Ekleme

Bu makaleyi yayınladıktan sonra, bazı kullanıcılarımız paylaşım düğmelerinin YouTube video bağlantısı yerine WordPress yazılarının bağlantısını paylaşmasını istediler. Bunu yapmak için, paylaş düğmelerindeki video URL’sini WordPress yazısının kalıcı bağlantısıyla değiştirmeniz gerekir. Bu kodu functions.php dosyanızda veya siteye özel eklentinizde 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&amp;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’yi veya kısa kod parçacıklarını değiştirmekten çekinmeyin. Videolarınızı daha da optimize etmek için FitVids jQuery eklentisini kullanarak YouTube videolarınızı duyarlı hale getirebilirsiniz. Ayrıca videonun sonunda görünen ilgili videoları da kapatabilirsiniz. hatta YouTube video küçük resimlerinden öne çıkan görüntüler oluşturun.

Bu makalenin WordPress’te YouTube videolarına kaplama olarak özel paylaşım düğmeleri eklemenize yardımcı olduğunu umuyoruz. Aşağıya bir yorum bırakarak videolarınıza hangi sosyal medya kanallarını eklemeyi planladığınızı bize bildirin.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

49 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Tracy says

    considering this is six years later I’m not really expecting a reply but, on the last shortcode you say to put in the wordpress url instead of the youtube but you don’t say what that code is or where to put it. Can you please keep in mind that very new beginners aren’t just going to know how to do this?

    • WPBeginner Support says

      Apologies for any confusion, we will be sure to endeavor to improve our wording in the future to make this more clear

      Yönetici

  3. Craig says

    “Most ways would require you to paste a bits of HTML code every time you add a video”

    I’d like to learn this way…. how is it done?

    Thanks

  4. Martin Dekker says

    I’m after a different still image from a youtube video that I have on my site. The one the owner of the video has I don’t like and I’ve heard you can pick a image from the video time line to become your still image ones video ends. Since its not my video I need to beable to do this in the embed iframe code.

    Is this possible and if so could you give me the code. Thank you

  5. Tizy says

    Hello,
    this is an incredible tutorial. It’s possible to show share button at the end of the youtube video and how? Thanks in advance for your help.

  6. WPBeginner Staff says

    Dave, we updated the article to include a method that will share your post link instead of youtube video. Follow the instructions in the section “Adding WordPress Post Link in Share Button Overlay on YouTube Videos”.

    • Dave says

      I was going to go back and edit my comment because I had a “D’oh” moment and noticeed I never activated the site plugin. I wasn’t able to edit because my comment needed to be approved.

      When I did activate it my facebook and twitter share options didn’t overlay the video. They were below the video.

      I don’t know, maybe I did something wrong in the process.

      I like your site and will continue to come back for more great articles.

  7. Christenger says

    This is a great solution, but I have a weird problem. Some IDs works but others not.

    For example, this ID works for me [wpb-yt video=”7vJdBec_B6A”] but this other not [wpb-yt video=”CYveDEem5VA”]

  8. Rednasil says

    Hi guys, thanks for the tutorial.. I got this working in no time on my site.

    But I’m using Yoast’s video seo plugin, and I noticed that it’s not recognizing youtube videos embedded with the shortcode.

    Is there a way to make this happen? Perhaps a work-around where you don’t need to use shortcodes??

  9. Mat says

    Hi everybody,

    How can I add “Share Buttons as Overlay on YouTube Videos” with a Youtube embed inside the Revolution Slider?
    In which php and css files should I paste the codes?

    Thank your help is very appreciated!!

    Mat

  10. Jay says

    Hey there — really appreciate the post.

    I’m trying to modify the functions.php snippet so the share/tweet buttons will refer to my site instead of the youtube.com site. Unfortunately I’m having all sorts of problems. Can you help or point me to somewhere that can help?? I’ve been messing with it for an hour with no progress.

    Really glad you posted this. Its incredibly useful!!

  11. Martin says

    I have created this plugin now 27 times and still it doesnt work at all! I really need this function, could you please explain this again and step by step. Please avoid to start with “just do..” because I am a real newbie and when I sit here I dont know anything.. I have already followed your functions.php tutorial and my site crashed completely. I under stand you are offering a great support here, awesome! Thumbs Up!! Super!!! But please understand that this is really frustrating to create and follow steps so many times and no result. This plugin does not appear in my wp install at all.

    • Martin says

      “just copy it in functions.php..” you know, where in functions.php?? on top where it starts with 1 or on the bottom where there are numbers 300 and so forth?? or in the middle somewhere? Thank you <3

      • Martin says

        sure, no problem to install plugins. I have also fixed this myself in the end, but the result was just so so, its not looking very neat tbh. So I deleted it again. I was searching for other solutions but they dont seem to exist, everything is related to “making money” or “locking content” .. why would anyone like a page for locking it up? I really need this plugin and I don’t have any money to hire people. Please offer me some support via email, you could explain to me how I can style the whole thing so it looks better. Please Please Please! I would really appreciate this. Thank you <3

    • Patrycja says

      The same here. I tried just adding it to functions.php, then with site-specific plugin. Nothing. Nada. And I really would love it to work. Does it work on all themes?

  12. Skip says

    Awesome code which I’ve adapted and implemented on a test page including Google+ too. I know the thrust isn’t CSS but just wanted to make the point that I think opacity 0 is a really bad idea as more and more browsing is done on touchscreen where there is no hover event and the buttons would never be seen. I would either forget opacity effects altogether or set an initial opacity at 0.5 or use media queries to target different devices with individual opacity settings.

  13. Pam Simmons says

    This is very helpful. It appears that the share buttons in this example actually share the YouTube video link, rather than the page containing the embeded video like the UpWorthy button overlays do. How would one alter the code to grab the page permalink rather than the youtube link?

    • Dave says

      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. :-(

  14. Chris says

    This is good. What about using a playlist ID in the short code?

    Most people use static videos on posts but on home pages we use playlists.

    How could this code be modified to add the share buttons over playlist videos?

    I.e. to work with the YouTube Channel Gallery plugin.

    BTW – UNDER the code your text says this: “The following code creates a shortcode that automatically adds twitter and facebook buttons to your videos.”

    Shouldn’t that say “…PRECEDING code…”?

  15. Krish Murali Eswar says

    Nice one. I am generally averse to changing anything at the code level. This seems like a straightforward plugin candidate. Are you sure there is no plugin?

  16. May says

    This looks great. Could you give a very simple step by step instruction on how to install it – perhaps on YouTube?

  17. Steven says

    Great article!

    How do you add this shortcode now to the html shortcode editor that appears on the tinymce bar?

  18. Tom Horn says

    Is there a way to utilize a plugin to add this code so we don’t screw things up if we’re not use to working under the hood? Thanks for this, I have seen things like this before and really wanted to know how to do it.

  19. Pam Blizzard says

    Thank you for sharing this, is an elegant solution.
    Do you think it might work for YouTube Playlists as well, with the “PLxxxetc” syntax?

  20. Zimbrul says

    This is quite a cool thing to do on your Youtube videos: sharing buttons. I also like those floating buttons on images added by FooBox

  21. Pam says

    This is awesome, thank you!
    Do you think it could be adjusted to work with playlists as well as individual videos?

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.