Mẫu chia sẻ mạng xã hội cực cool bằng jQuery Plugin
Lại một ngày vất vả nữa đã qua và tiếp tục công việc thường ngày là viết những bài chia sẻ về web cho các bạn. Hôm nay mình sẽ mang đến cho các bạn một hiệu ứng khá đẹp dùng cho người dùng tương tác với các mạng xã hội. Trong bài viết này mình có sử dụng file jQuery plugin và file css đính kèm của ...
Lại một ngày vất vả nữa đã qua và tiếp tục công việc thường ngày là viết những bài chia sẻ về web cho các bạn. Hôm nay mình sẽ mang đến cho các bạn một hiệu ứng khá đẹp dùng cho người dùng tương tác với các mạng xã hội. Trong bài viết này mình có sử dụng file jQuery plugin và file css đính kèm của nó, các bạn có thể download những file này trong phần download bên dưới.
Xem Demo | Download
HTML
Đầu tiên, là chèn các file cần thiết vào bên trong thẻ <head>
<link rel="stylesheet" type="text/css" href="social-plugin.css" media="all" /> <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
Và tạo một nút bấm để người dùng click chuột và làm xuất hiện các mạng xã hội phổ biến.
<span class="socialShare"></span>
jQuery
Bây giờ các bạn muốn hiển thị mạng xã hội nào thì chỉ việc khai báo trong đoạn script là xong.
<script src="jquery.min.js"></script>
<script src="social-plugin.js"></script>
<script type="text/javascript">
$(function (){
var url = 'https://www.thuthuatweb.net/javacript/mau-chia-se-mang-xa-hoi-cuc-cool-bang-jquery-plugin.html';
var options = {
twitter: {
text: 'Nút chia sẻ mạng xã hội cực cool nè! ',
via: 'thuthuatweb.net'
},
facebook : true,
googlePlus : true
};
$('.socialShare').shareButtons(url, options);
/*
// You can also share to pinterest and tumblr:
var options = {
// Pinterest requires a image to be "pinned"
pinterest: {
media: 'http://example.com/image.jpg',
description: 'My lovely picture'
},
// Tumblr takes a name and a description
tumblr: {
name: 'jQuery Social Buttons Plugin!',
description: 'There is a new article on thuthuatweb.net page! Check out!'
}
};
*/
});
</script>
Chúc các bạn thực hiện thành công và có thể áp dụng vào trong trang web/blog của mình.
Chuyên Mục: Javascript
Bài viết được đăng bởi webmaster
