Loading...

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 nó, các bạn có thể download những file này trong phần download bên dưới.

Mẫu chia sẻ mạng xã hội cực cool bằng jQuery Plugin

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.

Nguồn: https://www.thuthuatweb.net/javacript/mau-chia-se-mang-xa-hoi-cuc-cool-bang-jquery-plugin.html

Comments

comments

Loading...