Tạo nút share mạng xã hội tùy chỉnh

Phát triển web 17/04/2003 07:00 765
Trong bài viết ngắn này mình sẽ hướng dẫn các bạn tạo các nút share các mạng xã hội tùy chình Facebook, Google, Twitte.

Hiện này có khá nhiều dịch vụ miễn phí AddThis, ShareThis, Addtoany  cho phép bạn dễ dàng nhúng thanh công cụ chia sẻ những bài viết của bạn, hay website của bạn nên các trang mạng xã hội như Facebook, Google, Twitter...Nhưng tất cả các plugin này thường sử dụng rất nhiều javascript làm tăng thơi gian tải trang website của bạn. Không những thế có thể chính các plugin này là nguyên nhân gây ra những lỗi sung đột Javascript không hề mong muốn. Vì vậy, nếu bạn muốn thiết kế các nút chia sẻ tùy chỉnh và giảm thời gian tải trang thì tốt hơn là sử dụng các nút chia sẻ trên mạng xã hội với các liên kết tùy chỉnh.

Trong bài viết ngắn này, mình sẽ liệt kê một số liên kết chia sẻ xã hội tùy chỉnh của một số mạng xã hội phổ biến. Bằng cách sử dụng các liên kết này, bạn có thể dễ dàng tạo ra nút chia sẻ xã hội để chia sẻ URL trang web không có JavaScript.

Facebook Custom Share Link:

http://www.facebook.com/sharer.php?u=[EncodedURL]

Google+ Custom Share Link:

https://plus.google.com/share?url=[EncodedURL]

Twitter Custom Share Link:

http://twitter.com/share?text=[TITLE]&url=[URL]

LinkedIn Custom Share Link:

http://www.linkedin.com/shareArticle?mini=true&url=[EncodedURL]

StumbleUpon Custom Share Link:

http://www.stumbleupon.com/badge/?url=[URL]

Pinterest Custom Share Link:

http://pinterest.com/pin/create/button/?url=[EncodedURL]&media=[MEDIA]

Reddit Custom Share Link:

http://www.reddit.com/submit?url=[EncodedURL]

E-Mail Custom Share Link:

mailto:?subject=[SUBJECT]&body=Check out this site [URL]

Delicious Custom Share Link:

http://del.icio.us/post?url=[URL]&title=[TITLE]&notes=[DESCRIPTION]

Digg Custom Share Link:

https://digg.com/submit?url=[URL]&title=[TITLE]

Tumblr Custom Share Link:

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Friendfeed Custom Share Link:

http://www.friendfeed.com/share?url=[URL]&title=[TITLE]

Evernote Custom Share Link:

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

Slashdot Custom Share Link:

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]
Bạn có thể chèn các liên kết mạng xã hội tùy chỉnh tới thuộc tính href của thẻ liên kết <a /> hoặc theo mẫu sau.
<a href="[CustomSocialShareLink]" target="_blank" rel="nofollow">[Social Media Share Text/Image]</a>
Thông thường khi bạn click vào các nút chia sẻ sử dụng Addthid, ShareThis thì nó sẻ mở cho bạn một cửa sổ mới dạng popup. Thì để làm được điều này cũng vô cùng đơn giản bạn có thể sử dụng hàm có sẵn trong Javascript là window.open(url).
<a href="javascript:void(0)" onclick="javascript:window.open('[CustomSocialShareLink]','sharer','toolbar=0,status=0,width=648,height=395')">[Social Media Share Text/Image]</a>
Hoặc bạn có thể xây dựng một hàm Javascript như sau:
<script type="text/javascript">
	function generic_social_share(url){
		window.open(url,'sharer','toolbar=0,status=0,width=648,height=395');
		return true;
	}
</script>
HTML
<a href="javascript:void(0)" onclick="javascript:generic_social_share('[CustomSocialShareLink]')">[Social Media Share Text/Image]</a>

Tổng kết.

Như vậy mình đã hướng dẫn các bạn bạn tự tạo những button chia sẻ nên các mạng xã hội tùy chỉnh theo ý các bạn. Hy vọng bài viết bổ ích với các bạn.

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.