Hur man lÀgger till delningsknappar som överlÀgg pÄ YouTube-videor i WordPress

Hur man lÀgger till delningsknappar 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 oss om ett sÀtt att skapa delningsknappöverlagringar pÄ videor som liknar den populÀra webbplatsen UpWorthy. I den hÀr artikeln visar vi dig 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-videor

Det fanns flera sÀtt att göra detta. De flesta sÀtt skulle krÀva att du klistrar in en bit HTML-kod varje gÄng du lÀgger till en video. IstÀllet för att göra det bestÀmde vi oss för att skapa en kortkod som skulle automatisera denna överlÀggningseffekt.

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



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


Den hÀr koden skapar en kortkod som automatiskt lÀgger till twitter- och facebook-delningslÀnkar till dina videor. Dessa knappar syns bara nÀr anvÀndaren tar musen över videon. Du kan anvÀnda den för att lÀgga till nÄgon annan social mediekanal ocksÄ.

För att anvÀnda den hÀr kortkoden Àr allt du behöver göra att lÀgga till YouTube-video-ID i kortkoden sÄ hÀr:

[wpb-yt video=”qzOOy1tWBCg”]

Du kan hÀmta YouTube-video-ID: t frÄn URL-strÀngen. SÄ hÀr:

Hitta YouTube-video-ID

Nu nÀr du lÀgger till en video kommer du att kunna se din YouTube-video och enkla textlÀnkar för att dela videon pÄ Facebook eller Twitter. Du kommer att mÀrka att dessa lÀnkar inte Àr utformade alls.

SÄ kan vi utforma dessa lÀnkar för att skapa knappar, sÄ det ser lite trevligare ut. Vi kommer ocksÄ att dölja dessa knappar och fÄ dem att visas endast nÀr en anvÀndare tar musen pÄ videokontainern. För att göra detta lÀgg till följande CSS i ditt temat för ditt barns tema.



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

Det Àr allt. Nu ska du ha delningsknapparna överlagrade pÄ dina YouTube-videor i WordPress.

LÀgga till delningsknappar som överlÀgg för YouTube-videospellistor i WordPress

Efter att ha publicerat den hÀr artikeln frÄgade mÄnga av vÄra lÀsare hur den hÀr koden kan modifieras sÄ att den fungerar för YouTube-spellistor och videor. Om du bÀddar in YouTube-videor och spellistor pÄ din WordPress-webbplats bör du anvÀnda den hÀr koden istÀllet.


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

Med koden ovan kan du ocksÄ lÀgga till en spellista med överliggande delningsknappar. För att visa din spellista mÄste du ange video-id och spellista-id i kortkoden sÄ hÀr:

[wpb-yt video=”exP9N3rIfV0″ playlist=”UUhA624rCabHAmd6lpkLOw7A”]

Du kan fÄ dina video- och spellist-ID: n genom att besöka spellistan pÄ YouTube och kopiera lista-ID frÄn URL: en sÄ hÀr:

FÄ YouTube-video- och spellist-ID frÄn URL

LÀgga till WordPress-inlÀggslÀnk i Dela-knappöverlagring pÄ YouTube-videor

Efter att vi publicerat den hÀr artikeln frÄgade nÄgra av vÄra anvÀndare att de skulle vilja att delningsknapparna skulle dela sitt WordPress-inlÀggs lÀnk istÀllet för YouTube-videolÀnk. För att göra det mÄste du ersÀtta video-URL i delningsknappar med WordPress-inlÀggets permalÀnk. AnvÀnd den hÀr koden i dina funktioner.php eller platsspecifikt plugin:


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


Ändra gĂ€rna CSS eller kortkodavsnitten för att möta dina behov. För att ytterligare optimera dina videor kan du göra dina YouTube-videor lyhörda med 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-miniatyrbilder.

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 mediekanaler du planerar att lÀgga till pÄ dina videor genom att lÀmna en kommentar nedan.