javascript 社交分享链接

Posted 2021-05-04

<div class="article__share-links">

  <h5 class="article__share-title">Share this post:</h5>
  
  {# Facebook #}
  <a class="js-social-share article__share-link article__share-link--facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ post_share_url }}" target="_blank">
    <span class="icon-facebook"></span>
  </a>
  
  {# Twitter #}
  <a class="js-social-share article__share-link article__share-link--twitter" href="https://twitter.com/intent/tweet/?text={{ post_share_title }}&url={{ post_share_url }}" target="_blank">
    <span class="icon-twitter"></span>
  </a>
  
  {# Email #}
  <a class="js-social-share article__share-link article__share-link--email" href="mailto:?subject=I wanted you to see this!&body={{ post_share_title }} - {{ post_share_url }}" target="_blank">
    <span class="icon-envelope"></span>
  </a>
  
</div>

<div class="article__share-links">

  <h5 class="article__share-title">Share this post:</h5>
  
  <!--Facebook-->
  <a class="js-social-share article__share-link article__share-link--facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $post_share_url; ?>" target="_blank">
    <i class="fa fa-facebook-square"></i>
  </a>
  
  <!--Twitter-->
  <a class="js-social-share article__share-link article__share-link--twitter" href="https://twitter.com/intent/tweet/?text=<?php echo $post_share_title ?>&url=<?php echo $post_share_url; ?>" target="_blank">
    <i class="fa fa-twitter-square"></i>
  </a>
  
  <!--Email-->
  <a class="js-social-share article__share-link article__share-link--email" href="mailto:?subject=I wanted you to see this!&body=<?php echo $post_share_title ?> - <?php echo $post_share_url; ?>" target="_blank">
    <span class="icon-envelope"></span>
  </a>
  
</div>

// Retrieve and properly encode the permalink and 
// post title so they don't explode into garbled characters

$post_share_url = urlencode(get_the_permalink()); 
$post_share_title = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');

jQuery(document).ready(function ($) {
  $(".js-social-share").on("click", function(e) {
    e.preventDefault();

    windowPopup($(this).attr("href"), 500, 300);
  });
});

function windowPopup(url, width, height) {
  // Calculate the position of the popup so
  // it’s centered on the screen.
  var left = (screen.width / 2) - (width / 2),
      top = (screen.height / 2) - (height / 2);

  window.open(
    url,
    "",
    "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
  );
}