Simple Social Share links for use within Genesis child theme.
<?php
/**
* Add simple social share links
*
* Can be styled as text or icons.
* Assumes the theme has an image folder with an logo.png file
* If you are using text with your links, remove the aria-label attribute.
*
* @package Theme Name
* @author Patrick Boehner <patrick@patrickboehner.com>
* @link https://
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*
*/
//* Block Acess
//**********************
if( !defined( 'ABSPATH' ) ) exit;
//* Get Images
//**********************
/* https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/
* https://designsbynickthegeek.com/tutorials/genesis-explained-image-functions
*/
function pb_find_image_url() {
// If a featured image is set first, use that, orerwsie fallback to first Images
// The genesis_get_image() function does both functions for us.
$first_img = genesis_get_image( array(
'format' => 'url',
'size' => 'large'
) );
// If the post has no images, returen the default image (site logo)
if( empty( $first_img ) ) {
$first_img = esc_url( get_stylesheet_directory_uri() . '/images/logo.png' );
}
// Return the image
return $first_img;
}
//* Social Share Icons
//**********************
add_action( 'genesis_entry_footer', 'pb_social_share_links', 10 );
function pb_social_share_links() {
$url = urlencode( get_permalink() );
$url_short = urlencode( wp_get_shortlink() );
$title = urlencode( get_the_title() );
$title = str_replace( '%26%238217%3B', '%27', $title );
$name = urlencode( get_bloginfo( 'name' ) );
//* Add Twitter handle if it exists
if ( get_the_author_meta( 'twitter' ) ) {
$twitter = '@' . esc_html( get_the_author_meta( 'twitter' ) );
} else {
$twitter = '';
}
echo '<div class="social-links">';
echo '<h3class="screen-reader-text">' .esc_html( 'Share on social media (Opens in new window)' ). '</h3>';
echo '<ul class=social-links-list>';
//* Facebook
echo '<li class="social-item"><a href="http://www.facebook.com/sharer/sharer.php?u=' . $url . '&t=' . $title .'" target="_blank" rel="nofollow noopener noreferrer" class="social-link icon-facebook" aria-label="' .esc_html( "Share on Facebook" ). '">' .esc_html( "Share on Facebook" ). '</a></li>';
//* Twitter
echo '<li class="social-item"><a href="http://www.twitter.com/intent/tweet?url=' . $url_short . '&text=' . $title . '+' .$twitter. '" target="_blank" rel="nofollow noopener noreferrer" class="social-link icon-twitter" aria-label="' .esc_html( "Tweet This Post" ). '">' .esc_html( "Tweet This Post" ). '</a></li>';
//* Pinterest
echo '<li class="social-item"><a href="http://pinterest.com/pin/create/button/?url=' . $url . '&media=' . pb_find_image_url() . ' &description=' . $title . '" target="_blank" rel="nofollow noopener noreferrer" class="social-link icon-pinterest" aria-label="' .esc_html( "Share On Pinterest" ). '">' .esc_html( "Share On Pinterest" ). '</a></li>';
//* Mail
echo '<li class="social-item"><a href="mailto:?subject='.$name.'&body=' .$name. ' blog post: ' .$title. ' – ' .$url. '" target="_blank" rel="nofollow noopener noreferrer" class="social-link icon-envelope" aria-label="' .esc_html( "Email This Post" ). '">' .esc_html( "Email This Post" ). '</a></li> ';
echo '</ul></div><!--End Social Share Links-->';
}
/*
* Simpel Social Share Link Popouts
* Original sample comes from Jared Atchison
* http://www.jaredatchison.com/code/create-manual-social-media-share-buttons/
*
*/
jQuery(document).ready(function($){
$(".share-button").click(function(event){
event.preventDefault();
var window_size = "";
var url = this.href;
var domain = url.split("/")[2];
switch(domain) {
case "www.facebook.com":
window_size = "width=585,height=368";
break;
case "www.twitter.com":
window_size = "width=585,height=261";
break;
case "plus.google.com":
window_size = "width=517,height=511";
break;
case "www.pinterest.com":
window_size = "width=700,height=300";
break;
case "www.reddit.com":
window_size = "width=800,height=400";
break;
default:
window_size = "width=585,height=511";
}
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,' + window_size);
});
});
// Screen reader text
//**********************
/* This style block only needs to be included once.
* Genesis has a number of defined styles of acessability, including screen reader text.
* This just serves as an example.
*/
.screen-reader-text,
.screen-reader-text span
position: absolute !important
clip: rect(0, 0, 0, 0)
height: 1px
width: 1px
border: 0
overflow: hidden
.social-links-list
list-style: none
margin: 0
padding: 0
.social-item
display: inline-block
.social-link
display: block
padding: 0 10px
text-decoration: none