Skip to content

Instantly share code, notes, and snippets.

@yanceyk
Last active January 28, 2022 23:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yanceyk/fda5fe81eb905e16bf926310008707ce to your computer and use it in GitHub Desktop.
Save yanceyk/fda5fe81eb905e16bf926310008707ce to your computer and use it in GitHub Desktop.
Generates social sharing icons and links for single posts and WooCommerce products.
<?php
/**
* Generates social sharing icons and links for posts and products.
*
* For best results, make sure your site already includes OpenGraph support.
* @link https://ogp.me/
*/
function textdomain_social_sharing() {
//Set up the sharing links. We're keeping it basic - Facebook, Twitter, and Pinterest.
$sharing_services = array(
'facebook' => esc_url( 'https://www.facebook.com/sharer/sharer.php' ),
'twitter' => esc_url( 'https://twitter.com/intent/tweet' ),
'pinterest' => esc_url( 'https://www.pinterest.com/pin/create/button/' )
);
//Get the post content to share and set default values.
$post_excerpt = wp_strip_all_tags( get_the_excerpt() );
$share_content = array(
'text' => rawurlencode( esc_html( 'Check out what I found at ' . get_bloginfo( 'name' ) . '.' ) ),
'url' => rawurlencode( get_permalink() ),
'description' => $post_excerpt ? rawurlencode( $post_excerpt ) : rawurlencode( get_the_title() ),
'image-src' => ''
);
// Make sure we're appending to the sharer from single posts and products only, no pages.
// Changing default values where necessary.
if( class_exists( 'WooCommerce' ) && is_product() ) :
/**
* Probably do not need to do this, but WooCommerce template functions uses this same method to grab the main
* product image for single products.
*
* @see woocommerce/templates/single-product/product-image.php
* @see woocommerce/includes/wc-template-functions.php:1552
*/
global $product;
$product_thumbnail_id = $product->get_image_id();
$share_content[ 'image-src' ] = $product_thumbnail_id ? rawurlencode( wp_get_attachment_url( $product_thumbnail_id ) ) : rawurlencode( wc_placeholder_img_src( 'woocommerce_single' ) );
elseif( is_single() ) :
$share_content[ 'image-src' ] = has_post_thumbnail() ? rawurlencode( wp_get_attachment_url( get_post_thumbnail_id() )) : rawurlencode( get_template_directory_uri() . '/path/to/alternate/image.jpg' );
endif;
// Build the markup for the sharing services component. This will hold all buttons.
$share_buttons = '<div class="social-sharing-buttons"><p>Share this:</p>';
// Class arary for social sharing links.
$share_class[] = '';
// Array for query args to append to the url.
$query_args[] = '';
// Build the sharing services link markup to append to the sharing services component.
foreach( $sharing_services as $service_key => $service_url ) :
//Assign CSS classes for each service.
$share_class[$service_key] = $service_key . '-share-btn';
//Initialize query args for each service as empty array.
$query_args[$service_key] = [];
//For each sharing service by key.
switch( $service_key ) :
case 'facebook':
//Assign it's specific query arguments.
$query_args[$service_key] = [
'u' => $share_content['url'],
];
//Append the sharing service button to the markup.
$share_buttons .= '<a href="' . esc_url( add_query_arg( $query_args[$service_key], $service_url ) ) . '" class="' . $share_class[$service_key] . '" aria-label="' . esc_attr__( 'Share to Facebook', 'textdomain' ) . '" rel="nofollow noopener" target="_blank"></a>';
break;
case 'twitter':
$query_args[$service_key] = [
'text' => $share_content['text'],
'url' => $share_content['url'],
];
$share_buttons .= '<a href="' . esc_url( add_query_arg( $query_args[$service_key], $service_url ) ) . '" class="' . $share_class[$service_key] . '" aria-label="' . esc_attr__( 'Share to Twitter', 'textdomain' ) . '" rel="nofollow noopener" target="_blank"></a>';
break;
case 'pinterest':
$query_args[$service_key] = [
'url' => $share_content['url'],
'media' => $share_content['image-src'],
'description' => $share_content['description'],
];
$share_buttons .= '<a href="' . esc_url( add_query_arg( $query_args[$service_key], $service_url ) ) . '" class="' . $share_class[$service_key] . '" aria-label="' . esc_attr__( 'Pin to Pinterest', 'textdomain' ) . '" rel="nofollow noopener" target="_blank"></a>';
break;
endswitch;
endforeach;
//Close the share buttons markup.
$share_buttons .= '</div>';
//Return the share buttons for display.
echo $share_buttons;
}
@yanceyk
Copy link
Author

yanceyk commented Jan 26, 2022

For best results, make sure your site includes OpenGraph support.
Call the function in your single posts template and WooCommerce share.php file using add_action( 'woocommerce_share', 'textdomain_social_sharing' );

@yanceyk
Copy link
Author

yanceyk commented Jan 26, 2022

Style your sharing links using the ::before CSS pseudo element, as in .facebook-share-btn::before { content: "<icon font unicode>"; }. Or you can add the icon font markup to the individual share link markup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment