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