Thêm các nút Chia sẻ lên Mạng xã hội vào website

Xem demo Tải về

URL Encode

Đầu tiên, bạn cần biết về URL Encode để đặt nội dung vào liên kết chia sẻ. Trong PHP, bạn có thể dùng hàm urlencode('Chào các bạn!');, hoặc có thể Encode Online dành cho nội dung tĩnh.

HTML và CSS

Mình sẽ ví dụ thiết kế các nút Chia sẻ như hình này.

HTML

Bạn cần sử dụng Font Awesome, chèn đoạn mã sau vào trước </head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML của các nút Chia sẻ như sau.

<div class="socials-share">
    <a class="bg-facebook" href="" target="_blank"><span class="fa fa-facebook"></span> Share</a>
    <a class="bg-twitter" href="" target="_blank"><span class="fa fa-twitter"></span> Tweet</a>
    <a class="bg-google-plus" href="" target="_blank"><span class="fa fa-google-plus"></span> Plus</a>
    <a class="bg-pinterest" href="" target="_blank"><span class="fa fa-pinterest"></span> Pin</a>
    <a class="bg-email" href="" target="_blank"><span class="fa fa-envelope"></span> Gmail</a>
</div>

Các liên kết trong phần href="" mình sẽ giới thiệu từng phần mục tiếp theo.

CSS

.socials-share {
    text-align: center;
    margin-bottom: 30px;
}

.socials-share a {
    padding: 4px 30px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}

.socials-share span.fa {
    margin-right: 3px;
}

.bg-facebook {
    background: #3a5899;
}

.bg-facebook:hover, .bg-facebook:focus {
    background: #1d418d;
}

.bg-twitter {
    background: #2a99ed;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #268ad5;
}

.bg-google-plus {
    background: #db4437;
}

.bg-google-plus:hover, .bg-google-plus:focus {
    background: #bb2a1d;
}

.bg-pinterest {
    background: #cb1e26;
}

.bg-pinterest:hover, .bg-pinterest:focus {
    background: #ae0e15;
}

.bg-email {
    background: #dd5348;
}

.bg-email:hover, .bg-email:focus {
    background: #ce3f34;
}

Vậy là chúng ta đã hoàn thành phần giao diện.

Liên kết Chia sẻ

Facebook

Facebook khá đơn giản, bạn chỉ cần truyền vào liên kết cần chia sẻ vào sau ?u=.

https://www.facebook.com/sharer/sharer.php?u=https://inithtml.com/

Twitter

Ở Twitter, bạn cần truyền vào 2 biến là text và url, với text là Nội dung và url là Liên kết cần chia sẻ.

https://twitter.com/share?text=&url=

Lưu ý: Bạn chỉ có 140 kí tự cho một Tweet, và phần nội dung tốt nhất nên Encode. Ví dụ:

https://twitter.com/share?text=Init%20HTML%20%E2%80%93%20Kh%E1%BB%9Fi%20%C4%91%E1%BA%A7u%20d%E1%BB%B1%20%C3%A1n%20Web&url=https://inithtml.com/

Một ví dụ khác với PHP.

https://twitter.com/share?text=<?php echo urlencode('Init HTML – Khởi đầu dự án Web'); ?>&url=https://inithtml.com/

Google+

Google+ bạn cũng chỉ cần truyền vào Liên kết cần chia sẻ sau ?url=.

https://plus.google.com/share?url=https://inithtml.com/

Pinterest

Pinterest bạn cần truyền vào 3 biến, là url (liên kết), media (đường dẫn hình ảnh) và description (mô tả).

https://www.pinterest.com/pin/create/button/?url=&media=&description=

Ví dụ:

https://www.pinterest.com/pin/create/button/?url=https://inithtml.com/&media=https://inithtml.com/wp-content/themes/init-html-theme/screenshot.jpg&description=Init%20HTML%20%E2%80%93%20Kh%E1%BB%9Fi%20%C4%91%E1%BA%A7u%20d%E1%BB%B1%20%C3%A1n%20Web

Hoặc dùng thư viện chính chủ của Pinterest để chọn ảnh ngay tại trang:

• Tạo nút Pinterest chính chủ để Pin ảnh ngay tại trang web của bạn

Gmail

Để tạo nút Gửi Email, bạn chỉ cần truyền vào Tiêu đề sau su= và Nội dung cần gửi sau body=.

https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=&body=

Ví dụ:

https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=Init%20HTML%20%E2%80%93%20Kh%E1%BB%9Fi%20%C4%91%E1%BA%A7u%20d%E1%BB%B1%20%C3%A1n%20Web&body=Chia%20s%E1%BA%BB%20ki%E1%BA%BFn%20th%E1%BB%A9c%20thi%E1%BA%BFt%20k%E1%BA%BF%2C%20l%E1%BA%ADp%20tr%C3%ACnh%20web%2C%20server%2C%20d%E1%BB%B1%20%C3%A1n%20web%20t%E1%BB%AB%20b%C6%B0%E1%BB%9Bc%20%C4%91%E1%BA%A7u%20ti%C3%AAn%20HTML%2FCSS%20%C4%91%E1%BA%BFn%20b%C6%B0%E1%BB%9Bc%20cu%E1%BB%91i%20c%C3%B9ng.%20WordPress%20v%C3%A0%20c%C3%A1c%20th%E1%BB%A7%20thu%E1%BA%ADt%20t%E1%BB%91i%20%C6%B0u%2C%20ki%E1%BA%BFm%20ti%E1%BB%81n%20online.%20Xem%20th%C3%AAm%20t%E1%BA%A1i%3A%20https%3A%2F%2Finithtml.com%2F.

Chúc các bạn thành công!