Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// WPBeginner's YouTube Share Overlay Buttons | |
| function add_share_buttons($atts) { | |
| // ショーートコードでYoutubeのIDを取得 | |
| extract( shortcode_atts( array( | |
| 'video' => '' | |
| ), $atts ) ); | |
| // 動画を表示 | |
| $string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>'; | |
| // Facebookのシェアボタン | |
| $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>'; | |
| // Twitterのシェアボタン | |
| $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>'; | |
| $string .= '</div>'; | |
| return $string; | |
| } | |
| add_shortcode('foobar', 'add_share_buttons'); | |
| //[foobar video="Youtubeの動画ID"]というショートコードを書く |
Screen shot
Note
| Description | YoutubeのIDをショートコードで指定するだけで、その動画に対するシェアボタンを、マウスホバーで表示出来るようにする |
|---|---|
| WordPress Ver. | 3.8.1 |
| Via | How to Add Share Buttons as Overlay on YouTube Videos in WordPress |
