The following files can be used create social sharing links that open in a little centered pop-up window.
<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
);
}