Cách thêm nút chia sẻ làm lớp phủ trên video YouTube trong WordPress

Video là một trong những cách tốt nhất để tăng mức độ tương tác của người dùng. Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi về cách tạo lớp phủ nút chia sẻ trên video tương tự như trang web nổi tiếng UpWorthy. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm nút chia sẻ làm lớp phủ trên video YouTube trong WordPress.

Other :

Ví dụ về nó sẽ trông như thế nào:

How to Add Share Buttons as Overlay on YouTube Videos in WordPress

Thêm nút chia sẻ làm lớp phủ trên video YouTube

Có một số cách có thể được thực hiện. Hầu hết các cách sẽ yêu cầu bạn dán một đoạn mã HTML mỗi khi bạn thêm video. Thay vì làm điều đó, chúng tôi quyết định tạo một mã ngắn có thể tự động hóa hiệu ứng lớp phủ này.

Chỉ cần sao chép và dán mã sau vào một plugin dành riêng cho trang web hoặc tệp functions.php của chủ đề của bạn:


/// 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  data-src="//www.youtube.com/embed/'%20.%20$video%20.%20'" 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'.%20$video%20.'" 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'.%20$video%20.'">Tweet</a></li></ul>';

// Close video container    
	$string .= '</div>';

// Return output	
	return $string; 

} 
// Add Shortcode 
add_shortcode('wpb-yt', 'wpb_yt_buttons');

Mã này tạo ra một mã ngắn tự động thêm liên kết chia sẻ twitter và facebook vào video của bạn. Các nút này chỉ hiển thị khi người dùng đưa chuột qua video. Bạn cũng có thể sử dụng nó để thêm bất kỳ kênh truyền thông xã hội nào khác.

Để sử dụng shortcode này, tất cả những gì bạn cần làm là thêm ID video YouTube vào shortcode như sau:

[wpb-yt video="qzOOy1tWBCg"]

Bạn có thể lấy ID video YouTube từ chuỗi URL. Như thế này:

Finding the YouTube Video ID

Giờ đây, khi bạn thêm video, bạn sẽ có thể thấy video YouTube của mình và các liên kết văn bản thuần túy để chia sẻ video trên Facebook hoặc Twitter. Bạn sẽ nhận thấy rằng các liên kết này không có kiểu dáng nào cả.

Vì vậy, hãy tạo kiểu cho các liên kết này để tạo các nút, để nó trông đẹp hơn một chút. Chúng tôi cũng sẽ ẩn các nút này và làm cho chúng chỉ xuất hiện khi người dùng đưa chuột vào vùng chứa video. Để thực hiện việc này, hãy thêm CSS sau vào biểu định kiểu của Chủ đề con của bạn.


#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;
}

Đó là tất cả. Bây giờ bạn sẽ có lớp phủ nút chia sẻ trên video YouTube của mình trong WordPress.

Thêm nút Chia sẻ làm Lớp phủ cho Danh sách phát video YouTube trong WordPress

Sau khi xuất bản bài viết này, nhiều độc giả của chúng tôi đã hỏi, mã này có thể được sửa đổi như thế nào để hoạt động cho danh sách phát YouTube cũng như video. Nếu bạn nhúng video YouTube cũng như danh sách phát vào trang web WordPress của mình, thì bạn nên sử dụng mã này để thay thế.

/ * * Nút chia sẻ lớp phủ của WPBeginner * trên Video và Danh sách phát của YouTube * / function wpb_yt_buttons ($ atts) {// Lấy id video và danh sách phát từ trích xuất shortcode (shortcode_atts (array ('video' => '', 'playlist' = > '',), $ atts)); // Kiểm tra xem id danh sách phát có được cung cấp mã ngắn hay không nếu (! $ Playlist == ''): // Hiển thị danh sách phát video $ string = '<div id = "video-container"> <iframe  data-src="// www.youtube.com/embed/ '. $ video.'? list = '. $ playlist.' "height =" 315 "width =" 560 "allowfullscreen =" "frameborder =" 0 "> </iframe> '; // Thêm nút Facebook $ 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> '; // Thêm nút Twitter $ 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> '; // Đóng vùng chứa video $ string. = '</div>'; // Nếu không cung cấp ID danh sách phát nào khác: // Hiển thị video $ string. = '<Div id = "video-container"> <iframe src = "// www.youtube.com/embed/'. $ Video. ' "height =" 315 "width =" 560 "allowfullscreen =" "frameborder =" 0 "> </iframe> '; // Thêm nút Facebook$ 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> ' ; // Thêm nút Twitter $ 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> '; // Đóng vùng chứa video $ string. = '</div>'; endif; // Kết quả trả về return $ string; } // Thêm shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Sử dụng mã ở trên, bạn cũng có thể thêm danh sách phát với các nút chia sẻ chồng lên nhau. Để hiển thị danh sách phát của bạn, bạn sẽ phải cung cấp id video và id danh sách phát trong shortcode như sau:

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

Bạn có thể lấy ID video và danh sách phát của mình bằng cách truy cập danh sách phát trên YouTube và sao chép ID danh sách từ URL, như sau:

Getting YouTube Video and Playlist ID from URL

Thêm liên kết bài đăng WordPress vào lớp phủ nút chia sẻ trên video YouTube

Sau khi chúng tôi xuất bản bài viết này, một số người dùng của chúng tôi đã hỏi rằng họ muốn các nút chia sẻ để chia sẻ liên kết bài đăng WordPress của họ thay vì liên kết video YouTube. Để làm điều đó, bạn cần thay thế URL video trong các nút chia sẻ bằng liên kết cố định của bài đăng WordPress. Sử dụng mã này trong functions.php hoặc plugin dành riêng cho trang web của bạn:

/// 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  data-src="//www.youtube.com/embed/'%20.%20$video%20.%20'" 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='.%20$permalink_encoded%20.'" 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='.%20$permalink_encoded%20.'">Tweet</a></li></ul>';

// Close video container    
	$string .= '</div>';

// Return output	
	return $string; 

} 
// Add Shortcode 
add_shortcode('wpb-yt', 'wpb_yt_buttons');

Vui lòng sửa đổi CSS hoặc các đoạn mã ngắn để đáp ứng nhu cầu của bạn. Để tối ưu hóa hơn nữa video của mình, bạn có thể làm cho video YouTube của mình đáp ứng bằng cách sử dụng plugin FitVids jQuery. Bạn cũng có thể tắt các video liên quan xuất hiện ở cuối video. hoặc thậm chí tạo hình ảnh nổi bật từ hình thu nhỏ video YouTube.

Chúng tôi hy vọng rằng bài viết này đã giúp bạn thêm các nút chia sẻ tùy chỉnh làm lớp phủ trên video YouTube trong WordPress. Hãy cho chúng tôi biết bạn định thêm kênh truyền thông xã hội nào vào video của mình bằng cách để lại nhận xét bên dưới.

Free Download Cách thêm nút chia sẻ làm lớp phủ trên video YouTube trong WordPress :


Nếu bạn muốn phiên bản mới nhất hoặc bản sạch, vui lòng liên hệ qua messenger tại đây : m.me/101324895411988

If you want the lastest version or original,please contact via messenger

Ủng hộ tôi qua MOMO

Ủng Hộ TÔi

Decryption key :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress