Videos sind eine der besten Möglichkeiten, das Engagement der Benutzer zu steigern. Kürzlich fragte uns einer unserer Benutzer nach einer Möglichkeit, Overlays für die Freigabeschaltfläche für Videos ähnlich der beliebten Site UpWorthy zu erstellen. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress Share-Buttons als Overlay zu YouTube-Videos hinzufügen.
Beispiel wie es aussehen würde:
Hinzufügen von Share-Buttons als Overlay zu YouTube-Videos
Es gab mehrere Möglichkeiten, dies zu tun. Die meisten Methoden erfordern, dass Sie jedes Mal, wenn Sie ein Video hinzufügen, ein wenig HTML-Code einfügen. Stattdessen haben wir uns entschieden, einen Shortcode zu erstellen, der diesen Overlay-Effekt automatisieren würde.
Kopieren Sie einfach den folgenden Code und fügen Sie ihn in ein Site-spezifisches Plugin oder die Datei functions.php Ihres Themes ein:
/// Themelocal'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');
Dieser Code erstellt einen Shortcode, der Ihren Videos automatisch Twitter- und Facebook-Share-Links hinzufügt. Diese Schaltflächen sind nur sichtbar, wenn der Benutzer mit der Maus über das Video fährt. Sie können damit auch jeden anderen Social-Media-Kanal hinzufügen.
Um diesen Shortcode zu verwenden, müssen Sie nur die YouTube-Video-ID wie folgt in den Shortcode einfügen:
[wpb-yt video="qzOOy1tWBCg"]
Sie können die YouTube-Video-ID aus dem URL-String abrufen. So was:
Wenn Sie jetzt ein Video hinzufügen, können Sie Ihr YouTube-Video und Nur-Text-Links sehen, um das Video auf Facebook oder Twitter zu teilen. Sie werden feststellen, dass diese Links überhaupt nicht formatiert sind.
Lassen Sie uns also diese Links gestalten, um Schaltflächen zu erstellen, damit es etwas schöner aussieht. Wir werden diese Schaltflächen auch ausblenden und nur erscheinen lassen, wenn ein Benutzer seine Maus über den Videocontainer bewegt. Fügen Sie dazu das folgende CSS zum Stylesheet Ihres Child-Themes hinzu.
#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; }
Das ist alles. Jetzt sollten Sie Ihre YouTube-Videos in WordPress über die Schaltflächen zum Teilen überlagern.
Hinzufügen von Share-Buttons als Overlay für YouTube-Video-Playlists in WordPress
Nach der Veröffentlichung dieses Artikels fragten viele unserer Leser, wie dieser Code geändert werden kann, damit er sowohl für YouTube-Wiedergabelisten als auch für Videos funktioniert. Wenn Sie YouTube-Videos sowie Playlists in Ihre WordPress-Site einbetten, sollten Sie stattdessen diesen Code verwenden.
/* * Themelocal'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');
Mit dem obigen Code können Sie auch eine Playlist mit überlagernden Share-Buttons hinzufügen. Um Ihre Playlist anzuzeigen, müssen Sie die Video-ID und die Playlist-ID wie folgt im Shortcode angeben:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Sie können Ihre Video- und Playlist-IDs abrufen, indem Sie die Playlist auf YouTube aufrufen und die Listen-ID wie folgt von der URL kopieren:
Hinzufügen eines WordPress-Post-Links im Share-Button-Overlay auf YouTube-Videos
Nachdem wir diesen Artikel veröffentlicht hatten, fragten einige unserer Benutzer, dass sie möchten, dass die Share-Buttons den Link ihres WordPress-Posts anstelle des YouTube-Videolinks teilen. Dazu müssen Sie die Video-URL in den Share-Buttons durch den Permalink des WordPress-Posts ersetzen. Verwenden Sie diesen Code in Ihrer functions.php oder Ihrem Site-spezifischen Plugin:
/// Themelocal'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');
Fühlen Sie sich frei, das CSS oder die Shortcode-Snippets an Ihre Bedürfnisse anzupassen. Um Ihre Videos weiter zu optimieren, können Sie Ihre YouTube-Videos mit dem FitVids jQuery-Plugin responsive machen. Sie können auch ähnliche Videos deaktivieren, die am Ende des Videos angezeigt werden. oder erstellen Sie sogar vorgestellte Bilder aus YouTube-Video-Miniaturansichten.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, benutzerdefinierte Freigabeschaltflächen als Overlay für YouTube-Videos in WordPress hinzuzufügen. Teilen Sie uns mit, welche Social-Media-Kanäle Sie zu Ihren Videos hinzufügen möchten, indem Sie unten einen Kommentar hinterlassen.