Social Media Share Dialog Box

• 12th November 2019
• Tutorials
• 1:39 reading time (ish)
• 316 words

You can use this handy little script to create a row of social media icons and have their icons open a dialog box at a push of a button to allow your readers to easily share your article.

The code supports:

• Twitter
• Facebook
• LinkedIn
• Reddit
• Email

You may need to tweak the visuals a little as this is a direct snippet from this site.

<div class="social_media">
	<a class="facebook shareBtn" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink();?>" title="Share on Facebook">
	<span class="social-icon"><i class="fab fa-facebook-f"></i></span>
</a>
				
	<a class="twitter shareBtn" href="https://twitter.com/share?url=<?php the_permalink();?>&text=<?php the_title();?>&via=davidpottrell" title="Share on Twitter">
	<span class="social-icon"><i class="fab fa-twitter"></i></span>
</a>

	<a class="reddit shareBtn" href="http://www.reddit.com/submit?url=<?php the_permalink();?>" title="Share on Reddit">
	<span class="social-icon"><i class='fab fa-reddit'></i></span>
</a>

	<a class="linkedin shareBtn" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>" title="Share on LinkedIn">
	<span class="social-icon"><i class="fab fa-linkedin"></i></span>
</a>

	<a class="email" href="mailto:?subject=<?php the_title();?>&body=<?php the_permalink();?>" title="Share via Email">
<span class="social-icon"><i class="fas fa-envelope"></i></span>
	</a>
</div>

//Share button popup
jQuery(function(){
	var shareButtons = document.querySelectorAll(".shareBtn");
	if (shareButtons) {
		[].forEach.call(shareButtons, function(button) {
			button.addEventListener("click", function(event) {
				var width = 650,
				height = 450;
				event.preventDefault();
				window.open(this.href, 'Share Dialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width='+width+',height='+height+',top='+(screen.height/2-height/2)+',left='+(screen.width/2-width/2));
			});
		});
	}
});