如何在WordPress中的YouTube视频上添加共享按钮作为叠加

发表于： 2019年1月12日 2023年6月15日
分类： PHP, WordPress, WordPress入门教程
标签： Facebook, playlist, shortcode, Twitter, WordPress, www, 添加共享按钮

视频是提升用户参与度的最佳方式之一。最近，我们的一位用户向我们询问了一种在与热门网站UpWorthy类似的视频上创建共享按钮覆盖的方法。在本文中，我们将向您展示如何在WordPress的YouTube视频中添加共享按钮作为叠加层。

在YouTube视频上添加共享按钮作为叠加层

有几种方法可以完成此操作。大多数方法都要求您在每次添加视频时粘贴一些HTML代码。而不是这样做，我们决定创建一个自动化这种叠加效果的短代码。

只需将以下代码复制并粘贴到特定于站点的插件或主题的functions.php文件中：

/// YouTube Share Overlay Buttons

function 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("yt", "yt_buttons");

此代码创建一个短代码，自动为您的视频添加Twitter和Facebook共享链接。这些按钮仅在用户将鼠标悬停在视频上时可见。您也可以使用它添加任何其他社交媒体渠道。

要使用此短代码，您需要做的只是在短代码中添加YouTube视频ID，如下所示：

[yt video =“qzOOy1tWBCg”]

您可以获取YouTubeURL字符串中的视频ID。像这样：

现在，当您添加视频时，您将能够看到您的YouTube视频和纯文本链接，以便在Facebook或Twitter上分享视频。您会注意到这些链接根本没有样式。

因此，让这些链接设置样式以创建按钮，因此它看起来更好一些。我们还将隐藏这些按钮，并仅在用户将鼠标放在视频容器上时才显示。为此，请将以下CSS添加到Child Theme的样式表中。

#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;
}

就这样。现在，您应该在WordPress上的YouTube视频中叠加共享按钮。

在WordPress中添加共享按钮作为YouTube视频播放列表的叠加层

在发布这篇文章之后，我们的许多读者都会问，如何修改此代码以适用于YouTube播放列表和视频。如果您在WordPress网站上嵌入了YouTube视频和播放列表，那么您应该使用此代码。

/*
* Share Overlay Buttons
* on YouTube Videos and Playlists
*/

function 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");

使用上面的代码，您还可以添加带有重叠共享按钮的播放列表。要显示您的播放列表，您必须在短代码中提供视频ID和播放列表ID，如下所示：

[yt video =“exP9N3rIfV0” playlist =“UUhA6264rCCabHAmd6lpkLOw7A”]

您可以通过访问YouTube上的播放列表并从URL复制列表ID来获取您的视频和播放列表ID，如下所示：

在YouTube视频上的分享按钮叠加中添加WordPress帖子链接

在我们发布这篇文章之后，我们的一些用户要求他们希望共享按钮分享他们的WordPress帖子链接而不是YouTube视频链接。为此，您需要使用WordPress帖子的永久链接替换共享按钮中的视频URL。在functions.php或特定于站点的插件中使用此代码：

///YouTube Share Overlay Buttons

function 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("yt", "yt_buttons");

可以随意修改CSS或短代码片段以满足您的需求。为了进一步优化您的视频，您可以使用FitVids jQuery插件让您的YouTube视频响应。您还可以关闭显示在视频末尾的相关视频。甚至可以从YouTube视频缩略图创建精选图片。

如何为您的博客帖子截取屏幕截图（初学者指南） 2018年12月24日
您应该为您的网站使用WordPress的6个重要原因 2023年3月12日
什么是WordPress VIP？有什么好处？（和3个替代品） 2018年12月24日
如何在WordPress中创建一个“粘性”浮动页脚栏 2019年3月13日
什么是VoIP，您的企业网站需要它吗？ 2018年12月24日
什么是Word中的rel =“noopener”？（解释） 2018年12月24日
如何管理WordPress评论通知电子邮件 2018年12月26日
如何创建具有多个收件人的联系表（4 种方式） 2020年3月25日
如何检查WordPress安全更新（初学者指南） 2018年12月24日
如何创建一个WordPress子主题 2021年9月6日
如何在WordPress中添加赞助商帖子前缀到帖子标题 2018年12月29日