patric-boehner
9/17/2017 - 4:37 AM

Simple Social Share links for use within Genesis child theme.

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() . '&nbsp;&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. '&nbsp;blog&nbsp;post:&nbsp;' .$title. '&nbsp;&ndash;&nbsp;' .$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