• Tạo nút chia sẻ mạng xã hộ đẹp không sử dụng iframe

    button-social-share

    Nút chia sẻ mạng xã hội là những nút chức năng nhanh và gọn dùng để người truy cập click chuột vào và hiển thị ra một cửa sổ gồm có thông tin link share, ảnh đại diện và mô tả và những giòng chia sẻ của người dùng. Nó hầu như hiện nay đều có mặt trên tất cả các website bởi tính tiện dụng không chỉ làm đẹp cho website mà nó còn giúp cho các liên kết trên website của bạn được share đến người dùng khác và người dùng sẽ theo link đó vô website.

    Với việc chia sẻ link như vậy giúp cho website của bạn có thêm lượng truy cập đáng kể cũng như giúp website seo tốt hơn. Nhưng tuy nhiên đối với tất cả các website hiện nay thường sử dụng iframe, tức là sử dụng bộ code nhúng của các mạng xã hội mà lập trình viên thêm vào. Chính vì thế nó sẽ gây tốn tài nguyên khi người truy cập website của bạn phải load rất nhiều lần dữ liệu.

    Để giảm thiểu quá nhiều vào việc phụ thuộc vào plugin gây nặng site hơn thì hôm nay Thịnh chia sẻ với các bạn cách làm sao để có được các nút chia sẻ mạng xã hội tuyệt đẹp mà lại tiết kiệm được tài nguyên hệ thống cũng như dung lượng tải trang bằng cách sau đây.

    Lưu ý: Thịnh sử dụng font awesome và vì vậy cần phải khai báo trước đó. Nếu bạn muốn dùng ảnh thì thay thế đoạn mã thẻ html <i></i> thành <img />.

    Tiến hành viết code cho nút chia sẻ mạng xã hội.

    Viết mã html

    Lưu ý là thẻ href=”#” bạn cần phải điền theo phần “Thêm link chia sẻ”.

    Viết css

    Đoạn mã css sâu dùng để định hình các nút chia sẻ mạng xã hội. Nút chia sẻ mạng xã hội đẹp hay không phụ thuộc vào phần css này.

    Đoạn css cho các nút dùng chung css

    Đoạn code css riêng cho từng nút đẻ tạo màu sắc riêng.

    Thêm link chia sẻ

    Bây giờ chúng ta có các nút chia sẻ mạng xã hội đã sẵn sàng, việc làm lúc này là thêm liên kết chia sẻ. Dưới đây danh sách cái link chia sẻ cho các trang web mạng xã hội: Facebook , Google Plus , Twitter , Stumbleupon , Pinterest , LinkedIn và Buffer.

    Bạn copy đoạn mã theo cấu trúc sau vào phần thẻ HTML ở trên thay thế cho dấu “#” nằm trong thẻ href=”#”.

    Facebook

    Link chia sẻ mạng xã hội facebook chỉ đòi hỏi url tức là link tại vị trí của trang web. Ví dụ trang chi tiết của một bài nào đó.

    Google Plus

    Mạng xã hội Google Plus đòi hỏi cũng không khó khăn mà chỉ cần bạn có liên kết tức là url.

    Twitter

    Mạng xã hội Twitter thì đòi hỏi bạn cần có url, tiêu đề hoặc mô tả và lấy được tài khoản username twitter. Thường theo cách của thịnh thì bỏ phần username twitter.

    Stumbleupon

    Mạng xã hội Stumbleupon cũng không quá khó khăn mà chỉ đòi hỏi tiêu đề hoặc mô tả và đường dẫn

    Pinterest

    Mạng xã hội ảnh Pinterest yêu cầu đơn giản đó là liên kết, mô tả và ảnh đại diện.

    LinkedIn

    Mạng xã hội LinkedIn  thì đòi hỏi bạn không quá khó khăn.

    Buffer

    Mạng xã hộ Buffer cũng tương tự như các mạng xã hộ khác đều nhân tự động theo các thông số bạn cần có.

    Tạo cửa sổ Popup chia sẻ mạng xã hội

    Với cửa sổ Popup mở ra thì bạn cần sử dụng đến đoạn mã jquery sau để có thể thêm bổ sung và các tùy chọn trước khi đăng lên mạng xã hội mà bạn muốn chia sẻ link.

    Như vậy là xong hoàn chỉnh

    Kết luận

    Cách làm ở bài này khá là đơn giản và bạn hoàn toàn có thể thực hiện theo cũng như thay đổi theo ý muốn và nó không sử dụng iframe giây tốn dung lượn tải trang của trang web. Ngoài việc cùng font awesome bạn cũng có thể sử dụng thẻ img để gọi đường dẫn hình ảnh thay thế.

    2 comment on “Tạo nút chia sẻ mạng xã hộ đẹp không sử dụng iframe

    1. đức viết:

      cái yourr-url ghi cái gì vào hả bạn ơi?

      1. Thịnh Nguyễn viết:

        Your-url là url là cái link của bài viết đó

    Trả lời

    Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Back To Top