patric-boehner
8/22/2015 - 8:52 PM

Add Social Share Buttons to Posts

Add Social Share Buttons to Posts

//* 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
<?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>';
}

#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: