Nút chia sẻ bài viết lên các trang mạng xã hội sẽ giúp nội dung bài viết được lan truyền rộng rãi hơn cho cộng đồng. Chúng ta có thể tạo các nút chia sẻ như sau nhé:
B1 thêm hàm sau vào function.php của theme hiện hành
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/** Hiển thị nút chia sẻ **/ 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.'&url='.$crunchifyURL.'&via=Crunchify'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL; $bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&title='.$crunchifyTitle; // Based on popular demand added Pinterest too $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&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://codfe.com/tao-nut-chia-se-bai-viet-tren-cac-mang-xa-hoi-cho-wordpress/ -->'; $content .= '<div class="crunchify-social">'; $content .= '<h5>CHIA SẺ NỘI DUNG</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-buffer" href="'.$bufferURL.'" target="_blank">Buffer</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; } } |
Css mông má lại cho đoạn code trên như sau nhé
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
.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-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; } |
Nguồn tham khảo: https://crunchify.com/how-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal/
