Create Social Share Buttons Tạo Nút Chia Sẻ Xã Hội Không Javacript

Tại sao phải tạo nút chia sẻ xã hội ?

Một website cần có Social Share Buttons nó hoàn toàn cần thiết. Bạn có thể tưởng tượng khi người dùng thấy một bài viết hay một sản phẩm hay. Họ muốn cho bạn bè của họ biết, thật bất tiện khi phải gõ tiêu đề và copy link. Thay vào đó là Social Share Button chỉ cần click là chia sẻ ngay. Sử dụng plugin thật dễ dàng nhưng hãy xem nó có thể tải những javacript mà chúng ta không mong muốn nó làm chậm website.
Chúng tôi sẽ hướng dẫn các bạn tối ưu hóa website của các bạn bằng cách loại bỏ các plugin và javacript.

Bắt đầu tạo các nút chia sẻ xã hội của riêng bạn.

Đầu tiên hãy sử dụng trình biên tập yêu thích của các bạn mở file function.php theme của các bạn lên. Copy và pate đoạn mã dưới đây vào cuối cùng của file function.php.

// Create Social Share Buttons .
if ( ! function_exists( 'socialshare_buttons' ) ):
function socialshare_buttons() {

	// 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;

Hiển thị nút chia sẽ xã hội trên post, page

Như vậy các bạn đã có các nút chia sẻ xã hội của riêng mình và bậy giờ hãy cho chúng hiển thị bên ngoài trang web. Copy và pate đoạn mã dưới đây vào cuối cùng của file function.php.

// Create Social Share Buttons .
if ( !class_exists( 'AddSocilaShareContent' ) ) {
	class AddSocilaShareContent {
		function __construct() {
			add_filter(	'the_content', array( $this,'insert_socialshare_content') );
		}
		public function insert_socialshare_content( $content ) {
			if ( is_singular( array( 'post', 'page' ) ) ) { // Display On post, page
				socialshare_buttons();  // Display on Before
				$socialshare_content = $this->get_after_content();
		    	$content.= apply_filters('socialshare_content', $socialshare_content );
			}
		   	return $content;
		} // Star Display On After
		public function get_after_content() {
			ob_start();
			socialshare_buttons(); 
			$socialshare = ob_get_contents();
			ob_end_clean();
			return $socialshare;
		} // End Display On After
	}
	new AddSocilaShareContent(); 
}

Tùy chỉnh nút chia sẻ xã hội theo tâm trí của bạn

Bạn có thể tùy chỉnh hiển thị trên post hoặc page hoặc hiển thị trên cả hai bằng cách thay đổi trên dòng số 8 . Hiển thị hoặc bỏ hiển thị trên đầu nội dung ( content ) bằng cách xóa dòng số 9. Hiển thị hoặc bỏ hiển thị dưới nội dung ( content ) bằng cách xóa dòng số 15 đến dòng số 21.

Làm đẹp cho nút chia sẻ xã hội.

Mở file Style.css theme của bạn lên copy và pate mã css bên dưới vào cuối file.

/* 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;
}

Lời kết

Như vậy là xong rồi đấy, ra ngoài page hoặc post để thưởng thức thành quả nào. Kết thúc tốt đẹp với nút chia sẻ xã hội của riêng bạn không plugin không javacript.

Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích. Nếu vậy, hãy xem xét chia sẻ nó với khán giả của bạn!