Tin tức

Cách tạo nút chia sẻ (share button) cho trang web

03/06/2013

Ngày nay, thông tin chính là thứ quý giá nhất. Người nắm thông tin trong tay là người giàu có! Có một luật bất thành văn: chia sẻ làm nên sức mạnh! Đặc biệt khi kiến thức, thông tin chia sẻ đó lại thú vị, sáng tạo, độc đáo, khiến người tiếp nhận thích thú.

Muốn có vị thế trên thế giới ảo? Bạn hãy chia sẻ những thứ thật sự ấn tượng!

Có rất nhiều loại nút chia sẻ khác nhau trên internet, chọn được loại phù hợp chính là công việc ta cần làm. Thỉnh thoảng chính ta cũng không biết được mình cần nút chia sẻ nào trên trang web hay blog của mình. Cũng nhiều lúc ta không tìm được thiết kế phù hợp với mong muốn. Lại có lúc ta không tạo được những nút chia sẻ đơn giản mà ấn tượng cho website. Đừng lo lắng, qua bài này tôi sẽ giúp bạn tạo một số loại nút chia sẻ đơn giản.

Nếu bạn là người không thích phải vật lộn với một mớ code lớn, lộn xộn, phức tạp, vậy thì bài viết này đúng là dành cho bạn. Ngay cả người mới biết tới HTML cũng dễ dàng thực hiện theo. Không dài dòng nữa, tôi sẽ bắt đầu đây.


Bước 1

Copy đoạn mã html sau vào website của bạn:

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>

or
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Bước 2

Giờ tạo một file javascript (đuôi .js) chứa nội dung sau:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

Tất cả chỉ có vậy. Một phương thức đơn giản để theo dõi lượt click nút chia sẻ. Vấn đề được giải quyết một cách đơn giản với sự trợ giúp của một bảng trong cơ sở dữ liệu và code ajax đơn giản:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Đoạn script này lấy một ID từ URL, tăng lượt đếm lên một cho một mạng xã hội nào đó. Bạn có thể dễ dàng thay đổi cách thức hiển thị của nút chia sẻ bằng CSS. Bạn có thể tự thiết kế nút bằng photoshop và đem sử dụng. Nhìn chung là bạn có thể làm hầu như mọi thứ!

Tất nhiên, ví dụ này vẫn còn có chút sơ khai, nhưng nó là điểm khởi đầu tốt để bạn học cách tạo nút chia sẻ. Hãy bắt tay vào làm nào!





Web Design