Så här lägger du till delknappar som överlägg på YouTube-videor i WordPress

Videor är ett av de bästa sätten att öka användarengagemanget. Nyligen frågade en av våra användare om ett sätt att skapa dela överlappar på videoklipp 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 delningsknappar som överlägg på YouTube-videoklipp

Det var flera sätt att detta kunde göras. På de flesta sätt skulle du behöva klistra in en bit HTML-kod varje gång du lägger till en video. I stället för att göra det bestämde vi oss för att skapa en kortnummer som skulle automatisera denna överlagseffekt.

Kopiera och klistra in följande kod enkelt i ett sajtspecifikt plugin eller ditt temas funktioner.php-fil:

 /// WPBeginner's YouTube-överlagringsknappar funktion wpb_yt_buttons ($ atts) // Hämta video-ID från kortkorts extrakt (shortcode_atts (array ('video' => ", $ atts)); // Visa video $ string = ' '; // Lägg till Facebook-delningsknapp $ string. =' Facebook
'; // Lägg till Tweet-knappen $ string. = 'Tweet
'; // Stäng videobehållare $ string. = ''; // Returutgångsrörelse $ string;  // Lägg till Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Den här koden skapar en kortnummer som automatiskt lägger till twitter och facebook dela länkar till dina videoklipp. Dessa knappar är bara synliga när användaren tar sin mus över videon. Du kan använda den lägga till någon annan social media kanal också.

För att använda denna kortnummer är allt du behöver göra att lägga till YouTube-video-id i kortnummeret så här:

[wpb-yt video = "qzOOy1tWBCg"]

Du kan få YouTube-video-ID från URL-strängen. Så här:

Nu när du lägger till en video kan du se dina YouTube-video och vanliga textlänkar för att dela videoen på Facebook eller Twitter. Du kommer märka att dessa länkar inte är stilade alls.

Så kan vi utforma dessa länkar för att skapa knappar, så det ser lite snyggare ut. Vi kommer också att gömma dessa knappar och få dem att visas endast när en användare tar musen på videofiljen. För att göra detta lägg till följande CSS i ditt barnteman stilark.

 # share-video-overlay position: relative; höger: 40px; topp: -190px; lista-stil-typ: none; display: block; opacitet: 0; filter: alfa (opacitet = 0); -webkit-övergång: opacitet .4s, topp .25s; -moz-övergång: opacitet .4s, topp .25s; -o-övergång: opacitet .4s, topp .25s; övergång: opacitet .4s, topp .25s; z-index: 500;  # dela videoöverlagring: sväva opacitet: 1; filter: alfa (opacitet = 100);  .share-video-overlay li margin: 5px 0px 5px 0px;  #facebook color: #ffffff; bakgrundsfärg: # 3e5ea1; bredd: 70px; vaddering: 5px;  .facebook a: länk, .facebook a: aktiv, .facebook a: besökte färg: #fff; text-decoration: none;  #twitter bakgrundsfärg: # 00a6d4; bredd: 70px; vaddering: 5px;  .twitter a, .twitter a: länk, .twitter a: aktiv, .twitter a: besök, .twitter a: svävar färg: #FFF; text-decoration: none;

Det är allt. Nu ska du ha delningsknappar överlägg på dina YouTube-videor i WordPress.

Lägga till delningsknappar som överlägg för YouTube-videospelningslistor i WordPress

Efter att ha publicerat denna artikel frågade många av våra läsare hur denna kod kan ändras för att fungera för YouTube-spellistor och videor. Om du bäddar in YouTube-videor samt spellistor på din WordPress-webbplats, ska du använda den här koden istället.

 / * * WPBeginners delöverlagringsknappar * på YouTube-videor och spellistor * / funktion wpb_yt_buttons ($ atts) // Hämta video- och spellista ids från kortkodsextrakt (shortcode_atts (array ('video' => ", 'playlist' => ",), $ atts)); // Kontrollera om ett spellista-id är försedd med kortnummer om (! $ Spellista == "): // Visa videospellista $ string = ''; // Lägg till Facebook-knapp $ string. = 'Facebook
'; // Lägg till Twitter-knappen $ string. = 'Tweet
'; // Stäng videobehållare $ string. = ''; // Om inget spellista ID tillhandahålls annars: // Visa video $ string. = ''; // Lägg till Facebook-knappen $ string. = ' Facebook
'; // Lägg till Twitter-knappen $ string. = 'Tweet
'; // Stäng videobehållare $ string. = ''; endif; // Returutgångsrörelse $ string;  // Lägg till shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Med hjälp av koden ovan kan du också lägga till en spellista med överliggande delknappar. För att visa din spellista måste du ange ID-ID och spellista id i kortnummeret så här:

[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]

Du kan få dina video- och spellistor-IDer genom att besöka spellistan på YouTube och kopiera list-ID från webbadressen, så här:

Lägga till WordPress Post Link i Share Button Overlay på YouTube Videos

Efter att vi publicerade denna artikel frågade några av våra användare att de skulle vilja att delningsknapparna delar deras WordPress-postlänk i stället för YouTube-videolänk. För att göra det måste du ersätta videoadressen i delknappar med WordPress-inläggets permalink. Använd den här koden i ditt funktioner.php eller webbplatsspecifikt plugin:

 /// WPBeginner's YouTube-överlagringsknappar funktion wpb_yt_buttons ($ atts) // Hämta video-ID från kortkorts extrakt (shortcode_atts (array ('video' => ", $ atts)); // Visa video $ string = ' '; // Hämta post-permalink och koda URL $ permalink_encoded = urlencode (get_permalink ()); // Lägg till Facebook-delningsknapp $ string. =' Facebook
'; // Lägg till Tweet-knappen $ string. = 'Tweet
'; // Stäng videobehållare $ string. = ''; // Returutgångsrörelse $ string;  // Lägg till Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Känn dig fri att ändra CSS eller kortnummerutdrag för att möta dina behov. För att ytterligare optimera dina videoklipp kan du göra dina YouTube-videor lyhörda med hjälp av FitVids jQuery-plugin. Du kan också stänga av relaterade videor som visas i slutet av videon. eller till och med skapa utvalda bilder från YouTube-miniatyrer.

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 medier du planerar att lägga till på dina videoklipp genom att lämna en kommentar nedan.

« Så här lägger du till säkerhetsfrågor på WordPress Login Screen Så här lägger du till menyalternativet Kortlänk i WordPress Admin Bar »