You are here:  Home » PHP » 如何在WordPress中的YouTube视频上添加共享按钮作为叠加

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

它的外观示例:

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

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

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

只需将以下代码复制并粘贴到特定于站点的插件或主题的functions.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&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");

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

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

[wpb-yt video =“qzOOy1tWBCg”]

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

Finding the YouTube Video 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视频和播放列表,那么您应该使用此代码。

/*
* 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");

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

[wpb-yt video =“exP9N3rIfV0”playlist =“UUhA624rCabHAmd6lpkLOw7A”]

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

Getting YouTube Video and Playlist ID from URL

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

在我们发布这篇文章之后,我们的一些用户要求他们希望共享按钮分享他们的WordPress帖子链接而不是YouTube视频链接。为此,您需要使用WordPress帖子的永久链接替换共享按钮中的视频URL。在functions.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>";

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

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

评论被关闭。