Hướng dẫn chèn nút: like + share từ facebook, twitter, LinkIn, Pinterest vào website wordpress (ko dùng plugin)

Khá nhiều lần mình muốn viết về việc sẻ chia,. Cơ mà nhìn web mình tới nút share còn chả có thì nói gì chuyện chia sẻ . Thật ra thì ném cái plugin vào là được, nhưng mà sẽ làm giảm tốc độ. Rồi làm các thứ này nọ tới web của mình mà mình không biết. Vậy nên cũng lười chưa làm. Rồi đã có giải pháp để giải quyết, chèn nút share mà không cần plugin & javascripts. Zo! đề nhé: Bài này chia làm 2 phần:
Phần 1: Tích hợp nút chia sẻ website lên mạng xã hội. Hỗ trợ 4 mạng xã hội chính:
– Twitter, Facebook, LinkIn, Printerest.
Hoàn toàn không sử dụng: Plugin , JavaScripts. Và không ảnh hưởng tới hiệu năng của website.
Phần 2: Tích hợp ( thêm) nút Like + Share vào website wordpress.

Nút Share không sử dụng: Plugin , JavaScripts
Nút Share không sử dụng: Plugin , JavaScripts

Giải thích tại sao bạn nên tự làm nút chia sẻ bài viết của mình?

  • Phần lớn các plugin làm nút chia sẻ không tối ưu cho nhu cầu của bạn.
    mình chắc chắn là đúng, vì 1 plugin người ta làm ra cho cả nghìn người. Cả nghìn người thì có nhu cầu khác nhau là chuyện bình thường.
  • Có thể sẽ làm tăng lượng HTTP requests không cần thiết lên sever của bạn.
  • Nếu bạn sử dụng nút chia sẻ từ các website chính chủ ( ví dụ nút share của FB lên FB). Chắc chắn nó sẽ tải các thư viện javascripts cho từng nútbạn cài thêm. Mình sẽ giải thích thêm ở dưới:

Đây là 4 đoạn script mà bạn phải chèn khi bạn sử dụng các plugin hoặc làm theo yêu cầu chính thống từ website:

========> Twitter script: <======== <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> ========> Facebook HTML5 script: <========= <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> ========> Pinterest script: <======== <script async defer src="//assets.pinterest.com/js/pinit.js"></script> ========> LinkedIn script: <======== <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>

Nhìn sơ sơ, bạn đã thấy người dùng phải tải cả 4 tập lệnh JS cho 4 nút chia sẻ. Bạn có nghĩ rằng: “điều này không làm ảnh hưởng tới tốc độ tải trang? “. Nếu câu trả lời là đúng thì bạn tắt bài viết này, và không cần xem tiếp.

Giờ tôi hướng dẫn bạn chèn nút chia sẻ bài viết lên facebook, twitter, LinkedIn và pinterest.

Trong thư mục themes của web bạn đang dùng, mở function.php và dán đoạn code sau vào phần dưới cùng:

function crunchify_social_sharing_buttons($content) { global $post; if(is_singular() || is_home()){ // Get current page URL $crunchifyURL = urlencode(get_permalink()); // Get current page title $crunchifyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); // $crunchifyTitle = str_replace( ' ', '%20', get_the_title()); // Get Post Thumbnail for pinterest $crunchifyThumbnail = 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='.$crunchifyTitle.'&amp;url='.$crunchifyURL.'&amp;via=nghiart'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&amp;title='.$crunchifyTitle; // Based on popular demand added Pinterest too $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&amp;media='.$crunchifyThumbnail[0].'&amp;description='.$crunchifyTitle; // Add sharing button at the end of page/page content $content .= '<!-- Implement your own superfast social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: https://crunchify.com/?p=7526 -->'; $content .= '<div class="crunchify-social">'; $content .= '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>'; $content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>'; $content .= '<a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>'; $content .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>'; $content .= '</div>'; return $content; }else{ // if not a post/page then don't include sharing button return $content; } }; add_filter( 'the_content', 'crunchify_social_sharing_buttons');

Bước sau làm đẹp 1 chút với css. Trong cùng thư mục themes bạn mở files style.css và thêm vào đoạn css sau:

.crunchify-link { padding: 2px 8px 4px 8px !important; color: white; font-size: 12px; border-radius: 2px; margin-right: 2px; cursor: pointer; -moz-background-clip: padding; -webkit-background-clip: padding-box; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); margin-top: 2px; display: inline-block; text-decoration: none; } .crunchify-link:hover,.crunchify-link:active { color: white; } .crunchify-twitter { background: #00aced; } .crunchify-twitter:hover,.crunchify-twitter:active { background: #0084b4; } .crunchify-facebook { background: #3B5997; } .crunchify-facebook:hover,.crunchify-facebook:active { background: #2d4372; } .crunchify-googleplus { background: #D64937; } .crunchify-googleplus:hover,.crunchify-googleplus:active { background: #b53525; } .crunchify-buffer { background: #444; } .crunchify-buffer:hover,.crunchify-buffer:active { background: #222; } .crunchify-pinterest { background: #bd081c; } .crunchify-pinterest:hover,.crunchify-pinterest:active { background: #bd081c; } .crunchify-linkedin { background: #0074A1; } .crunchify-linkedin:hover,.crunchify-linkedin:active { background: #006288; } .crunchify-social { margin: 20px 0px 25px 0px; -webkit-font-smoothing: antialiased; font-size: 12px; }

Bước 3: xóa cache, tắt các plugin đang sử dụng. xem kết quả.

Nếu bạn muốn nút chia sẻ nằm ở trên cùng mỗi bài viết?

thì thay vì dùng đoạn code trên bước 1., hãy sử dụng đoạn code sau:

function crunchify_social_sharing_buttons($content) { global $post; if(is_singular() || is_home()){ // Get current page URL $crunchifyURL = urlencode(get_permalink()); // Get current page title $crunchifyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); // $crunchifyTitle = str_replace( ' ', '%20', get_the_title()); // Get Post Thumbnail for pinterest $crunchifyThumbnail = 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='.$crunchifyTitle.'&amp;url='.$crunchifyURL.'&amp;via=nghiart'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&amp;title='.$crunchifyTitle; // Based on popular demand added Pinterest too $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&amp;media='.$crunchifyThumbnail[0].'&amp;description='.$crunchifyTitle; // Add sharing button at the end of page/page content $variable .= '<!-- Implement your own social sharing buttons without any JavaScript loading. No plugin required. -->'; $variable .= '<div class="crunchify-social">'; $variable .= '<a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>'; $variable .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>'; $variable .= '<a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>'; $variable .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>'; $variable .= '</div>'; return $variable.$content; }else{ // if not a post/page then don't include sharing button return $variable.$content; } }; add_filter( 'the_content', 'crunchify_social_sharing_buttons');

KKếtquar:

chèn nút like share
kết quả chèn nút like share

Phần 2: chèn nút like share lên facebook – hướng dẫn và giải thích

mình sẽ hướng dẫn bạn cài, nhưng không khuyến nghị nhé. Trc khi bắt đầu, bạn cần tạo cho mình 1 ứng dụng trên facebook develop. Truy cập: https://developers.facebook.com/ để bắt đầu tạo nhé.

Bước 2: vào https://developers.facebook.com/docs/plugins/like-button# và bạn thiết lập nút thích và chia sẻ như mong muốn.

evelopers.facebook
developers.facebook

sau khi ấn “lấy mã” có hộp thoại xuất hiện. Bạn lựa chọn theo ứng dụng đã tạo trước đó:

lấy mã ứng dụng
lấy mã ứng dụng

Chúng ta sẽ có 2 đoạn mã: đoạn đầu tiên:

<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v6.0&appId=507470019841425&autoLogAppEvents=1"></script>

đoạn này bạn sẽ dán vào trong thẻ <body> của theme bạn đang sử dụng. Đoạn thứ 2 có dạng:

<div class="fb-like" data-href="https://nghiart.com" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>

Đoạn này cần dán vào những chỗ mà bạn muốn nút like + share facebook hiển thị,. Ví dụ như từng bài viết sử dụng theme flatsome. Tuy nhiên, để hoạt động ngon với wordpress. Bạn cần tinh chỉnh 1 chút, như sau: đoạn data-href=”https://nghiart.com” sửa thành data- href=”<?php the_permalink() ;?>”. Và đoạn code trên đúng là:

<div class="fb-like" data-href="<?php the_permalink() ;?>" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>

giải thích chút: đơn giản là đổi cái địa chỉ like + share cứng https://nghiart.com. Thành địa chỉ của link đang hiển thị.

kết quả nút like và share
kết quả nút like và share

Chúc các bạn thành công. Đừng quên share bài viết nếu thấy hay và hữu ích vì nó Free nhé

Nhớ bình chọn chất lượng bài viết để mình cố gắng :v
[Total: 1   Average: 5/5]
guest
0 Comments
Inline Feedbacks
View all comments