Social Sharing Buttons within Loop for Elementor Custom Skin
This is a post with my code that solves social sharing buttons within a loop using elementor custom skin:
https://wordpress.org/support/topic/social-sharing-buttons-within-loop/
// Function to add social sharing icons
// social links hard coded
function get_the_post_thumbnail_src($img)
{
return (preg_match('~\bsrc="([^"]++)"~', $img, $matches)) ? $matches[1] : '';
}
function sense_social_buttons($atts, $content) {
$a = shortcode_atts( array(
'posttype' => 'NULL',
), $atts );
$size = "30";
$posttype = "post";
if($a['posttype'] != 'NULL'){
$posttype = $a['posttype'];
}
// Get current page URL
$sb_url = urlencode(get_permalink());
// Get current page title
$sb_title = str_replace( ' ', '%20', get_the_title());
$sb_title = str_replace( '|', '-', get_the_title());
// Get Post Thumbnail for pinterest
$sb_thumb = get_the_post_thumbnail_src(get_the_post_thumbnail());
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$sb_title.'&url='.$sb_url.'&via=XXXXXXXXXX';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sb_url;
$bufferURL = 'https://bufferapp.com/add?url='.$sb_url.'&text='.$sb_title;
$whatsappURL = 'whatsapp://send?text='.$sb_title . ' - ' . $sb_url;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$sb_url.'&title='.$sb_title;
if(!empty($sb_thumb)) {
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title;
}
else {
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&description='.$sb_title;
}
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title;
// Add sharing button at the end of page/page content
$content .= '<div class="social-box"><div class="social-btn">';
$content .= '<a class="sbtn" href="'. $twitterURL .'" target="_blank" onclick="window.open(''. $twitterURL .'', 'newwindow','width=800,height=200');return false;" rel="nofollow" alt="share XXXXXXXXXX'.$posttype.'" title="Tweet Sensative '.$posttype.'"><img width="'.$size.'" height="'.$size.'" src="https://XXXXXXXXXX.com/wp-content/uploads/2019/04/social-twitter.svg"></a>';
$content .= '<a class="sbtn" href="'.$facebookURL.'" target="_blank" onclick="window.open(''. $facebookURL .'', 'newwindow','width=560,height=620');return false;" rel="nofollow" alt="share XXXXXXXXXX'.$posttype.'" title="Share Sensative '.$posttype.' on Facebook"><img width="'.$size.'" height="'.$size.'" src="https://XXXXXXXXXX.com/wp-content/uploads/2019/04/social-facebook.svg"></a>';
// $content .= '<a class="sbtn" href="'.$whatsappURL.'" data-action="share/whatsapp/share" target="_blank" rel="nofollow" alt="share sensative '.$posttype.'" title="Share Sensative '.$posttype.' on WhatsApp"><img width="'.$size.'" height="'.$size.'" src="https://XXXXXXXXXX.com/wp-content/uploads/2019/04/social-whatsapp.svg"></a>';
$content .= '<a class="sbtn" href="'.$pinterestURL.'" data-pin-custom="true" onclick="window.open(''. $pinterestURL .'', 'newwindow','width=800,height=70');return false;" target="_blank" rel="nofollow" alt="pin sensative '.$posttype.'" title="Pin XXXXXXXXXX'.$posttype.' on Pinterest"><img width="'.$size.'" height="'.$size.'" src="https://XXXXXXXXXX.com/wp-content/uploads/2019/04/social-pinterest.svg"></a>';
$content .= '<a class="sbtn" href="'.$linkedInURL.'" target="_blank" onclick="window.open(''. $linkedInURL .'', 'newwindow','width=600,height=500');return false;" rel="nofollow" alt="share sensative '.$posttype.'" title="Share XXXXXXXXXX'.$posttype.' on LinkedIn"><img width="'.$size.'" height="'.$size.'" src="https://XXXXXXXXXX.com/wp-content/uploads/2019/04/social-linkedin.svg"></a>';
$content .= '<a class="sbtn" href="'.$bufferURL.'" target="_blank" onclick="window.open(''. $bufferURL .'', 'newwindow','width=750,height=500');return false;" rel="nofollow" alt="share sensative '.$posttype.'" title="Share XXXXXXXXXX'.$posttype.' on Buffer"><img width="'.$size.'" height="'.$size.'" src="https://XXXXXXXXXX.com/wp-content/uploads/2019/04/social-buffer.svg"></a>';
$content .= '</div></div>';
return $content;
};
// Enable the_content if you want to automatically show social buttons below your post.
// add_filter( 'the_content', 'sense_social_buttons');
// This will create a wordpress shortcode [social].
// Place it in any widget and social buttons appear there.
// You will need to enabled shortcode execution in widgets.
add_shortcode('social','sense_social_buttons');
All links hardcoded and masked with XXXXXXXXXX 🙂 I then use the plugin 🙂 https://wordpress.org/plugins/ele-custom-skin/
where you can create custom post skins for using in loops.
I there add my shortcode [social posttype=”buzz”] where buzz is the post type that I created with
I hope this points you in the right direction