Skip to content

Instantly share code, notes, and snippets.

@felipeabajo

felipeabajo/wordpress-sharing-buttons

Created February 9, 2024 22:38
Show Gist options
  • Save felipeabajo/33803d856c466b441429d126fcbe6fe0 to your computer and use it in GitHub Desktop.
Save felipeabajo/33803d856c466b441429d126fcbe6fe0 to your computer and use it in GitHub Desktop.
Download ZIP
Sharing buttons for WordPress
Raw
wordpress-sharing-buttons
add_filter( 'the_content', function ( $content ) { if ( is_singular( 'post' ) ) {
/*********************
* choose icons
**********************/
$facebook = 1;
$twitter = 1;
$LinkedIn = 1;
$threads = 1;
$email = 1;
/*************************
* choose locations
*************************/
$bottom = 1; // 0 or 1
$side = ''; // left or right or empty
/************************/
$link = get_the_permalink();
$title = get_the_title();
if ($facebook == 1) {
$facebook_icon = '
<li class="wp-social-link wp-social-link-facebook wp-block-social-link">
<a href="http://www.facebook.com/sharer.php?u='.$link.'" class="wp-block-social-link-anchor">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path>
</svg>
<span class="wp-block-social-link-label screen-reader-text">Facebook</span>
</a>
</li>
';
} else { $facebook_icon = ''; }
if ( $twitter == 1 ) {
$twitter_icon = '
<li class="wp-social-link wp-social-link-x wp-block-social-link">
<a href="https://twitter.com/share?url='.$link.'&text='.$title.'" class="wp-block-social-link-anchor">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z"></path>
</svg>
<span class="wp-block-social-link-label screen-reader-text">X</span>
</a>
</li>
';
} else { $twitter_icon = ''; }
if ( $LinkedIn == 1 ) {
$LinkedIn_icon = '
<li class="wp-social-link wp-social-link-linkedin wp-block-social-link">
<a href="http://www.linkedin.com/sharing/share-offsite/?url='.$link.'" class="wp-block-social-link-anchor">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path>
</svg>
<span class="wp-block-social-link-label screen-reader-text">LinkedIn</span>
</a>
</li>
';
} else { $LinkedIn_icon = '';}
if ( $threads == 1 ) {
if(function_exists("the_post_thumbnail")) { $thumbnail = get_the_post_thumbnail_url(); } else { $thumbnail = ''; }
$threads_icon = '
<li class="wp-social-link wp-social-link-threads wp-block-social-link">
<a href="https://www.threads.net/intent/post?text=It%E2%80%99s%20here!%20Threads%20Share%20Button%20-%20'.$link.'" class="wp-block-social-link-anchor">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M16.3 11.3c-.1 0-.2-.1-.2-.1-.1-2.6-1.5-4-3.9-4-1.4 0-2.6.6-3.3 1.7l1.3.9c.5-.8 1.4-1 2-1 .8 0 1.4.2 1.7.7.3.3.5.8.5 1.3-.7-.1-1.4-.2-2.2-.1-2.2.1-3.7 1.4-3.6 3.2 0 .9.5 1.7 1.3 2.2.7.4 1.5.6 2.4.6 1.2-.1 2.1-.5 2.7-1.3.5-.6.8-1.4.9-2.4.6.3 1 .8 1.2 1.3.4.9.4 2.4-.8 3.6-1.1 1.1-2.3 1.5-4.3 1.5-2.1 0-3.8-.7-4.8-2S5.7 14.3 5.7 12c0-2.3.5-4.1 1.5-5.4 1.1-1.3 2.7-2 4.8-2 2.2 0 3.8.7 4.9 2 .5.7.9 1.5 1.2 2.5l1.5-.4c-.3-1.2-.8-2.2-1.5-3.1-1.3-1.7-3.3-2.6-6-2.6-2.6 0-4.7.9-6 2.6C4.9 7.2 4.3 9.3 4.3 12s.6 4.8 1.9 6.4c1.4 1.7 3.4 2.6 6 2.6 2.3 0 4-.6 5.3-2 1.8-1.8 1.7-4 1.1-5.4-.4-.9-1.2-1.7-2.3-2.3zm-4 3.8c-1 .1-2-.4-2-1.3 0-.7.5-1.5 2.1-1.6h.5c.6 0 1.1.1 1.6.2-.2 2.3-1.3 2.7-2.2 2.7z"></path>
</svg>
<span class="wp-block-social-link-label screen-reader-text">Threads</span>
</a>
</li>
';
} else { $threads = ''; };
if ( $email == 1 ) {
$email_icon = '
<li class="wp-social-link wp-social-link-mail wp-block-social-link">
<a href="mailto:?subject='.$title.'.Blog%20de%20Felipe%20de%20Abajo%20Arag%C3%B3n%0A&body=Hola%0ATe%20comparto%20esta%20entrada%20del%20blog%20de%20Felipe%20de%20Abajo%20Arag%C3%B3n%3A%20'.$link.'.%0A%0ASaludos%0A%0A." class="wp-block-social-link-anchor">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M19,5H5c-1.1,0-2,.9-2,2v10c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2zm.5,12c0,.3-.2.5-.5.5H5c-.3,0-.5-.2-.5-.5V9.8l7.5,5.6,7.5-5.6V17zm0-9.1L12,13.6,4.5,7.9V7c0-.3.2-.5.5-.5h14c.3,0,.5.2.5.5v.9z"></path>
</svg>
<span class="wp-block-social-link-label screen-reader-text">Mail</span>
</a>
</li>
';
} else { $email_icon = '';}
$style = '
<style>
.sharing-options-text{
line-height: 1;
flex-basis: min-content;
}
a.social-link-anchor svg {
color: white;
fill: white;
}
a.social-link-anchor.email svg {
color: #444444;
fill: #444444;
}
a.social-link-anchor.facebook {
background-color: #1778f2;
}
a.social-link-anchor.twitter {
background-color: #1da1f2;
}
a.social-link-anchor.linkedin {
background-color: #0d66c2;
}
a.social-link-anchor.threads {
background-color: #e60122;
}
a.social-link-anchor.email {
background-color: #f0f0f0;
}
a.social-link-anchor {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
a.social-link-anchor:hover {
transform: scale(1.1);
}
a.social-link-anchor {
transition: all 0.15s ease;
}
li.social-link {
list-style: none;
}
ul.end-post-layout {
display: flex;
gap: 15px;
flex-direction: row;
flex-wrap: wrap;
}
ul.left-post-layout {
display: flex;
gap: 10px;
flex-direction: column;
flex-wrap: wrap;
position: fixed;
top: 50%;
left: 10px;
transform: translateY(-50%);
align-content: flex-start;
margin: 0px!important;
background-color: white;
padding: 5px;
}
ul.right-post-layout {
display: flex;
gap: 10px;
flex-direction: column;
flex-wrap: wrap;
position: fixed;
top: 50%;
right: 10px;
transform: translateY(-50%);
align-content: flex-start;
margin: 0px!important;
background-color: white;
padding: 5px;
}
</style>
';
$social_icons = $LinkedIn_icon . $threads_icon . $twitter_icon . $facebook_icon . $email_icon.'</ul>';
if ( $side == 'left' ){
$befor = '<ul class="wp-block-social-links is-style-logos-only is-layout-flex wp-block-social-links-is-layout-flex left-post-layout"><h6 class="sharing-options-text">Opciones para compartir</h6>'.$social_icons;
} else if ( $side == 'right' ) {
$befor = '<ul class="wp-block-social-links is-style-logos-only is-layout-flex wp-block-social-links-is-layout-flex right-post-layout"><h6 class="sharing-options-text">Opciones para compartir</h6>'.$social_icons;
} else { $befor = ''; }
if ( $bottom == 1 ) {
$end = '<ul class="wp-block-social-links is-style-logos-only is-layout-flex wp-block-social-links-is-layout-flex end-post-layout"><h6 class="sharing-options-text">Opciones para compartir</h6>'.$social_icons;
} else { $end = ''; }
return $befor.$content.$end.$style;
} else return $content; });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment