Videor är ett av de bästa sätten att öka användarnas engagemang. Nyligen frågade en av våra användare oss om ett sätt att skapa delningsknappar som överlägg på videor som liknar den populära webbplatsen UpWorthy. I den här artikeln visar vi hur du lägger till delningsknappar som överlägg på YouTube-videor i WordPress.
Exempel på hur det skulle se ut:
Lägga till dela-knappar som överlägg på YouTube-videor
There were several ways that this could be done. Most ways would require you to paste a bits of HTML code every time you add a video. Instead of doing that, we decided to create a shortcode that would automate this overlay effect.
Kopiera och klistra helt enkelt in följande kod i ett webbplatsspecifikt plugin eller din temas functions.php-fil:
/// 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');
Den här koden skapar en kortkod som automatiskt lägger till delningslänkar för Twitter och Facebook till dina videor. Dessa knappar syns bara när användaren för muspekaren över videon. Du kan använda den för att lägga till andra sociala mediekanaler också.
För att använda denna kortkod behöver du bara lägga till YouTube-video-ID:t i kortkoden så här:
[wpb-yt video="qzOOy1tWBCg"]
Du kan hämta YouTube-video-ID:t från URL-strängen. Så här:
Nu när du lägger till en video kommer du att kunna se din YouTube-video och vanliga textlänkar för att dela videon på Facebook eller Twitter. Du kommer att märka att dessa länkar inte är stylade alls.
Så låt oss styla dessa länkar för att skapa knappar, så att det ser lite trevligare ut. Vi kommer också att dölja dessa knappar och få dem att visas endast när en användare för muspekaren över videobehållaren. För att göra detta, lägg till följande CSS i din Child Themes stylesheet.
#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;
}
Det var allt. Nu bör du ha delningsknappar som överlagras på dina YouTube-videor i WordPress.
Lägga till delningsknappar som överlägg för YouTube-spellistor i WordPress
Efter att ha publicerat den här artikeln frågade många av våra läsare hur den här koden kan modifieras för att fungera även för YouTube-spellistor. Om du bäddar in YouTube-videor såväl som spellistor på din WordPress-webbplats, bör du använda den här koden istället.
/*
* 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');
Med koden ovan kan du också lägga till en spellista med överlagrade delningsknappar. För att visa din spellista måste du ange video-ID och spelliste-ID i kortkoden så här:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Du kan få dina video- och spelliste-ID:n genom att besöka spellistan på YouTube och kopiera list-ID:t från URL:en, så här:
Lägga till WordPress-inläggslänk i delningsknappens överlägg på YouTube-videor
Efter att vi publicerade den här artikeln frågade några av våra användare att de skulle vilja att delningsknapparna delade länken till sitt WordPress-inlägg istället för länken till YouTube-videon. För att göra det behöver du ersätta video-URL:en i delningsknapparna med permalänken till WordPress-inlägget. Använd den här koden i din functions.php eller webbplatsspecifika 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');
Ändra gärna CSS eller kortkodssnuttarna för att uppfylla dina behov. För att ytterligare optimera dina videor kan du göra dina YouTube-videor responsiva med FitVids jQuery-plugin. Du kan också inaktivera relaterade videor som visas i slutet av videon. eller till och med skapa miniatyrbilder från miniatyrbilder för YouTube-videor.
Vi hoppas att den här artikeln hjälpte dig att lägga till anpassade delningsknappar som överlägg på YouTube-videor i WordPress. Låt oss veta vilka sociala mediekanaler du planerar att lägga till på dina videor genom att lämna en kommentar nedan.
Tracy
med tanke på att detta är sex år senare förväntar jag mig inte riktigt ett svar men, på den senaste kortkoden säger du att jag ska ange wordpress-url:en istället för youtube men du säger inte vad den koden är eller var jag ska placera den. Kan du tänka på att mycket nya nybörjare inte bara kommer att veta hur man gör detta?
WPBeginner Support
Ursäkta eventuell förvirring, vi kommer att sträva efter att förbättra vår formulering i framtiden för att göra detta tydligare
Admin
Craig
"De flesta sätt skulle kräva att du klistrar in lite HTML-kod varje gång du lägger till en video"
Jag skulle vilja lära mig på det här sättet... hur gör man?
Tack
Martin Dekker
Jag vill ha en annan stillbild från en YouTube-video som jag har på min webbplats. Den som ägaren av videon har gillar jag inte och jag har hört att man kan välja en bild från videons tidslinje för att bli din stillbild när videon slutar. Eftersom det inte är min video behöver jag kunna göra detta i inbäddningskoden för iframe.
Är detta möjligt och om så är fallet, kan du ge mig koden. Tack
Tizy
Hej,
detta är en otrolig handledning. Det är möjligt att visa en delningsknapp i slutet av YouTube-videon och hur? Tack på förhand för din hjälp.
WPBeginner Staff
Dave, vi uppdaterade artikeln för att inkludera en metod som delar din inläggslänk istället för YouTube-video. Följ instruktionerna i avsnittet “Lägga till WordPress-inläggslänk i Dela-knappens överlägg på YouTube-videor”.
Dave
Jag skulle gå tillbaka och redigera min kommentar eftersom jag hade ett “D’oh”-ögonblick och märkte att jag aldrig aktiverade webbplatspluginet. Jag kunde inte redigera eftersom min kommentar behövde godkännas.
När jag aktiverade det överlagrade inte mina Facebook- och Twitter-delningsalternativ videon. De var under videon.
Jag vet inte, kanske gjorde jag något fel i processen.
Jag gillar din webbplats och kommer att fortsätta komma tillbaka för fler bra artiklar.
Jessie Delmo
hur justerar man det enorma utrymmet längst ner efter videon?
Christenger
Detta är en bra lösning, men jag har ett konstigt problem. Vissa ID:n fungerar men andra inte.
Till exempel fungerar detta ID för mig [wpb-yt video=”7vJdBec_B6A”] men detta andra inte [wpb-yt video=”CYveDEem5VA”]
Rednasil
Hej allihopa, tack för handledningen.. Jag fick detta att fungera på nolltid på min webbplats.
Men jag använder Yoasts video SEO-plugin, och jag märkte att det inte känner igen YouTube-videor som bäddats in med kortkoden.
Finns det ett sätt att få detta att hända? Kanske en lösning där du inte behöver använda kortkoder??
WPBeginner Support
Vi provade inte med Yoasts Video SEO-plugin. Vi får se vad vi kan göra.
Admin
Rednasil
Tack, jag hoppas att ni kan komma på en lösning för detta.
Mat
Hej allihopa,
Hur kan jag lägga till "Dela-knappar som överlägg på YouTube-videor" med en YouTube-inbäddning inuti Revolution Slider?
I vilka php- och css-filer ska jag klistra in koderna?
Tack, din hjälp är mycket uppskattad!!
Mat
Jay
Hej – uppskattar verkligen inlägget.
Jag försöker modifiera functions.php-utdraget så att delnings-/tweet-knapparna hänvisar till min webbplats istället för youtube.com-webbplatsen. Tyvärr har jag alla möjliga problem. Kan du hjälpa eller peka mig någonstans som kan hjälpa?? Jag har hållit på med det i en timme utan framsteg.
Verkligen glad att du postade detta. Det är otroligt användbart!!
WPBeginner Support
Jay, we have updated the post and added a new snippet which shares the post link instead of youtube video. Hope this helps.
Admin
Ike Brown
Snälla, när jag klickar på länken fungerar det inte. Knapparna visas men när du klickar på dem händer ingenting
Farhan Shah
Det är fantastiskt och beskrivande.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
WPBeginner Support
Du kommer förmodligen att behöva justera CSS. Vi kan inte vara säkra på att detta fungerar med alla teman eftersom det finns tusentals teman.
Admin
Martin
Jag har skapat detta plugin nu 27 gånger och det fungerar fortfarande inte alls! Jag behöver verkligen den här funktionen, kan du förklara detta igen och steg för steg. Undvik att börja med "bara gör.." eftersom jag är en riktig nybörjare och när jag sitter här vet jag ingenting.. Jag har redan följt din functions.php-handledning och min webbplats kraschade helt. Jag förstår att du erbjuder en fantastisk support här, grymt! Tummen upp!! Super!!! Men snälla förstå att det är verkligen frustrerande att skapa och följa steg så många gånger och inget resultat. Detta plugin visas inte alls i min wp-installation.
Martin
“just copy it in functions.php..” you know, where in functions.php?? on top where it starts with 1 or on the bottom where there are numbers 300 and so forth?? or in the middle somewhere? Thank you <3
WPBeginner Support
längst ner i din functions.php-fil
Admin
WPBeginner Support
Martin, vi förstår din frustration. Kan du installera andra plugins på din webbplats?
Admin
Martin
visst, inga problem att installera plugins. Jag har också löst detta själv till slut, men resultatet var bara sådär, det ser inte särskilt snyggt ut ärligt talat. Så jag tog bort det igen. Jag letade efter andra lösningar men de verkar inte finnas, allt handlar om att “tjäna pengar” eller “låsa innehåll” .. varför skulle någon gilla en sida för att låsa den? Jag behöver verkligen detta plugin och jag har inga pengar att anlita folk. Vänligen ge mig support via e-post, du kan förklara för mig hur jag kan styla hela grejen så att den ser bättre ut. Snälla, snälla, snälla! Jag skulle verkligen uppskatta det. Tack <3
Patrycja
Samma här. Jag försökte bara lägga till det i functions.php, sedan med ett webbplatsspecifikt plugin. Ingenting. Nada. Och jag skulle verkligen vilja att det fungerar. Fungerar det på alla teman?
Hoppa över
Fantastisk kod som jag har anpassat och implementerat på en testsida inklusive Google+. Jag vet att drivkraften inte är CSS men ville bara poängtera att jag tycker att opacitet 0 är en riktigt dålig idé eftersom allt fler surfplattor används där det inte finns någon hover-effekt och knapparna aldrig skulle synas. Jag skulle antingen glömma opacitetseffekter helt eller ställa in en initial opacitet på 0,5 eller använda mediafrågor för att rikta in sig på olika enheter med individuella opacitetsinställningar.
Jason Gooljar
Kan detta göras med IMG-attributet också?
Kannan M
Fantastiskt knep
Pam Simmons
Detta är mycket hjälpsamt. Det verkar som att delningsknapparna i detta exempel faktiskt delar YouTube-videolänken, snarare än sidan som innehåller den inbäddade videon som UpWorthy-knappöverläggen gör. Hur skulle man ändra koden för att hämta sidans permalänk istället för YouTube-länken?
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
Tack. Jag är entusiastisk över att prova detta och låta er veta resultaten.
Manish Misra
Det är riktigt bra och hjälper oss med mitt arbete....
Chris
Det här är bra. Vad sägs om att använda ett spellist-ID i kortkoden?
De flesta använder statiska videor i inlägg men på hemsidor använder vi spellistor.
Hur skulle denna kod kunna modifieras för att lägga till delningsknappar över spellistvideor?
Det vill säga, för att arbeta med YouTube Channel Gallery-pluginet.
FÖRRESTEN – UNDER koden står det så här: “Följande kod skapar en kortkod som automatiskt lägger till Twitter- och Facebook-knappar till dina videor.”
Shouldn’t that say “…PRECEDING code…”?
WPBeginner Support
Chris, vi har uppdaterat artikeln, du kan nu använda den med spellistor också.
Admin
Krish Murali Eswar
Bra jobbat. Jag är generellt motvillig att ändra något på kodnivå. Detta verkar vara en enkel plugin-kandidat. Är du säker på att det inte finns något plugin?
WPBeginner Support
Denna kod kan användas i ett webbplatsspecifikt plugin.
Admin
maj
Det här ser bra ut. Kan du ge en mycket enkel steg-för-steg-instruktion om hur man installerar det – kanske på YouTube?
Subbareddy
Detta är fantastiskt
Steven
Bra artikel!
Hur lägger du till den här kortkoden nu i kortkodredigeraren för HTML som visas på TinyMCE-fältet?
Steve Wharton
Ganska cool kod. Ser fram emot att leka med den och lägga till den på min nya webbplats. Tack!
Tom Horn
Finns det ett sätt att använda ett plugin för att lägga till denna kod så att vi inte förstör något om vi inte är vana vid att arbeta "under huven"? Tack för detta, jag har sett sådant här tidigare och ville verkligen veta hur man gör.
WPBeginner Support
Ja, du kan lägga till detta i ett webbplatsspecifikt plugin.
Admin
Pam Blizzard
Tack för att du delade detta, det är en elegant lösning.
Tror du att det skulle kunna fungera för YouTube-spellistor också, med syntaxen "PLxxxetc"?
WPBeginner Support
I grund och botten kan du modifiera kortkoden för att mata ut vilken typ av inbäddning som helst och sedan använda CSS för att placera delningsknappar på den inbäddningen. Så ja, det borde fungera.
Admin
Steven Jacobs
Skulle det finnas något sätt att göra detta med SoundCloud-spelare också?
Bra artikel förresten.
WPBeginner Support
Ja, det borde fungera med soundcloud-inbäddningar, men du måste lägga till dem i kortkoden och sedan använda CSS för korrekt positionering.
Admin
Zimbrul
Detta är en ganska cool sak att göra på dina Youtube-videor: delningsknappar. Jag gillar också de flytande knapparna på bilder som läggs till av FooBox
Pam
Det här är fantastiskt, tack!
Tror du att det skulle kunna justeras för att fungera med spellistor lika bra som med enskilda videor?