четвъртък, август 11

Как да добавите бутони за споделяне като наслагване към видеоклипове в YouTube в WordPress

0
21
Как да добавите бутони за споделяне като наслагване към видеоклипове в YouTube в WordPress


Видеоклиповете са един от най-добрите начини за повишаване на ангажираността на потребителите. Наскоро един от нашите потребители ни попита за начин за създаване на наслагвания с бутони за споделяне върху видеоклипове, подобни на популярния сайт UpWorthy. В тази статия ще ви покажем как да добавите бутони за споделяне като наслагване на видеоклипове в YouTube в WordPress.

Пример за това как ще изглежда:

Добавяне на бутони за споделяне като наслагване във видеоклипове в YouTube

Имаше няколко начина, по които това можеше да стане. Повечето начини ще изискват от вас да поставяте части от HTML код всеки път, когато добавяте видеоклип. Вместо да правим това, решихме да създадем кратък код, който да автоматизира този ефект на наслагване.

Просто копирайте и поставете следния код в специфичен за сайта плъгин или във файла functions.php на вашата тема:



/// UpScale'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./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%2F/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&amp;url=http%3A//www./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');


Този код създава кратък код, който автоматично добавя връзки за споделяне на Twitter и Facebook към вашите видеоклипове. Тези бутони се виждат само когато потребителят постави мишката върху видеоклипа. Можете да го използвате и за добавяне на всеки друг канал в социалните медии.

За да използвате този кратък код, всичко, което ще трябва да направите, е да добавите идентификатора на видеоклипа в YouTube в краткия код по следния начин:

[wpb-yt video="qzOOy1tWBCg"]

Можете да получите идентификатора на видеоклипа в YouTube от URL низа. Като този:

Намиране на идентификатора на видеоклипа в YouTube

Сега, когато добавите видеоклип, ще можете да видите вашето видео в YouTube и обикновени текстови връзки, за да споделите видеоклипа във Facebook или Twitter. Ще забележите, че тези връзки изобщо не са стилизирани.

Така че нека стилизираме тези връзки за създаване на бутони, така че да изглежда малко по-хубаво. Ние също така ще скрием тези бутони и ще ги направим да се показват само когато потребителят вземе мишката си върху видео контейнера. За да направите това, добавете следния CSS към стиловата таблица на вашата детска тема.



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

Това е всичко. Сега трябва да имате наслагване на бутони за споделяне върху вашите видеоклипове в YouTube в WordPress.

Добавяне на бутони за споделяне като наслагване за YouTube видео плейлисти в WordPress

След публикуването на тази статия много от нашите читатели попитаха как този код може да бъде модифициран, за да работи за плейлисти в YouTube, както и за видеоклипове. Ако вграждате видеоклипове от YouTube, както и плейлисти във вашия WordPress сайт, тогава трябва да използвате този код вместо това.


/*
* UpScale'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./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%2F/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&amp;url=http%3A//www./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./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%2F/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&amp;url=http%3A//www./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');

Използвайки кода по-горе, можете също да добавите плейлист с наслагващи се бутони за споделяне. За да покажете своя плейлист, ще трябва да предоставите идентификатора на видеоклипа и идентификатора на плейлиста в краткия код, както следва:

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

Можете да получите идентификаторите на вашите видеоклипове и плейлисти, като посетите плейлиста в YouTube и копирате идентификатора на списъка от URL адреса, както следва:

Получаване на идентификатор на видеоклип и плейлист в YouTube от URL

Добавяне на връзка за публикуване на WordPress в наслагване на бутона за споделяне във видеоклипове в YouTube

След като публикувахме тази статия, някои от нашите потребители поискаха, че биха искали бутоните за споделяне да споделят връзката към публикацията им в WordPress вместо връзка към видео в YouTube. За да направите това, трябва да замените URL адреса на видео в бутоните за споделяне с постоянната връзка на публикацията в WordPress. Използвайте този код във вашия functions.php или специфичен за сайт плъгин:


/// UpScale'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./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&amp;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');


Чувствайте се свободни да модифицирате CSS или фрагментите с кратък код, за да отговарят на вашите нужди. За да оптимизирате допълнително вашите видеоклипове, можете да направите вашите видеоклипове в YouTube отзивчиви с помощта на плъгин FitVids jQuery. Можете също да изключите свързани видеоклипове, които се показват в края на видеоклипа. или дори да създавате представени изображения от миниатюри на видеоклипове в YouTube.

Надяваме се, че тази статия ви помогна да добавите персонализирани бутони за споделяне като наслагване върху видеоклипове в YouTube в WordPress. Уведомете ни кои социални медийни канали планирате да добавите към вашите видеоклипове, като оставите коментар по-долу.



Comments are closed.