如何在 WordPress 中为 YouTube 视频添加覆盖分享按钮

10/27/2022

如何在 WordPress 中为 YouTube 视频添加覆盖分享按钮

视频是提升用户参与度的最佳方式之一。最近有用户询问我们，如何像知名网站 UpWorthy 那样在视频上创建分享按钮覆盖。在这篇文章中，我们将向您展示如何在 WordPress 中为 YouTube 视频添加覆盖分享按钮。

添加分享按钮作为 YouTube 视频的覆盖有多种方法，大多数方法都需要每次添加视频时粘贴一些 HTML 代码。为了避免这种重复操作，我们决定创建一个简码，以自动化该覆盖效果。

添加分享按钮作为 YouTube 视频的覆盖

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

/// WPressize Me 的 YouTube 分享覆盖按钮
function wpb_yt_buttons($atts) { 
  extract( shortcode_atts( array('video' => ''), $atts ) );
  $string = '';
  $string .= 'Facebook'; 
  $string .= 'Tweet';
  $string .= '';
  return $string; 
}
add_shortcode( 'wpb-yt', 'wpb_yt_buttons' );

以上代码创建一个简码，可以自动将 Twitter 和 Facebook 分享链接添加到您的视频上。这些按钮只有当用户将鼠标移到视频上时才会可见。您还可以将任何其他社交媒体渠道添加到此简码中。要使用此简码，您只需添加 YouTube 视频 ID，如下所示：

[wpb-yt video="qzOOy1tWBCg"]

您可以从 URL 字符串中获取 YouTube 视频 ID，如下所示：

现在，当您添加视频时，您将能够看到您的 YouTube 视频和用于在 Facebook 或 Twitter 上分享的视频链接。这些链接并未经过任何样式设置。

设置分享按钮样式

为了让这些链接看起来更漂亮，让我们将它们样式化以创建按钮，并仅在用户将鼠标移到视频容器上时才显示这些按钮。为此，将以下 CSS 添加到您的子主题的样式表中：

#share-video-overlay {
  position: relative;
  right: 40px;
  top: -190px;
  list-style-type: none;
  display: block;
  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;
}
.share-video-overlay li { 
  margin: 5px 0px;
}
#facebook {
  color: #ffffff;
  background-color: #3e5ea1;
  width: 70px;
  padding: 5px;
}
.facebook a { 
  color:#fff;
  text-decoration:none;
}
#twitter { 
  background-color:#00a6d4;
  width: 70px;
  padding: 5px;
}
.twitter a { 
  color:#FFF;
  text-decoration:none;
}

这样，您现在应该在您的 YouTube 视频中拥有覆盖的分享按钮。

添加 WordPress 帖子链接到 YouTube 视频的覆盖分享按钮上

在发布这篇文章后，有些用户询问他们是否可以在分享按钮中共享 WordPress 帖子的链接，而不是 YouTube 视频链接。为此，您需要将 share buttons 中的视频链接替换为 WordPress 帖子的 permalink。在您的 functions.php 文件或站点特定插件中使用以下代码：

/// WPressize Me 的 YouTube 分享覆盖按钮
function wpb_yt_buttons($atts) { 
extract( shortcode_atts( array('video' => ''), $atts ) );
$string = '';
$permalink_encoded = urlencode(get_permalink()); 
$string .= 'Facebook'; 
$string .= 'Tweet';
$string .= '';
return $string; 
}
add_shortcode('wpb-yt', 'wpb_yt_buttons');

请随意修改 CSS 或简码片段以满足您的需求。为了进一步优化您的视频，您可以使用 FitVids jQuery 插件使您的 YouTube 视频响应更好。您还可以关闭视频结束时出现的相关视频，甚至可以从 YouTube 视频缩略图创建特色图片。