如何在WordPress的YouTube視頻上添加共享按鈕作為覆蓋


視頻是提高用戶參與度的最佳方法之一。 最近,我們的一位用戶向我們詢問了一種如何在類似於熱門網站UpWorthy的視頻上創建共享按鈕疊加圖的方法。 在本文中,我們將向您展示如何在WordPress的YouTube視頻上添加共享按鈕作為覆蓋。

看起來像的例子:

如何在WordPress的YouTube視頻上添加共享按鈕作為覆蓋

在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 = '
https://www.youtube.com/watch?v=' . $video . ''; // Add Facebook share button $string .= ''; // Close video container $string .= '
'; // Return output return $string; } // Add Shortcode add_shortcode('wpb-yt', 'wpb_yt_buttons');

這段代碼創建了一個短代碼,該短代碼會自動將twitter和facebook共享鏈接添加到您的視頻中。 僅當用戶將鼠標移到視頻上時,這些按鈕才可見。 您也可以使用它添加任何其他社交媒體渠道。

要使用此簡碼,您需要做的就是在簡碼中添加YouTube視頻ID,如下所示:

[wpb-yt video="qzOOy1tWBCg"]

您可以從URL字符串獲取YouTube視頻ID。 像這樣:

查找YouTube視頻ID

現在,當您添加視頻時,您將能夠看到您的YouTube視頻和純文本鏈接,以便在Facebook或Twitter上共享該視頻。 您會發現這些鏈接根本沒有樣式。

因此,讓這些鏈接樣式化以創建按鈕,這樣看起來會更好一些。 我們還將隱藏這些按鈕,並使它們僅在用戶將鼠標放在視頻容器上時才顯示。 為此,將以下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;
}

就這樣。 現在,您應該在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 = '
https://www.youtube.com/watch?v=' . $video . ''; // Add Facebook button $string .= ''; // Close video container $string .= '
'; // If no playlist ID is provided else : //Display video $string .= '
https://www.youtube.com/watch?v=' . $video . ''; // Add Facebook button $string .= ''; // Close video container $string .= '
'; 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,如下所示:

從URL獲取YouTube視頻和播放列表ID

在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 = '
https://www.youtube.com/watch?v=' . $video . ''; // Get post permalink and encode URL $permalink_encoded = urlencode(get_permalink()); // Add Facebook share button $string .= ''; // Close video container $string .= '
'; // Return output return $string; } // Add Shortcode add_shortcode('wpb-yt', 'wpb_yt_buttons');

可以隨意修改CSS或簡碼片段,以滿足您的需求。 為了進一步優化視頻,您可以使用FitVids jQuery插件使YouTube視頻具有響應能力。 您還可以關閉顯示在視頻末尾的相關視頻。 甚至可以從YouTube視頻縮略圖創建特色圖片。

我們希望本文能幫助您添加自定義共享按鈕,作為WordPress中YouTube視頻的疊加。 通過在下面留下評論,讓我們知道您打算在視頻中添加哪些社交媒體渠道。