Add Social Share Buttons to Posts

ReadMe.md

#Add Social Share Buttons to Posts Without JS

---

This snippit is for manualy creating social share buttons, particulerly for use within the entry footer of the Genesis Framework. The hope was to build a simple, customizable and lightweight social share buttons that would meet my needs without adding a lot of file size or unecessary js/jquery files. For icons I am using FontAwsome via icomoon, see the class markup.

In order to make the Pinterest share button work I need to grab the link to the first image in the post. Their might be a better way to do this but it was the best solution I could find at the time. This is the first function to run and then is passed to the second function via .pb_find_image_url(). If your not using Pinterest you can remove this function.

I set this file up as a seprate php file in my child theme's 'include' folder and call it up in the 'single.php' file

---

Functions

1. Find the first image in the post:
   • function pb_find_image_url()
2. Add Social share icons
   • function pb_social_share()

---

#Refrance:

Notes:

• https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/
• http://www.bitdoz.com/1248/add-custom-social-share-buttons-in-genesis/
• https://www.doitwithwp.com/add-sharing-buttons-to-wordpress-no-plugins-or-external-references/

social-share.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below unless placing in it's own php file.

//* Social Share Links
//**********************************************

add_action( 'genesis_entry_footer', 'pb_social_share', 10 );

//* Grab link to first image in a post to pass onto pinterest share

function pb_find_image_url() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  if($output = preg_match_all('/<img.*?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches))
  {
	  $first_img = $matches[1][0];
  }
  if(empty($first_img)) {
	  $first_img = '';
  }
  return $first_img;
}

//* Social Share Links
//* Adds icon links to share posts with social media sites. This file is called by the single.php file

function pb_social_share() {
	echo '<div class="social-icons">';
	//* Add Facebook share link
	echo '<span><a class="icon-facebook icon" href="http://www.facebook.com/share.php?u='.get_permalink().'&t='.get_the_title().'" target="_blank" title="Share on Facebook"></a></span>';
	//* Add Pinterest share link
	echo '<span><a class="icon-pinterest-p icon" href="http://pinterest.com/pin/create/button/?url='.get_permalink().'&media='.pb_find_image_url().'" target="_blank" title="Pin on Pinterest"></a></span>';
	//* Add Twitter share link
	echo '<span><a class="icon-twitter icon" href="http://twitter.com/share?url='.wp_get_shortlink().'&text='.get_the_title().'" target="_blank" title="Share on Twitter"></a></span>';
	//* Add Mailto share link
	echo '<span><a class="icon-envelope-o icon" href="mailto:?subject='.get_the_title().'&body=View the blog post: '.get_permalink().'" title="Email this Post" target="_blank"></a></span>';
	echo '</div>';
}

style.sass

//* This is a basic styaling to meet my needs, moduify as needed.
// ##Social Icons
/*--------------------------------------------- */

.social-icons
	clear: both
	display: inline-block
	width: 100%
	text-align: center
	padding: 30px 0

	a.icon
		display: inline-block
		padding: 0 10px
		font-size: 1.125em

		&:before
			margin: 0