Chào tất cả các bạn 😀 😀 sau khi update giao diện mới cho blog thì mình lại tiếp tục viết bài đây. Như các bạn cũng biết hiện nay đối với bất kỳ một trang web đa số đều cần phải có nút share social button. Vậy chúng ta tạo chúng như thế nào? Thì với bài viết này mình sẽ hướng dẫn chi tiết. Các bạn có thể áp dụng cho bất kỳ loại web nào kể cả WordPress.
Tạo bằng plugin trên WordPress
Cách này sẽ dễ dàng cho các bạn không biết code và đang xài web trên nền tảng WordPress. Tuy nhiên mình khuyến cáo là không nên dùng, vì nó có thể một phần ảnh hưởng. Đến tốc độ load trang web của các bạn. Do plugin có thể add thêm file css hoặc js trên trang web của bạn. Thì mình sẽ recommend một số plugin có thể xài được.
Mình đã liệt kê 5 plugin vừa có trả phí, vừa free. Để các bạn thảm khảo. Theo trải nghiệm của mình thì các plugin kia xài dễ dàng rất ổn. Và dễ dàng trong việc sử dụng và tuy biến.
Tạo bằng HTML và CSS
Chắc chắn rằng sẽ có một số bạn không biết cấu trúc link share social của một số loại mạng xã hội nên mình sẽ chỉ cách dễ dáng nhất. Các bạn vào link sau để tùy biến vào tạo doạn code html mẫu. Các bạn vào trang web https://simplesharingbuttons.com/ để tạo mã code html và css.
Tại đây các bạn chọn loại button các bạn thích sau đó các bạn scroll xuống để chọn các mạng xã hội cần hiển thị.
Tiếp theo các bạn điền info trang web của các bạn
Sau đó là phần live review và cuối là phần code để các bạn lấy sử dụng
Sau đó các bạn copy phần css vào file chứa css của website. Còn lại HTML các bạn đưa vào vị trị cần show. Tuy nhiên tới đây thì chưa xong đâu. Các bạn phải tùy biến lại tí nữa Như truyền các biến vào title, description, thêm social image nữa. Tuy nhiên mình sẽ đưa đoạn code mẫu trên bài viết chi tiết hoặc ở page bất kỳ trên nền wordpress nhé.
<ul class="wolfactive--share--buttons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u="e=" title="<?php the_title() ?>" target="_blank"><img alt="Share on Facebook" src="images/flat_web_icon_set/color/Facebook.png" /></a></li>
</ul>Vậy là xong rồi á.
Tạo bằng npm package
Nếu các bạn đang dev web trền nền JavaScript ES6 trở lên hoặc các framework có sử dụng node làm môi trường develop như React, Angular, Vue,… Thì cách này sẽ rất thích hợp và dễ dàng cho các bạn. Mình thì hay làm trên nền ES6 trở lên nền mình hay xài npm package này để làm share button, vì nó dễ sữ dụng cũng như là nhẹ. Các bạn tải package shareon bằng cách bật terminal tại folder project và gõ lệnh sau:
npm i shareonDo các bạn cần sử dụng và show ra ngoài frontend nên các bạn không cần –save-dev phía sau. Sau khi đã cài xong các bạn import vào file js như sau:
import 'shareon';Hoặc các bạn có thể báo như sau:
require('shareon');Sau đó các bạn copy đoạn code sau vào nơi cần show các social button
<div class="wolfactive--social--share">
<div class="shareon wolfactive--d--flex wolfactive">
<a class="facebook wolfactive--d--block mxr-5"><i class="fab fa-facebook"></i></a>
<a class="pinterest wolfactive--d--block mxr-5"><i class="fab fa-pinterest"></i></a>
<a class="telegram wolfactive--d--block mxr-5"><i style="font-size: 31px;line-height: 22px;"class="fab fa-telegram"></i></a>
<a class="twitter wolfactive--d--block mxr-5"><i class="fab fa-twitter"></i></a>
</div>
</div>Và đầy là thành quả 😀 😀
Tổng kết
Mình đã tổng hợp 3 cách để tạo social share button. Các bạn có thể tùy biến dựa vào từng tình huống để sử dụng. Có khó khăn gì các bạn comment bên dưới hoặc liên hệ trực tiếp qua fanpage của tụi mình để được hỗ trợ.
https://www.facebook.com/Wolfactiveweb.design.SEO/
À quên 😀 😀 Mình sẽ thêm comment sau :))) các bạn tạm thời liên hệ qua fanpage nhé!!! Cảm ơn các bạn đã theo dõi