Guider

Slik legger du til deleknapper som overlegg på YouTube-videoer i WordPress

Slik legger du til deleknapper som overlegg på YouTube-videoer i WordPress / Guider

Videoer er en av de beste måtene å øke brukerengasjementet. Nylig spurte en av brukerne oss om en måte å opprette deleknapp overlegg på videoer som ligner på det populære nettstedet UpWorthy. I denne artikkelen vil vi vise deg hvordan du legger til delingsknapper som overlegg på YouTube-videoer i WordPress.

Eksempel på hvordan det ville se ut:

Legge til delingsknapper som overlegg på YouTube-videoer

Det var flere måter at dette kunne gjøres. De fleste måter krever at du limer inn et biter av HTML-kode hver gang du legger til en video. I stedet for å gjøre det, bestemte vi oss for å lage en kortkode som ville automatisere denne overleggseffekten.

Kopier og lim inn bare følgende kode i et nettstedsspesifikt plugin eller temaets funksjoner.php-fil: 

 /// WPBeginner's YouTube Share Overlay-knapper-funksjon wpb_yt_buttons ($ atts) // Få video-IDen fra shortcode-ekstrakt (shortcode_atts (array ('video' => ", $ atts)); // Vis video $ string = ' '; // Legg til Facebook-deleknapp $ string. ='
  •  Facebook
    • '; // Legg til Twitter-knapp $ string. = '
  • kvitring
'; // Lukk video container $ string. = ''; // Return output return $ string;  // Legg til Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Denne koden oppretter en shortcode som automatisk legger til Twitter og Facebook dele koblinger til videoene dine. Disse knappene er bare synlige når brukeren bringer musen over videoen. Du kan bruke den legge til noen andre sosiale medier kanal også.

For å bruke denne kortkoden, er alt du trenger å gjøre, å legge til YouTube-video-ID-en i kortnummeret slik:

[wpb-yt video = "qzOOy1tWBCg"]

Du kan få YouTube-video-ID-en fra URL-strengen. Som dette:

Nå når du legger til en video, vil du kunne se YouTube-video og ren tekstkoblinger for å dele videoen på Facebook eller Twitter. Du vil merke at disse koblingene ikke er utformet i det hele tatt.

Så lar vi disse linkene til å lage knapper, så det ser litt finere ut. Vi vil også skjule disse knappene og få dem til å vises bare når en bruker tar musen på videobeholderen. For å gjøre dette legger du til følgende CSS i barnetemaets stilark. 

 # share-video overlay posisjon: relative; høyre: 40px; topp: -190px; liste-stil-type: none; skjerm: blokk; opasitet: 0; filter: alfa (opasitet = 0); -webkit-overgang: opacity .4s, top .25s; -moz-overgang: opacity .4s, top .25s; -o-overgang: opacity .4s, top .25s; overgang: opacity .4s, top .25s; z-indeks: 500;  # share-video overlay: svever opacity: 1; filter: alfa (opacity = 100);  .share-video-overlay li margin: 5px 0px 5px 0px;  #facebook color: #ffffff; bakgrunnsfarge: # 3e5ea1; bredde: 70px; polstring: 5px;  .facebook a: link, .facebook a: aktiv, .facebook a: besøkt farge: #fff; text-decoration: none;  #twitter bakgrunnsfarge: # 00a6d4; bredde: 70px; polstring: 5px;  .twitter a, .twitter a: link, .twitter a: aktiv, .twitter a: besøkt, .twitter a: hover color: #FFF; text-decoration: none;

Det er alt. Nå bør du ha delingsknapp overlegg på YouTube-videoene dine i WordPress.

Legge til delingsknapper som overlegg for YouTube-videospillelister i WordPress

Etter publisering av denne artikkelen spurte mange av våre lesere hvordan denne koden kan endres for å jobbe for YouTube-spillelister, samt videoer. Hvis du legger inn YouTube-videoer og spillelister på WordPress-siden din, bør du bruke denne koden i stedet. 

 / * * WPBeginner's Del Overlay-knapper * på YouTube-videoer og spillelister * / funksjon wpb_yt_buttons ($ atts) // Få videoen og spillelisten ids fra shortcode extract (shortcode_atts (array ('video' => ", 'spilleliste' => ",), $ atts)); // Sjekk for å se om en spilleliste-ID er forsynt med kortnummer hvis (! $ Spilleliste == "): // Vis video spilleliste $ string = ''; // Legg til Facebook-knapp $ string. = '
  • Facebook
    • '; // Legg til Twitter-knappen $ string. = '
  • kvitring
'; // Lukk video container $ string. = ''; // Hvis ingen spilleliste-ID er gitt annet: // Vis video $ streng. = ''; // Legg til Facebook-knapp $ string. = '
  •  Facebook
    • '; // Legg til Twitter-knappen $ string. = '
  • kvitring
'; // Lukk video container $ string. = ''; slutt om; // Return output return $ string;  // Legg til shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Ved å bruke koden ovenfor kan du også legge til en spilleliste med overliggende delingsknapper. For å vise spillelisten din må du oppgi ID-ID og spilleliste-ID i kortnummeret slik:

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

Du kan få video- og spilleliste-IDene dine ved å besøke spillelisten på YouTube og kopiere liste-ID fra nettadressen, slik:

Legge til WordPress Post Link i Share Button Overlay på YouTube Videoer

Etter at vi publiserte denne artikkelen, spurte noen av brukerne at de vil at delingsknappene kan dele deres WordPress-innleggs kobling i stedet for YouTube-videolink. For å gjøre det må du erstatte videoadressen i delingsknapper med permalinken for WordPress-innlegget. Bruk denne koden i din funksjoner.php eller nettstedspesifikke plugin:

 /// WPBeginner's YouTube Share Overlay-knapper-funksjon wpb_yt_buttons ($ atts) // Få video-IDen fra shortcode-ekstrakt (shortcode_atts (array ('video' => ", $ atts)); // Vis video $ string = ' '; // Få post permalink og kode URL $ permalink_encoded = urlencode (get_permalink ()); // Legg til Facebook share button $ string. ='
  •  Facebook
    • '; // Legg til Twitter-knapp $ string. = '
  • kvitring
'; // Lukk video container $ string. = ''; // Return output return $ string;  // Legg til Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Du er velkommen til å endre CSS eller shortcode-utdragene for å dekke dine behov. For ytterligere å optimalisere videoene dine, kan du gjøre YouTube-videoene dine lydløse ved hjelp av FitVids jQuery-plugin. Du kan også slå av relaterte videoer som vises på slutten av videoen. eller til og med lage kjente bilder fra YouTube-videominiatyrer.

Vi håper at denne artikkelen hjalp deg med å legge til egendefinerte delingsknapper som overlegg på YouTube-videoer i WordPress. Gi oss beskjed hvilke sosiale medier du planlegger å legge til på videoene dine, ved å legge igjen en kommentar nedenfor.