動画は、ユーザーエンゲージメントを高めるための最良の方法の1つです。最近、ユーザーの1人から、人気のサイトUpWorthyに似た、動画に共有ボタンのオーバーレイを作成する方法について質問がありました。この記事では、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 = '<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&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');
このコードは、動画にツイッターとフェイスブックの共有リンクを自動的に追加するショートコードを作成します。これらのボタンは、ユーザーがマウスを動画の上に移動させたときにのみ表示されます。他のソーシャルメディアチャネルを追加するためにも使用できます。
このショートコードを使用するには、YouTube動画IDをショートコードに次のように追加するだけです。
[wpb-yt video="qzOOy1tWBCg"]
YouTube動画IDはURL文字列から取得できます。例えば、次のようになります。
動画を追加すると、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 = '<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&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&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を取得できます。次のようになります。
YouTube動画の共有ボタンオーバーレイにWordPress投稿リンクを追加する
この記事を公開した後、一部のユーザーから、共有ボタンでYouTube動画のリンクではなく、WordPress投稿のリンクを共有したいという要望がありました。それを行うには、共有ボタンの動画URLをWordPress投稿のパーマリンクに置き換える必要があります。次のコードを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&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動画のサムネイル から作成することもできます。
この記事が、WordPressでYouTube動画にカスタム共有ボタンをオーバーレイとして追加するのに役立ったことを願っています。コメントで、どのソーシャルメディアチャンネルを動画に追加する予定か教えてください。
トレーシー
6年後のことを考えると、返信はあまり期待していませんが、最後のショートコードでは、YouTubeの代わりにWordPressのURLを入力するように言っていますが、そのコードが何であるか、どこに配置するかは言っていません。非常に新しい初心者にはそれがわからないことを心に留めておいてください。
WPBeginnerサポート
混乱させてしまった場合は申し訳ありません。今後、より明確にするために言葉遣いを改善するよう努めます。
管理者
Craig
「ほとんどの方法では、動画を追加するたびにHTMLコードの一部を貼り付ける必要があります」
この方法で学びたいのですが…どうすればできますか？
ありがとう
Martin Dekker
サイトに掲載しているYouTube動画から、別の静止画像を取得したいと考えています。動画の所有者が設定している画像は気に入らないのですが、動画のタイムラインから静止画像を選択して、動画終了時の画像にできると聞きました。自分の動画ではないので、埋め込みiframeコードでこれを実行する必要があります。
これは可能ですか？可能であれば、コードを教えていただけますか。ありがとうございます。
Tizy
こんにちは。
これは素晴らしいチュートリアルです。YouTube動画の最後に共有ボタンを表示することは可能ですか？そして、その方法は？ご協力に感謝いたします。
WPBeginnerスタッフ
Dave様、YouTube動画ではなく投稿リンクを共有する方法を含めるように記事を更新しました。「YouTube動画の共有ボタンオーバーレイにWordPress投稿リンクを追加する」セクションの手順に従ってください。
Dave
コメントを編集しようとしていたのですが、「しまった！」という瞬間が訪れ、サイトプラグインを有効にするのを忘れていたことに気づきました。コメントの承認が必要だったため、編集できませんでした。
有効にしたところ、FacebookとTwitterの共有オプションが動画の上にオーバーレイ表示されませんでした。動画の下に表示されました。
よくわかりませんが、プロセス中に何か間違ったことをしたのかもしれません。
あなたのサイトは素晴らしいので、これからも素晴らしい記事を求めて戻ってきます。
Jessie Delmo
動画の下にできる大きなスペースを調整するにはどうすればよいですか？
Christenger
これは素晴らしい解決策ですが、奇妙な問題があります。一部のIDは機能しますが、他のIDは機能しません。
例えば、このIDは私には機能します [wpb-yt video=”7vJdBec_B6A”] が、この他のIDは機能しません [wpb-yt video=”CYveDEem5VA”]
Rednasil
皆さん、チュートリアルありがとうございます。すぐに自分のサイトで動作しました。
しかし、Yoastの動画SEOプラグインを使用しており、ショートコードで埋め込まれたYouTube動画を認識していないことに気づきました。
これを実現する方法はありますか？ショートコードを使わない回避策のようなものは？
WPBeginnerサポート
YoastのVideo SEOプラグインでは試していません。何ができるか見てみましょう。
管理者
Rednasil
ありがとう、皆さんがこの問題の解決策を見つけられることを願っています。
Mat
皆さん、こんにちは。
YouTube動画に「YouTube動画にオーバーレイ表示される共有ボタン」を、Revolution Slider内に埋め込んだYouTube動画に追加するにはどうすればよいですか？
どのPHPファイルとCSSファイルにコードを貼り付ければよいですか？
ご協力に大変感謝いたします!!
Mat
ジェイ
こんにちは — 投稿を本当に感謝しています。
functions.phpスニペットを変更して、共有/ツイートボタンがyoutube.comサイトではなく私のサイトを参照するようにしようとしています。残念ながら、あらゆる種類の問題が発生しています。手伝ってもらえますか、または手伝ってくれる場所に案内してもらえますか？1時間も進歩せずにいじっています。
この投稿をありがとうございます。非常に役立ちます!!
WPBeginnerサポート
Jay様、投稿を更新し、YouTube動画ではなく投稿リンクを共有する新しいスニペットを追加しました。お役に立てば幸いです。
管理者
Ike Brown
リンクをクリックしても機能しません。ボタンは表示されますが、クリックしても何も起こりません。
Farhan Shah
素晴らしいし、説明も的確です。
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
WPBeginnerサポート
CSSの調整が必要になるでしょう。何千ものテーマがあるため、すべてのテーマで機能することを確認することはできません。
管理者
Martin
このプラグインを27回作成しましたが、まったく機能しません！この機能が本当に必要なので、もう一度ステップバイステップで説明していただけますか？「ただ～してください」で始めないでください。私は本当に初心者で、ここに座っているときは何も知りません。すでにfunctions.phpのチュートリアルに従いましたが、サイトが完全にクラッシュしました。ここで素晴らしいサポートを提供していることは理解しています、素晴らしいです！サムズアップ!!素晴らしい!!!しかし、何度も作成してステップに従っても結果が出ないことが本当にイライラすることを理解してください。このプラグインは私のwpインストールにまったく表示されません。
Martin
「functions.phpにコピーするだけ…」と言っても、functions.phpのどこにですか？先頭の1から始まる部分ですか、それとも300などの数字がある末尾の部分ですか？それとも真ん中のどこかですか？ありがとうございます<3
WPBeginnerサポート
functions.php ファイルの一番下
管理者
WPBeginnerサポート
Martin様、ご不便をおかけしております。サイトに他のプラグインをインストールできますか？
管理者
Martin
プラグインのインストールは問題ありません。最終的には自分で修正しましたが、結果はまあまあで、あまりきれいに見えませんでした。そのため、削除しました。他の解決策を探しましたが、見つかりませんでした。すべて「お金を稼ぐ」か「コンテンツをロックする」に関連しています。なぜ誰かがコンテンツをロックするためにページを「いいね！」するのでしょうか？このプラグインが本当に必要で、人を雇うお金がありません。メールでサポートを提供していただけませんか？全体をより良く見せるためのスタイリング方法を説明していただけますか？どうかお願いします！本当に感謝します。ありがとうございます <3
Patrycja
こちらも同じです。functions.phpに追加してみましたが、サイト固有のプラグインでも試しました。何も起こりません。全くです。そして、本当に機能してほしいと思っています。すべてのテーマで機能しますか？
スキップ
素晴らしいコードで、テストページに実装し、Google+も追加しました。CSSではないことは承知していますが、タッチスクリーンでのブラウジングが増えているため、opacity 0は非常に悪い考えだと指摘したいと思います。タッチスクリーンにはホバーイベントがないため、ボタンが表示されなくなります。opacityエフェクトを完全に削除するか、初期opacityを0.5に設定するか、メディアクエリを使用して個別のopacity設定を持つ異なるデバイスをターゲットにすることをお勧めします。
Martin Gooljar
IMG属性でもこれが可能ですか？
カナン・M
素晴らしいトリック
Pam Simmons
これは非常に役立ちます。この例の共有ボタンは、UpWorthyのボタンオーバーレイが行うように、埋め込まれた動画を含むページではなく、実際にはYouTube動画のリンクを共有しているようです。YouTubeリンクではなく、ページのパーマリンクを取得するようにコードを変更するにはどうすればよいですか？
Dave
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.
マデリン
ありがとうございます。これを試してみて、結果をお知らせするのが楽しみです。
マニッシュ・ミスラ
とても良いですし、私の仕事に役立ちます…。
Chris
これは良いですね。ショートコードでプレイリストIDを使用するのはどうですか？
ほとんどの人は投稿に静止画動画を使用しますが、ホームページにはプレイリストを使用します。
このコードを、プレイリスト動画の上に共有ボタンを追加するように変更するにはどうすればよいですか？
つまり、YouTube Channel Galleryプラグインと連携するためです。
ところで、コードの下のテキストには次のように書かれています。「以下のコードは、動画にTwitterとFacebookボタンを自動的に追加するショートコードを作成します。」
「…前のコード…」と言うべきではありませんか？
WPBeginnerサポート
Chris様、記事を更新しました。プレイリストでも使用できるようになりました。
管理者
Krish Murali Eswar
ナイスです。私は通常、コードレベルで何かを変更することに抵抗があります。これは簡単なプラグイン候補のようです。プラグインがないことを確認しましたか？
WPBeginnerサポート
このコードはサイト固有のプラグインで使用できます。
管理者
5月
これは素晴らしいですね。インストール方法について、非常に簡単なステップバイステップの説明をいただけますか？YouTubeなどで。
Subbareddy
これは素晴らしいです
Steven
素晴らしい記事です！
TinyMCEバーに表示されるHTMLショートコードエディタに、このショートコードを現在どのように追加しますか？
スティーブ・ウォートン
かなりクールなコードです。これをいじって、新しいサイトに追加するのが楽しみです。ありがとう！
Tom Horn
コードの裏側での作業に慣れていない場合、コードを台無しにしないように、プラグインを使用してこのコードを追加する方法はありますか？これをありがとうございます。以前にもこのようなものを見たことがあり、どのように行うのか本当に知りたかったです。
WPBeginnerサポート
はい、これを サイト固有のプラグイン に追加できます。
管理者
Pam Blizzard
これを共有していただきありがとうございます。エレガントな解決策ですね。
「PLxxxetc」の構文で、YouTubeプレイリストにも応用できると思いますか？
WPBeginnerサポート
基本的に、ショートコードを変更してあらゆる種類の埋め込みを出力し、CSSを使用してその埋め込みに共有ボタンを配置できます。ですから、はい、機能するはずです。
管理者
Steven Jacobs
SoundCloudプレーヤーでも同様のことを行う方法はありますか？
ところで、素晴らしい記事です。
WPBeginnerサポート
はい、SoundCloud埋め込みでも機能するはずですが、ショートコードに追加してから、適切な配置のためにCSSを使用する必要があります。
管理者
Zimbrul
YouTube動画にこのような共有ボタンを付けるのはとてもクールですね。FooBoxで追加される画像上のフローティングボタンも気に入っています。
Pam
これは素晴らしいです、ありがとうございます！
プレイリストだけでなく、個々の動画でも機能するように調整することは可能だと思いますか？