Facebook

Tuesday, March 1, 2016

Custom javascript functions

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>
<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>
DEMO:


No comments:

Post a Comment