Filmy to jeden z najlepszych sposobów na zwiększenie zaangażowania użytkowników. Ostatnio jeden z naszych użytkowników zapytał nas o sposób tworzenia nakładek przycisków udostępniania na filmach, podobnych do popularnej strony UpWorthy. W tym artykule pokażemy, jak dodać przyciski udostępniania jako nakładkę na filmy z YouTube w WordPress.
Przykład, jak to będzie wyglądać:
Dodawanie przycisków udostępniania jako nakładka na filmy z YouTube
Istniało kilka sposobów, aby to zrobić. Większość sposobów wymagałaby od Ciebie wklejenia fragmentów kodu HTML za każdym razem, gdy dodajesz film. Zamiast tego postanowiliśmy stworzyć skrócony kod, który zautomatyzowałby ten efekt nakładki.
Po prostu skopiuj i wklej poniższy kod do wtyczki specyficznej dla witryny lub pliku functions.php swojego motywu:
/// 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');
Ten kod tworzy skrócony kod, który automatycznie dodaje linki udostępniania na Twitterze i Facebooku do Twoich filmów. Te przyciski są widoczne tylko wtedy, gdy użytkownik najeżdża kursorem na film. Możesz go użyć do dodania dowolnego innego kanału mediów społecznościowych.
Aby użyć tego skróconego kodu, wystarczy dodać identyfikator filmu z YouTube w skróconym kodzie w następujący sposób:
[wpb-yt video="qzOOy1tWBCg"]
Identyfikator filmu z YouTube można uzyskać z ciągu adresu URL. Oto jak:
Teraz po dodaniu filmu będziesz mógł zobaczyć swój film z YouTube i zwykłe linki tekstowe do udostępniania filmu na Facebooku lub Twitterze. Zauważysz, że te linki nie są w żaden sposób stylizowane.
Więc stylizujmy te linki, aby stworzyć przyciski, dzięki czemu będą wyglądać nieco ładniej. Ukryjemy również te przyciski i sprawimy, że pojawią się one tylko wtedy, gdy użytkownik najedzie myszką na kontener wideo. Aby to zrobić, dodaj poniższy kod CSS do arkusza stylów swojego motywu potomnego.
#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;
}
To wszystko. Teraz powinieneś mieć przyciski udostępniania nakładające się na Twoje filmy na YouTube w WordPressie.
Dodawanie przycisków udostępniania jako nakładki dla list odtwarzania YouTube w WordPress
Po opublikowaniu tego artykułu wielu naszych czytelników pytało, jak można zmodyfikować ten kod, aby działał również dla list odtwarzania YouTube, a nie tylko dla filmów. Jeśli osadzasz filmy i listy odtwarzania YouTube na swojej stronie WordPress, powinieneś użyć tego kodu zamiast.
/*
* 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');
Używając powyższego kodu, możesz również dodać playlistę z nakładającymi się przyciskami udostępniania. Aby wyświetlić swoją playlistę, musisz podać identyfikator filmu i identyfikator playlisty w shortcode w następujący sposób:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Możesz uzyskać identyfikatory filmów i list odtwarzania, odwiedzając listę odtwarzania na YouTube i kopiując identyfikator listy z adresu URL, w następujący sposób:
Dodawanie linku do posta WordPress w nakładce przycisku udostępniania na filmach YouTube
Po opublikowaniu tego artykułu, niektórzy z naszych użytkowników poprosili o udostępnianie linku do posta WordPress zamiast linku do filmu YouTube. Aby to zrobić, musisz zastąpić adres URL filmu w przyciskach udostępniania stałym linkiem do posta WordPress. Użyj tego kodu w swoim pliku functions.php lub wtyczce specyficznej dla witryny:
/// 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');
Zachęcamy do modyfikacji fragmentów CSS lub skróconych kodów, aby spełnić Twoje potrzeby. Aby dalej optymalizować swoje filmy, możesz sprawić, że Twoje filmy na YouTube będą responsywne przy użyciu wtyczki jQuery FitVids. Możesz również wyłączyć powiązane filmy, które pojawiają się na końcu filmu. lub nawet tworzyć obrazy wyróżniające z miniatur filmów na YouTube.
Mamy nadzieję, że ten artykuł pomógł Ci dodać niestandardowe przyciski udostępniania jako nakładkę na filmy z YouTube w WordPressie. Daj nam znać, które kanały mediów społecznościowych planujesz dodać do swoich filmów, zostawiając komentarz poniżej.
Tracy
biorąc pod uwagę, że minęło sześć lat, nie spodziewam się odpowiedzi, ale w ostatnim skróconym kodzie mówisz, aby zamiast YouTube wstawić adres URL WordPress, ale nie mówisz, co to za kod ani gdzie go umieścić. Czy możesz pamiętać, że bardzo nowi początkujący po prostu tego nie wiedzą?
Wsparcie WPBeginner
Przepraszamy za wszelkie niejasności, postaramy się poprawić nasze sformułowania w przyszłości, aby były jaśniejsze.
Admin
Craig
„Większość sposobów wymagałaby wklejenia fragmentu kodu HTML za każdym razem, gdy dodajesz film”
Chciałbym się tak nauczyć... jak to się robi?
Dzięki
Martin Dekker
Szukam innego statycznego obrazu z filmu na YouTube, który mam na swojej stronie. Ten, który ma właściciel filmu, mi się nie podoba i słyszałem, że można wybrać obraz z osi czasu filmu, aby stał się statycznym obrazem po zakończeniu filmu. Ponieważ to nie mój film, muszę być w stanie zrobić to w kodzie osadzania iframe.
Czy jest to możliwe i jeśli tak, czy mógłbyś podać mi kod. Dziękuję
Tizy
Cześć,
to niesamowity tutorial. Czy można pokazać przycisk udostępniania na końcu filmu na YouTube i jak? Z góry dziękuję za pomoc.
Zespół WPBeginner
Dave, zaktualizowaliśmy artykuł, aby uwzględnić metodę udostępniania linku do posta zamiast filmu z YouTube. Postępuj zgodnie z instrukcjami w sekcji „Dodawanie linku do posta WordPress w nakładce przycisków udostępniania na filmach z YouTube”.
Dave
Zamierzałem wrócić i edytować mój komentarz, ponieważ miałem moment „D’oh” i zauważyłem, że nigdy nie aktywowałem wtyczki strony. Nie mogłem edytować, ponieważ mój komentarz musiał zostać zatwierdzony.
Kiedy ją aktywowałem, opcje udostępniania na Facebooku i Twitterze nie nakładały się na wideo. Znajdowały się poniżej wideo.
Nie wiem, może zrobiłem coś źle w procesie.
Podoba mi się Twoja strona i będę wracać po więcej świetnych artykułów.
Jessie Delmo
jak dostosować ogromną przestrzeń na dole po filmie?
Christenger
To świetne rozwiązanie, ale mam dziwny problem. Niektóre identyfikatory działają, a inne nie.
Na przykład, to ID działa dla mnie [wpb-yt video="7vJdBec_B6A"], ale to drugie nie [wpb-yt video="CYveDEem5VA"]
Rednasil
Cześć wszystkim, dzięki za tutorial.. Udało mi się to szybko uruchomić na mojej stronie.
Ale używam wtyczki Yoast's video seo i zauważyłem, że nie rozpoznaje ona filmów z YouTube osadzonych za pomocą skróconego kodu.
Czy jest sposób, aby to się wydarzyło? Może obejście, które nie wymaga używania shortcode'ów??
Wsparcie WPBeginner
Nie próbowaliśmy z wtyczką Video SEO od Yoast. Zobaczymy, co możemy zrobić.
Admin
Rednasil
Dzięki, mam nadzieję, że uda wam się znaleźć rozwiązanie tego problemu.
Mat
Witajcie wszyscy,
Jak mogę dodać „Przyciski udostępniania jako nakładka na filmy YouTube” z osadzonym filmem YouTube w Revolution Slider?
W których plikach php i css powinienem wkleić kody?
Dziękuję, Twoja pomoc jest bardzo doceniana!!
Mat
Jay
Hej – naprawdę doceniam ten post.
Próbuję zmodyfikować fragment functions.php, aby przyciski udostępniania/tweetowania odnosiły się do mojej witryny zamiast do witryny youtube.com. Niestety mam wszelkiego rodzaju problemy. Czy możesz pomóc lub wskazać mi kogoś, kto może pomóc?? Grzebię w tym od godziny bez postępów.
Naprawdę cieszę się, że to opublikowałeś. Jest to niezwykle przydatne!!
Wsparcie WPBeginner
Jay, zaktualizowaliśmy post i dodaliśmy nowy fragment, który udostępnia link do posta zamiast filmu z YouTube. Mam nadzieję, że to pomoże.
Admin
Ike Brown
Proszę, gdy klikam na link, to nie działa. przyciski się pokazują, ale gdy się na nie kliknie, nic się nie dzieje
Farhan Shah
To jest niesamowite i opisowe.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
Wsparcie WPBeginner
Prawdopodobnie będziesz potrzebować dostosowania CSS. Nie możemy być pewni, czy zadziała to ze wszystkimi motywami, ponieważ istnieje tysiące motywów.
Admin
Martin
Stworzyłem ten plugin już 27 razy i nadal w ogóle nie działa! Naprawdę potrzebuję tej funkcji, czy możesz to wyjaśnić jeszcze raz i krok po kroku. Proszę, unikaj zaczynania od „po prostu zrób..”, ponieważ jestem prawdziwym nowicjuszem i kiedy tu siedzę, nic nie wiem.. Już zastosowałem się do Twojego samouczka dotyczącego funkcji.php i moja strona całkowicie się zawaliła. Rozumiem, że oferujesz tutaj świetne wsparcie, niesamowite! Kciuki w górę!! Super!!! Ale proszę, zrozum, że tworzenie i przestrzeganie kroków tyle razy bez rezultatu jest naprawdę frustrujące. Ten plugin w ogóle nie pojawia się w mojej instalacji WordPress.
Martin
„po prostu skopiuj to do functions.php..” wiesz, gdzie w functions.php?? na górze, gdzie zaczyna się od 1, czy na dole, gdzie są liczby 300 i tak dalej?? czy gdzieś pośrodku? Dziękuję <3
Wsparcie WPBeginner
na dole pliku functions.php
Admin
Wsparcie WPBeginner
Martin, rozumiemy Twoją frustrację. Czy możesz zainstalować inne wtyczki na swojej stronie?
Admin
Martin
jasne, nie ma problemu z instalacją wtyczek. Naprawiłem to również sam, ale efekt był tylko taki sobie, nie wygląda to zbyt schludnie, szczerze mówiąc. Więc usunąłem to ponownie. Szukałem innych rozwiązań, ale wydaje się, że nie istnieją, wszystko jest związane z „zarabianiem pieniędzy” lub „blokowaniem treści”... dlaczego ktoś lubiłby stronę, aby ją zablokować? Naprawdę potrzebuję tej wtyczki i nie mam pieniędzy na zatrudnienie ludzi. Proszę o wsparcie przez e-mail, mógłbyś mi wyjaśnić, jak mogę stylizować całość, aby wyglądała lepiej. Proszę, proszę, proszę! Byłbym bardzo wdzięczny. Dziękuję <3
Patrycja
To samo tutaj. Próbowałem dodać to do functions.php, potem z wtyczką specyficzną dla witryny. Nic. Nic. I naprawdę chciałbym, żeby to działało. Czy to działa na wszystkich motywach?
Pomiń
Świetny kod, który zaadaptowałem i zaimplementowałem na stronie testowej, w tym również Google+. Wiem, że główny nacisk nie jest na CSS, ale chciałem tylko zaznaczyć, że uważam, że przezroczystość 0 to bardzo zły pomysł, ponieważ coraz więcej przeglądania odbywa się na ekranach dotykowych, gdzie nie ma zdarzenia najazdu myszy, a przyciski nigdy nie będą widoczne. Albo zapomniałbym o efektach przezroczystości całkowicie, albo ustawiłbym początkową przezroczystość na 0,5 lub użył zapytań o media, aby kierować różne urządzenia z indywidualnymi ustawieniami przezroczystości.
Jason Gooljar
Czy można to zrobić również za pomocą atrybutu IMG?
Kannan M
Niesamowita sztuczka
Pam Simmons
To jest bardzo pomocne. Wygląda na to, że przyciski udostępniania w tym przykładzie faktycznie udostępniają link do filmu na YouTube, a nie stronę zawierającą osadzony film, tak jak robią to nakładki przycisków UpWorthy. Jak zmienić kod, aby pobrać stały link do strony, a nie link do YouTube?
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
Dziękuję. Chętnie wypróbuję to i dam wam znać o wynikach.
Manish Misra
To naprawdę dobre i pomaga mi w pracy….
Chris
To jest dobre. A co z użyciem identyfikatora listy odtwarzania w skróconym kodzie?
Większość ludzi używa statycznych filmów na postach, ale na stronach głównych używamy list odtwarzania.
Jak można zmodyfikować ten kod, aby dodać przyciski udostępniania nad filmami z playlisty?
Czyli do pracy z wtyczką YouTube Channel Gallery.
BTW – POD kodem Twój tekst mówi: „Poniższy kod tworzy skrócony kod, który automatycznie dodaje przyciski Twittera i Facebooka do Twoich filmów”.
Czy nie powinno być „…POPRZEDZAJĄCEGO kodu…”?
Wsparcie WPBeginner
Chris, zaktualizowaliśmy artykuł, możesz teraz używać go również z playlistami.
Admin
Krish Murali Eswar
Dobra robota. Zazwyczaj unikam wprowadzania zmian na poziomie kodu. Wydaje się to być prostym kandydatem na wtyczkę. Czy jesteś pewien, że nie ma takiej wtyczki?
Wsparcie WPBeginner
Ten kod może być używany w wtyczce specyficznej dla witryny.
Admin
Maj
To wygląda świetnie. Czy mógłbyś podać bardzo prostą instrukcję krok po kroku, jak to zainstalować – może na YouTube?
Subbareddy
To jest niesamowite
Steven
Świetny artykuł!
Jak teraz dodać ten shortcode do edytora shortcode'ów HTML, który pojawia się na pasku tinymce?
Steve Wharton
Całkiem fajny kod. Nie mogę się doczekać, aby się nim pobawić i dodać do mojej nowej strony. Dzięki!
Tom Horn
Czy istnieje sposób na wykorzystanie wtyczki do dodania tego kodu, abyśmy nie zepsuli niczego, jeśli nie jesteśmy przyzwyczajeni do pracy "pod maską"? Dziękuję za to, ja widziałem takie rzeczy wcześniej i naprawdę chciałem wiedzieć, jak to zrobić.
Wsparcie WPBeginner
Tak, możesz dodać to do wtyczki specyficznej dla witryny.
Admin
Pam Blizzard
Dziękuję za podzielenie się tym, to eleganckie rozwiązanie.
Czy myślisz, że mogłoby to zadziałać również w przypadku playlist YouTube, z składnią „PLxxxetc”?
Wsparcie WPBeginner
W zasadzie możesz zmodyfikować krótki kod, aby wyświetlał dowolny rodzaj osadzenia, a następnie użyć CSS do pozycjonowania przycisków udostępniania na tym osadzeniu. Więc tak, powinno działać.
Admin
Steven Jacobs
Czy byłaby możliwość zrobienia tego również z odtwarzaczami SoundCloud?
Świetny artykuł, tak przy okazji.
Wsparcie WPBeginner
Tak, powinno działać z osadzeniami SoundCloud, ale będziesz musiał dodać je w shortcode, a następnie użyć CSS do odpowiedniego pozycjonowania.
Admin
Zimbrul
To całkiem fajna rzecz do zrobienia z filmami na YouTube: przyciski udostępniania. Podobają mi się również te pływające przyciski na obrazach dodawane przez FooBox
Pam
To jest niesamowite, dziękuję!
Czy myślisz, że można by to dostosować do pracy z playlistami, a także z pojedynczymi filmami?