Khi đã xác định xây dựng blog thì việc chia sẻ các bài viết mạng xã hội là một phần không thể thiếu. Sức mạnh của mạng xã hội, đặc biệt là facebook sẽ làm cho blog được nhiều người biết đến hơn.
Vì vậy, hôm nay mình chia sẻ cách để chèn các nút share vào bài viết. Theo đúng phong cách của mình là chèn code trực tiếp, nói không với plugin nhỉ :).
1Code chèn nút share vào bài viết
Ở đây mình sẽ cung cấp cho các bạn đoạn code để chèn vào vị trí bạn muốn. Thường là trên cùng hoặc dưới cùng mỗi bài viết hoặc cả hai.
Bạn mở file content-single.php của theme đang sử dụng (có thể là single.php tùy theme). Chép và dán đoạn code bên dưới vào vị trí thích hợp. Nếu chèn vào đầu bài viết thì thường nó sẽ nằm trên dòng <?php the_content();
<div class="share-header">
<a class="" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank" title="Chia sẻ Facebook"><span class="share-button-f"><i class="fab fa-facebook-square"></i></span></a>
<a class="" href="https://twitter.com/share?url=<?php the_permalink(); ?>" target="_blank" title="Chia sẻ Twitter"><span class="share-button-t"><i class="fab fa-twitter-square"></i></span></a>
<a class="" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(get_the_ID()); ?>&source=canxem.com" target="_blank" title="Chia sẻ Linkedin"><span class="share-button-i"><i class="fab fa-linkedin"></i></span></a>
<a class="" href="https://www.pinterest.com/pin/create/link/?url=<?php the_permalink(); ?>&media=<?php echo the_post_thumbnail_url('large'); ?>&description=<?php echo get_the_title(get_the_ID()); ?>" target="_blank" title="Chia sẻ Pinterest"><span class="share-button-p"><i class="fab fa-pinterest-square"></i></span></a>
</div>Nếu muốn chèn thêm cuối trang hoặc các vị trí khác thì tiếp tục chép và dán vào, bao nhiêu lần cũng được.
Có rất nhiều mạng xã hội, nhưng mình chỉ chia sẻ 4 mạng phổ biến nhất. Còn lại các bạn có thể tự tìm hiểu và thêm vào nếu muốn.
2Viết mã CSS cho nút share
Mình sẽ không dùng hình ảnh mà sẽ kết hợp giữa fontawesome và CSS. Bên dưới là đoạn CSS của canxem.com, các bạn có thể sử dụng nếu thích.
/*--------------------------------------------------------------
# Social share
--------------------------------------------------------------*/
.share-header { display:flex;width:100%; height:45px;}
.text-share {display:inline-block; margin-right:3px; color:#888;font-size:14px}
.share-button-f { color: #4691f5; font-size: 34px; overflow: hidden; margin-right:10px;}
.share-button-t { color: #48B3F5; font-size: 34px; overflow: hidden; margin-right:10px;}
.share-button-i { color: #8b47bf; font-size: 34px; overflow: hidden; margin-right:10px;}
.share-button-p { color: #cd3342; font-size: 34px; overflow: hidden; margin-right:10px;}CSS của mình khá đơn giản, bạn có thể dễ dàng tùy chỉnh màu sắc, độ lớn, khoảng cách cho nút. Làm cho nó long lanh lên để tạo ấn tượng với người xem để họ nhấn chia sẻ.
Và cuối cùng đây là kết quả:
Rất đơn giản phải không. Với các đoạn code mẫu như trên, bạn có thể tùy biến chèn vào khắp nơi trên trang web. Chỉ cần chỉnh sửa lại đường dẫn một chút, sửa lại CSS một chút là đẹp.
3Chèn nút share ngoài trang chủ
Ví dụ bạn muốn chèn nút share ngoài trang chính để share trang web của mình. Có thể sử dụng đoạn code mẫu bên dưới. Thay thế https://canxem.com bằng link trang web của bạn. Nếu muốn chèn đầu trang thì chép vào file header.php. Nếu chèn cuối trang thì chép vào file footer.php. Hoặc bất cứ nơi nào khác mà bạn thích.
<div class="footer-share">
<a class="" href="https://www.facebook.com/sharer/sharer.php?u=https://canxem.com" target="_blank" title="Chia sẻ Facebook"><span class="share-footer-f"><i class="fab fa-facebook-square"></i></span></a>
<a class="" href="https://twitter.com/share?url=https://canxem.com" target="_blank" title="Chia sẻ Twitter"><span class="share-footer-t"><i class="fab fa-twitter-square"></i></span></a>
<a class="" href="https://www.linkedin.com/shareArticle?mini=true&url=https://canxem.com&title=Cầnxem-blog&source=canxem.com" target="_blank" title="Chia sẻ Linkedin"><span class="share-footer-i"><i class="fab fa-linkedin"></i></span></a>
<a class="" href="https://www.pinterest.com/pin/create/link/?url=https://canxem.com&media=https://canxem.com/wp-content/uploads/2021/08/cropped-icon-canxem2-200x200.png&description=Cầnxem-blog" target="_blank" title="Chia sẻ Pinterest"><span class="share-footer-p"><i class="fab fa-pinterest-square"></i></span></a>
</div>Vậy là đủ xài rồi, cần gì plugin cho nặng nề nhỉ :). Chúc mọi người thành công.
