Social Share Buttons Code Genesis Child Themes Phần 8

Thêm liên kết chia sẻ lên các mạng xã hội giúp trang web của bạn phổ biến hơn. Đối với người dùng tiện dụng hơn với người dùng không phải copy & pate.
Chúng tôi đã có bài viết hướng dẫn tạo Social Share Buttons trên tất cả các themes mà không dùng plugin. Trong Serie hướng dẫn Code Genesis Child Themes này các bạn tiếp tục code. Social Share mà không cần dùng plugin, không jquery.

Social Share Buttons

Function.php file

Copy code bên dưới pate vào file function.php child themes của bạn để tạo button liên kết chia sẻ lên mạng xã hội.

// Create Social Share Buttons .
if ( ! function_exists( 'socialshare_buttons' ) ):
add_action( 'genesis_entry_footer', 'socialshare_buttons', 18 );
function socialshare_buttons() {
	if( is_single( ) ) {
		// Get current page URL 
		$longvietURL = urlencode(get_permalink());

		// Get current page title
		$longvietTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
		
		// Get Post Thumbnail for pinterest
		$longvietThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

		// Construct sharing URL without using any script
		$twitterURL = 'https://twitter.com/intent/tweet?text='.$longvietTitle.'&url='.$longvietURL;
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$longvietURL;
		$bufferURL = 'https://bufferapp.com/add?url='.$longvietURL.'&text='.$longvietTitle;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$longvietURL.'&title='.$longvietTitle;
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$longvietURL.'&media='.$longvietThumbnail[0].'&description='.$longvietTitle;

		// Add sharing button at the end of page/page content
		$content='<div class="longviet-social">
			<div class="longviet-link social-title"><h5>SHARE ON</h5></div>
			<a class="longviet-link longviet-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>
			<a class="longviet-link longviet-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>
			<a class="longviet-link longviet-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>
			<a class="longviet-link longviet-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>
			<a class="longviet-link longviet-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>
		</div>';
		echo $content;
	}
}
endif;

Style.css file

Copy code css bên dưới pate vào cuối file style.css.

/* Social share button */

.longviet-social {
    margin: 10px 0px;
    padding: 10px;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    border: 1px solid #eee;
}

.longviet-link {
    padding: 4px 8px !important;
    color: #fff !important;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 2px;
    cursor: pointer;
    margin-top: 2px;
    display: inline-block;
    text-decoration: none;
}

.social-title h5 {
    padding: 0px !important;
    margin: 0 !important;
}
 
.longviet-link:hover,.longviet-link:active {
    color: white;
}
 
.longviet-twitter {
    background: #00aced;
}
 
.longviet-twitter:hover,.longviet-twitter:active {
    background: #0084b4;
}
 
.longviet-facebook {
    background: #3B5997;
}
 
.longviet-facebook:hover,.longviet-facebook:active {
    background: #2d4372;
}
 
.longviet-buffer {
    background: #444;
}
 
.longviet-buffer:hover,.longviet-buffer:active {
    background: #222;
}
 
.longviet-pinterest {
    background: #bd081c;
}
 
.longviet-pinterest:hover,.longviet-pinterest:active {
    background: #bd081c;
}
 
.longviet-linkedin {
    background: #0074A1;
}
 
.longviet-linkedin:hover,.longviet-linkedin:active {
    background: #006288;
}