html JS - 社交按钮

Posted 2021-05-11

$('.facebook').each(function() {
    var title = $(this).attr('data-url');
    var fb = 'http://www.facebook.com/sharer.php?u=' + title;
    $(this).attr("href", fb)
});
$('.twitter').each(function() {
    var title = $(this).attr('data-url');
    var tweet = 'https://twitter.com/home?status=' + title;
    $(this).attr("href", tweet)
});
$('.google-plus').each(function() {
    var title = $(this).attr('data-url');
    var gplus = 'https://plus.google.com/share?url=' + title;
    $(this).attr("href", gplus)
});
$('.pinterest').each(function() {
    var title = $(this).attr('data-url');
    var dataImg = $(this).attr('data-src');
    var pin = 'https://pinterest.com/pin/create/button/?url=' + title + '&media=' + dataImg
    $(this).attr("href", pin)
});
$('.linked-in').each(function() {
    var title = $(this).attr('data-url');
    var link = 'https://www.linkedin.com/shareArticle?mini=true&url=' + title
    $(this).attr("href", link)
});

<div class="post-share">
    <a href="#" target="_blank" class="facebook" data-url="<?php echo get_the_permalink();?>">
        <i class="fa fa-facebook"></i>
    </a>
    /
    <a href="#" target="_blank" class="twitter" data-url="<?php echo get_the_permalink();?>">
        <i class="fa fa-twitter"></i>
    </a>
    /
    <a href="#" target="_blank" class="google-plus" data-url="<?php echo get_the_permalink();?>">
        <i class="fa fa-google-plus"></i>
    </a>
    /
    <a href="#" target="_blank" class="linked-in" data-url="<?php echo get_the_permalink();?>">
        <i class="fa fa-linkedin"></i>
    </a>
    /
    <a href="#" target="_blank" class="pinterest" data-url="<?php echo get_the_permalink();?>">
        <i class="fa fa-pinterest"></i>
    </a>
</div>