Videos sind eine der besten Möglichkeiten, die Benutzerbindung zu erhöhen. Kürzlich fragte uns einer unserer Benutzer nach einer Möglichkeit, Share-Button-Overlays auf Videos zu erstellen, ähnlich wie bei der beliebten Seite UpWorthy. In diesem Artikel zeigen wir Ihnen, wie Sie Share-Buttons als Overlay auf YouTube-Videos in WordPress hinzufügen.
Beispiel, wie es aussehen würde:
Share-Buttons als Overlay auf YouTube-Videos hinzufügen
Es gab mehrere Möglichkeiten, dies zu tun. Die meisten Wege erforderten, dass Sie jedes Mal, wenn Sie ein Video hinzufügen, ein Stück HTML-Code einfügen. Anstatt dies zu tun, haben wir uns entschieden, einen Shortcode zu erstellen, der diesen Overlay-Effekt automatisiert.
Kopieren Sie einfach den folgenden Code und fügen Sie ihn in ein standortspezifisches Plugin oder die functions.php-Datei Ihres Themes ein:
/// 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');
Dieser Code erstellt einen Shortcode, der automatisch Twitter- und Facebook-Freigabelinks zu Ihren Videos hinzufügt. Diese Schaltflächen sind nur sichtbar, wenn der Benutzer mit der Maus über das Video fährt. Sie können ihn auch verwenden, um andere soziale Medienkanäle hinzuzufügen.
Um diesen Shortcode zu verwenden, müssen Sie lediglich die YouTube-Video-ID wie folgt in den Shortcode einfügen:
[wpb-yt video="qzOOy1tWBCg"]
Sie können die YouTube-Video-ID aus der URL-Zeichenfolge abrufen. So:
Wenn Sie jetzt ein Video hinzufügen, können Sie Ihr YouTube-Video und einfache Textlinks zum Teilen des Videos auf Facebook oder Twitter sehen. Sie werden feststellen, dass diese Links überhaupt nicht formatiert sind.
Lasst uns diese Links also so gestalten, dass sie Schaltflächen bilden, damit es etwas schöner aussieht. Wir werden diese Schaltflächen auch ausblenden und sie nur anzeigen, wenn ein Benutzer mit der Maus über den Videocontainer fährt. Fügen Sie dazu den folgenden CSS-Code in die Stylesheet Ihres Child Themes ein.
#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 Share-Buttons über Ihren YouTube-Videos in WordPress haben.
Teilen-Buttons als Overlay für YouTube-Videoplaylists in WordPress hinzufügen
Nach der Veröffentlichung dieses Artikels fragten viele unserer Leser, wie dieser Code modifiziert werden kann, um auch für YouTube-Playlists zu funktionieren. Wenn Sie YouTube-Videos sowie Playlists auf Ihrer WordPress-Website einbetten, sollten Sie stattdessen diesen Code verwenden.
/*
* 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');
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 im Shortcode wie folgt angeben:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Sie können Ihre Video- und Playlist-IDs abrufen, indem Sie die Playlist auf YouTube besuchen und die Listen-ID aus der URL kopieren, wie folgt:
WordPress Beitragslink im Share-Button-Overlay auf YouTube-Videos hinzufügen
Nachdem wir diesen Artikel veröffentlicht hatten, fragten einige unserer Benutzer, dass sie die Share-Buttons gerne den Link ihres WordPress-Posts teilen würden, anstatt den YouTube-Video-Link. Um dies zu tun, 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 einem standortspezifischen Plugin:
/// 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');
Fühlen Sie sich frei, die CSS- oder Shortcode-Snippets nach Ihren Bedürfnissen anzupassen. Um Ihre Videos weiter zu optimieren, können Sie Ihre YouTube-Videos mit FitVids jQuery Plugin responsiv machen. Sie können auch verwandte Videos ausschalten, die am Ende des Videos erscheinen. oder sogar Vorschaubilder aus YouTube-Video-Thumbnails erstellen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, benutzerdefinierte Share-Buttons als Overlay auf YouTube-Videos in WordPress hinzuzufügen. Lassen Sie uns wissen, welche Social-Media-Kanäle Sie zu Ihren Videos hinzufügen möchten, indem Sie unten einen Kommentar hinterlassen.
Tracy
Da dies sechs Jahre später ist, erwarte ich keine Antwort, aber beim letzten Shortcode sagen Sie, ich soll die WordPress-URL anstelle von YouTube eingeben, aber Sie sagen nicht, was dieser Code ist oder wo ich ihn einfügen soll. Können Sie bitte bedenken, dass sehr neue Anfänger das nicht einfach wissen werden?
WPBeginner Support
Entschuldigen Sie etwaige Verwirrung, wir werden uns bemühen, unsere Formulierungen in Zukunft zu verbessern, um dies klarer zu gestalten
Admin
Craig
"Die meisten Wege würden erfordern, dass Sie jedes Mal ein Stück HTML-Code einfügen, wenn Sie ein Video hinzufügen"
Ich würde das gerne so lernen... wie macht man das?
Danke
Martin Dekker
Ich suche ein anderes Standbild aus einem YouTube-Video, das ich auf meiner Website habe. Das, das der Besitzer des Videos hat, gefällt mir nicht, und ich habe gehört, dass man ein Bild aus der Videosequenz auswählen kann, um es zu seinem Standbild zu machen, sobald das Video endet. Da es nicht mein Video ist, muss ich dies im Einbettungs-iframe-Code tun können.
Ist das möglich und wenn ja, könnten Sie mir den Code geben. Vielen Dank
Tizy
Hallo,
dies ist ein unglaubliches Tutorial. Es ist möglich, den Teilen-Button am Ende des YouTube-Videos anzuzeigen und wie? Vielen Dank im Voraus für Ihre Hilfe.
WPBeginner-Mitarbeiter
Dave, wir haben den Artikel aktualisiert, um eine Methode einzuschließen, die Ihren Beitragslink anstelle des YouTube-Videos teilt. Befolgen Sie die Anweisungen im Abschnitt „WordPress-Beitragslink im Share-Button-Overlay auf YouTube-Videos hinzufügen“.
Dave
Ich wollte meinen Kommentar bearbeiten, weil ich einen „D’oh“-Moment hatte und bemerkte, dass ich das Website-Plugin nie aktiviert hatte. Ich konnte es nicht bearbeiten, weil mein Kommentar genehmigt werden musste.
Als ich es aktivierte, überlagerten meine Facebook- und Twitter-Share-Optionen das Video nicht. Sie waren unter dem Video.
Ich weiß es nicht, vielleicht habe ich etwas falsch gemacht.
Ich mag Ihre Website und werde immer wieder für weitere großartige Artikel zurückkehren.
Jessie Delmo
Wie kann ich den riesigen Abstand unten nach dem Video anpassen?
Christenger
Dies ist eine großartige Lösung, aber ich habe ein seltsames Problem. Einige IDs funktionieren, andere nicht.
Zum Beispiel funktioniert diese ID für mich [wpb-yt video=”7vJdBec_B6A”], aber diese andere nicht [wpb-yt video=”CYveDEem5VA”]
Rednasil
Hallo Leute, danke für das Tutorial.. Ich habe das in kürzester Zeit auf meiner Website zum Laufen gebracht.
Aber ich benutze Yoast's Video SEO Plugin und habe festgestellt, dass es keine YouTube-Videos erkennt, die mit dem Shortcode eingebettet sind.
Gibt es eine Möglichkeit, dies zu erreichen? Vielleicht eine Umgehungslösung, bei der Sie keine Shortcodes verwenden müssen??
WPBeginner Support
Wir haben es nicht mit Yoast's Video SEO Plugin ausprobiert. Wir werden sehen, was wir tun können.
Admin
Rednasil
Danke, ich hoffe, ihr könnt eine Lösung dafür finden.
Mat
Hallo allerseits,
Wie kann ich „Share-Buttons als Overlay auf YouTube-Videos“ mit einem YouTube-Embed im Revolution Slider hinzufügen?
In welche PHP- und CSS-Dateien soll ich die Codes einfügen?
Vielen Dank, Ihre Hilfe wird sehr geschätzt!!
Mat
Jay
Hallo – ich weiß den Beitrag wirklich zu schätzen.
Ich versuche, den functions.php-Snippet zu ändern, damit die Teilen/Tweet-Buttons auf meine Website und nicht auf die youtube.com-Website verweisen. Leider habe ich alle möglichen Probleme. Können Sie helfen oder mich an jemanden verweisen, der helfen kann?? Ich habe eine Stunde damit verbracht, ohne Fortschritt.
Wirklich froh, dass Sie das gepostet haben. Es ist unglaublich nützlich!!
WPBeginner Support
Jay, wir haben den Beitrag aktualisiert und einen neuen Snippet hinzugefügt, der den Beitrag-Link anstelle des YouTube-Videos teilt. Hoffentlich hilft das.
Admin
Ike Brown
Bitte, wenn ich auf den Link klicke, funktioniert er nicht. Die Schaltflächen werden angezeigt, aber wenn man darauf klickt, passiert nichts.
Farhan Shah
Das ist großartig und beschreibend.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
WPBeginner Support
Sie müssen wahrscheinlich CSS anpassen. Wir können nicht sicher sein, dass dies mit allen Themes funktioniert, da es Tausende von Themes gibt.
Admin
Martin
Ich habe dieses Plugin jetzt 27 Mal erstellt und es funktioniert immer noch überhaupt nicht! Ich brauche diese Funktion wirklich, könnten Sie das bitte noch einmal und Schritt für Schritt erklären. Bitte vermeiden Sie es, mit "einfach machen..." zu beginnen, denn ich bin ein echter Neuling und wenn ich hier sitze, weiß ich nichts.. Ich habe bereits Ihr Tutorial für functions.php befolgt und meine Website ist komplett abgestürzt. Ich verstehe, dass Sie hier einen großartigen Support anbieten, super! Daumen hoch!! Super!!! Aber bitte verstehen Sie, dass es wirklich frustrierend ist, Schritte so oft zu erstellen und zu befolgen und kein Ergebnis zu erzielen. Dieses Plugin erscheint überhaupt nicht in meiner WP-Installation.
Martin
„einfach in functions.php kopieren..“ wissen Sie, wo in functions.php?? oben, wo es mit 1 beginnt, oder unten, wo Zahlen 300 und so weiter sind?? oder irgendwo in der Mitte? Danke <3
WPBeginner Support
am Ende Ihrer functions.php-Datei
Admin
WPBeginner Support
Martin, wir verstehen Ihre Frustration. Können Sie andere Plugins auf Ihrer Website installieren?
Admin
Martin
Sicher, es ist kein Problem, Plugins zu installieren. Ich habe es am Ende auch selbst behoben, aber das Ergebnis war nur so lala, es sieht ehrlich gesagt nicht sehr ordentlich aus. Also habe ich es wieder gelöscht. Ich habe nach anderen Lösungen gesucht, aber sie scheinen nicht zu existieren, alles bezieht sich auf „Geld verdienen“ oder „Inhalte sperren“ .. warum sollte jemand eine Seite mögen, um sie zu sperren? Ich brauche dieses Plugin wirklich und habe kein Geld, um Leute einzustellen. Bitte bieten Sie mir etwas Unterstützung per E-Mail an, Sie könnten mir erklären, wie ich das Ganze gestalten kann, damit es besser aussieht. Bitte, bitte, bitte! Ich würde mich sehr freuen. Danke <3
Patrycja
Dasselbe hier. Ich habe versucht, es einfach zu functions.php hinzuzufügen, dann mit einem sitespezifischen Plugin. Nichts. Nada. Und ich würde es wirklich lieben, wenn es funktionieren würde. Funktioniert es mit allen Themes?
Überspringen
Toller Code, den ich auf einer Testseite angepasst und implementiert habe, einschließlich Google+. Ich weiß, dass der Schub kein CSS ist, aber ich wollte nur darauf hinweisen, dass ich glaube, dass Opazität 0 eine wirklich schlechte Idee ist, da immer mehr gesurft wird auf Touchscreens, wo es kein Hover-Ereignis gibt und die Schaltflächen nie gesehen würden. Ich würde entweder Opazitätseffekte ganz vergessen oder eine anfängliche Opazität von 0,5 einstellen oder Media Queries verwenden, um verschiedene Geräte mit individuellen Opazitätseinstellungen anzusprechen.
Jason Gooljar
Kann das auch mit dem IMG-Attribut gemacht werden?
Kannan M
Fantastischer Trick
Pam Simmons
Das ist sehr hilfreich. Es scheint, dass die Share-Buttons in diesem Beispiel tatsächlich den YouTube-Videolink teilen und nicht die Seite, die das eingebettete Video enthält, wie es die UpWorthy-Button-Overlays tun. Wie könnte man den Code ändern, um den Permalink der Seite anstelle des YouTube-Links zu erhalten?
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.
Madeline
Danke. Ich bin gespannt, das auszuprobieren und euch die Ergebnisse mitzuteilen.
Manish Misra
Es ist wirklich gut und hilft uns bei meiner Arbeit….
Chris
Das ist gut. Was ist mit der Verwendung einer Playlist-ID im Shortcode?
Die meisten Leute verwenden statische Videos in Beiträgen, aber auf den Startseiten verwenden wir Playlists.
Wie könnte dieser Code modifiziert werden, um die Share-Buttons über Playlist-Videos hinzuzufügen?
D. h. zur Arbeit mit dem YouTube Channel Gallery Plugin.
ÜBRIGENS – UNTER dem Code steht Ihr Text: „Der folgende Code erstellt einen Shortcode, der automatisch Twitter- und Facebook-Schaltflächen zu Ihren Videos hinzufügt.“
Sollte dort nicht stehen „…VORHERIGER Code…“?
WPBeginner Support
Chris, wir haben den Artikel aktualisiert, Sie können ihn jetzt auch mit Playlists verwenden.
Admin
Krish Murali Eswar
Gut gemacht. Ich bin generell abgeneigt, etwas auf Code-Ebene zu ändern. Dies scheint ein unkomplizierter Plugin-Kandidat zu sein. Sind Sie sicher, dass es kein Plugin gibt?
WPBeginner Support
Dieser Code kann in einem standortspezifischen Plugin verwendet werden.
Admin
Mai
Das sieht großartig aus. Könnten Sie eine sehr einfache Schritt-für-Schritt-Anleitung zur Installation geben – vielleicht auf YouTube?
Subbareddy
Das ist großartig
Steven
Toller Artikel!
Wie füge ich diesen Shortcode jetzt zum HTML-Shortcode-Editor hinzu, der in der TinyMCE-Leiste erscheint?
Steve Wharton
Ziemlich cooler Code. Ich freue mich darauf, damit herumzuspielen und ihn zu meiner neuen Website hinzuzufügen. Danke!
Tom Horn
Gibt es eine Möglichkeit, ein Plugin zu verwenden, um diesen Code hinzuzufügen, damit wir nichts durcheinander bringen, wenn wir nicht daran gewöhnt sind, unter der Haube zu arbeiten? Danke dafür, ich habe so etwas schon einmal gesehen und wollte wirklich wissen, wie es geht.
WPBeginner Support
Ja, Sie können dies zu einem standortspezifischen Plugin hinzufügen.
Admin
Pam Blizzard
Vielen Dank für das Teilen, das ist eine elegante Lösung.
Glauben Sie, dass es auch für YouTube-Playlists funktionieren könnte, mit der "PLxxxetc"-Syntax?
WPBeginner Support
Grundsätzlich können Sie den Shortcode so modifizieren, dass er jede Art von Einbettung ausgibt, und dann CSS verwenden, um Share-Buttons auf dieser Einbettung zu positionieren. Also ja, es sollte funktionieren.
Admin
Steven Jacobs
Gäbe es eine Möglichkeit, dies auch mit SoundCloud-Playern zu tun?
Toller Artikel übrigens.
WPBeginner Support
Ja, es sollte mit Soundcloud-Einbettungen funktionieren, aber Sie müssen sie im Shortcode hinzufügen und dann CSS für die richtige Positionierung verwenden.
Admin
Zimbrul
Das ist eine ziemlich coole Sache für Ihre YouTube-Videos: Sharing-Buttons. Ich mag auch diese schwebenden Buttons auf Bildern, die von FooBox hinzugefügt werden
Pam
Das ist super, danke!
Glaubst du, es könnte angepasst werden, um sowohl mit Playlists als auch mit einzelnen Videos zu funktionieren?