Tạo button chia sẻ đường dẫn, nội dung lên mạng xã hội.

Trần Anh Tú

• 6 min read
Tạo button chia sẻ đường dẫn, nội dung lên mạng xã hội.

Xin chào mọi người hôm nay mình viết blog này để chia sẻ để những người cần đến nó có thể tham khảo, chúng ta cùng bắt đầu nhé :)).

Giới thiệu:

  • Nút chia là những nút có chức năng nhanh và gọn dùng để người dùng truy cập vào web site có thể chia sẻ đường dẫn hoặc đoạn văn bản lên các trang mạng xã hội.
  • Với việc chia sẻ như thế giúp cho website của các bạn có thêm nhiều lượng truy cập vào website của bạn khi người dùng nhấn vào link chia sẻ cũng như giúp website của bạn seo tốt hơn đặc biệt là các web ecommerce.

2. Hướng dẫn.

  • Chúng ta cùng demo 1 web đơn giản gồm các button có chức năng chia sẻ lên các trang mạng xã hội.
  • Đầu tiên chúng ta tạo 1 file html.
Share
  • Ở trong file html chúng ta thêm cho mình thư viện jquery, và sử dụng fontawsome icon để giúp button của các bạn trông đẹp hơn.

  • Tiếp theo là file css để chỉnh ui cho các button có màu sắc.

.button_share {
display: block;
float: left;
padding: 10px 15px;
border:none;
background-color: #ececec;
text-decoration: none;
font-size: 18px;
color: #FFF;
}

.button_share:hover {
color: #efefef;
}

.facebook {
background-color: #3b5998;
}

.gplus {
background-color: #dd4b39;
}

.twitter {
background-color: #55acee;
}

.stumbleupon {
background-color: #eb4924;
}

.pinterest {
background-color: #cc2127;
}

.linkedin {
background-color: #0077b5;
}

.buffer {
background-color: #323b43;
}

.bg-email {
background: #dd5348;
}

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

.print {
background-color: grey;
}

  • Sau khi tạo xong 2 file trên chúng ta sẽ được những button như thế này.

Facebook:

  • Đầu tiên nói về facebook, có lẽ sau khi demo mình thấy cái này khó sử dụng nhất trong các button trên bởi facebook khi bạn sử dụng website trên điện thoại bạn chia sẻ link nó không hỗ trợ bạn truy cập app facebook bạn đã tải trên máy điện thoại của bạn nên bạn phải chỉnh sửa nó 1 chút.
  • 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 đó.
  • @your-url : Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • http://www.facebook.com/sharer/sharer.php?u=your-url&quote=text (link chia sẻ trên tab mới của website).
  • fb://share?u=your-url&quote=text (link chia sẻ trên facebook app).

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.
  • @YOUR-URL - Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • https://plus.google.com/share?url=YOUR-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 bỏ phần username twitter.
  • @YOUR-URL - Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • @YOUR-TEXT - Tiêu đề hoặc mô tả của site hoặc bài viết của site.
  • @TWITTER-HANDLER - Twitter Username.
  • https://twitter.com/intent/tweet?text=YOUR-TEXT&url=YOUR-URL&via=TWITTER-HANDLER.

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.
  • @YOUR-URL - Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • @YOUR-TITLE - Tiêu đề hoặc mô tả.
  • http://www.stumbleupon.com/submit?url=YOUR-URL&title=YOUR-TITLE.

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.
  • @YOUR-URL - Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • @YOUR-DESCRIPTION - Mô tả.
  • @YOUR-IMAGE-SOURCE - Đường dẫn liên kết hình ảnh ( Features image ).
  • http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC.

LinkedIn:

  • Mạng xã hội LinkedIn  thì đòi hỏi bạn không quá khó khăn.
  • @YOUR-URL - Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • @YOUR-TITLE - Tiêu đề hoặc mô tả.
  • http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&source=YOUR-URL.

Buffer:

  • @YOUR-URL - Địa chỉ của các trang web mà bạn muốn chia sẻ.
  • @YOUR-TEXT - Tiêu đề hoặc mô tả.
  • https://buffer.com/add?text=YOUR-TEXT&url=YOUR-URL.

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=

Print:

  • In trang web đang truy cập mình chỉnh cần sử dụng: window.print().

Đây là đoạn code mình đã demo:

let link = 'https://stackoverflow.com/questions/62071327/share-content-of-a-webpage-to-instagram-story';
let text = 'text demo share link social network';
let title = 'tiêu đề demo';
$(".share").click(function() {
varShareUrl = $(this).attr('id');
if (varShareUrl == 'facebook') {
var url = https://www.facebook.com/share.php?quote=${text}&u=${link};
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (userAgent.indexOf("FBAN") > -1 || userAgent.indexOf("FBAV") > -1) {
window.location.href = 'fb://share?u=' + encodeURIComponent(link);
} else {
window.open(url, '_blank');
}
} else {
window.open(url, '_blank');
}
}
if (varShareUrl == 'gplus') {
// https://plus.google.com/share?url=YOUR-URL
var url = https://plus.google.com/share?url=${link};
window.open(url, '_blank');
}
if (varShareUrl == 'twitter') {
// https://twitter.com/intent/tweet?text=YOUR-TEXT&url=YOUR-URL&via=TWITTER-HANDLER
var url = https://twitter.com/intent/tweet?text=${text}&url=${link};
window.open(url, '_blank');
}
if (varShareUrl == 'stumbleupon') {
// http://www.stumbleupon.com/submit?url=YOUR-URL&title=YOUR-TITLE
var url = http://www.stumbleupon.com/submit?url=${link}&title=${text};
window.open(url, '_blank');
}
if (varShareUrl == 'pinterest') {
// http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC
var url = http://pinterest.com/pin/create/button/?url=${link}&description=${text};
window.open(url, '_blank');
}
if (varShareUrl == 'linkedin') {
// http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&source=YOUR-URL
var url = http://www.linkedin.com/shareArticle?mini=true&url=${link}&title=${text}&source=${link};
window.open(url, '_blank');
}
if (varShareUrl == 'buffer') {
// https://buffer.com/add?text=YOUR-TEXT&url=YOUR-URL
var url = https://buffer.com/add?text=${text}&url=${link};
window.open(url, '_blank');
}
if (varShareUrl == 'gmail') {
// https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=&body=
var url = https://mail.google.com/mail/u/0/?view=cm&fs=1&to&su=${title}&body=${text};
window.open(url, '_blank');
}
if (varShareUrl == 'print') {
window.print();
}
});

3. Kết thúc:

  • Bài viết của mình đến đây là hết, xin cảm ơn các bạn đã đọc bài viết của mình.Hẹn gặp lại các bạn ở bài viết tiếp theo.