Custom share buttons with javascript - Facebook, Twitter, Pinterest
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a class="fb-share" href="http://www.facebook.com/sharer/sharer.php?u=http://url/to/your/page"><i class="fa fa-facebook"></i></a>
<a class="tw-share" href="http://twitter.com/intent/tweet?status=custom-title-you-want-to-share+http://url/to/your/page"><i class="fa fa-twitter"></i></a>
<a id="pinterest_share" href="#"><i class="fa fa-pinterest"></i></a>
<div class="hidden" id="pinterest_wrap">
<a href="https://www.pinterest.com/pin/create/button/" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<a class="fb-share" href="http://www.facebook.com/sharer/sharer.php?u=http://url/to/your/page"><i class="fa fa-facebook"></i></a>
<a class="tw-share" href="http://twitter.com/intent/tweet?status=custom-title-you-want-to-share+http://url/to/your/page"><i class="fa fa-twitter"></i></a>
<a id="pinterest_share" href="#"><i class="fa fa-pinterest"></i></a>
<div class="hidden" id="pinterest_wrap">
<a href="https://www.pinterest.com/pin/create/button/" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script>
$(function () {
$('#pinterest_share').click(function(){
$('#pinterest_wrap').find('span').trigger('click');
})
$('.fb-share').click(function (e) {
window.open($(this).attr('href'), 'Share on facebook', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});
$('.tw-share').click(function (e) {
window.open($(this).attr('href'), 'Share on twitter', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});
});
</script>
<style>. hidden{display:none;}</style>
$(function () {
$('#pinterest_share').click(function(){
$('#pinterest_wrap').find('span').trigger('click');
})
$('.fb-share').click(function (e) {
window.open($(this).attr('href'), 'Share on facebook', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});
$('.tw-share').click(function (e) {
window.open($(this).attr('href'), 'Share on twitter', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});
});
</script>
<style>. hidden{display:none;}</style>
No comments:
Post a Comment