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

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

<!-- Facebook Share Button -->
<a class="button_share share facebook" href="#"><i class="fa fa-facebook"></i> Share</a>
<!-- Googple Plus Share Button -->
<a class="button_share share gplus" href="#"><i class="fa fa-google-plus"></i> Share</a>
<!-- Twitter Share Button -->
<a class="button_share share twitter" href="#"><i class="fa fa-twitter"></i> Tweet</a>
<!-- Stumbleupon Share Button -->
<a class="button_share share stumbleupon" href="#"><i class="fa fa-stumbleupon"></i> Stumble</a>
<!-- Pinterest Share Button -->
<a class="button_share share pinterest" href="#"><i class="fa fa-pinterest"></i> Pin it</a>
<!-- LinkedIn Share Button -->
<a class="button_share share linkedin" href="#"><i class="fa fa-linkedin"></i> LinkedIn</a>
<!-- Buffer Share Button -->
<a class="button_share share buffer" href="#"><i class="fa fa-share-square-o"></i> Buffer</a>

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

.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;
}

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

.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;
}

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 đó.

@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

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 theo cách của thịnh thì 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

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ó.

@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

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.

<script type="text/javascript">
 jQuery(document).ready(function($) {
 $('.share').click(function() {
 var NWin = window.open($(this).prop('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
 if (window.focus)
 {
 NWin.focus();
 }
 return false;
 });
});
</script>

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ế.