How do I add social sharing buttons to the GeneratePress site?: In this guide, we will talk about adding custom social sharing buttons to the GeneratePress Premium theme without resorting to any plugins. By leveraging a combination of HTML, CSS, and PHP, we’ll create attractive and functional share buttons tailored specifically for the GeneratePress environment.
How do I add social sharing buttons?
Through this post, I will walk you through each step required to integrate a stylish social share button into your GeneratePress theme without the need for a plugin.
By the end of this guide, you’ll have all the knowledge and tools you need to effortlessly incorporate a visually appealing social share button into your website, increasing its interactivity and social connectivity.
HTML & PHP Code
<?php
$deeanatechURL = urlencode(get_the_permalink());
$deeanatechTitle = urlencode(get_the_title());
$deeanatechImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="deeanatech-social-wrapper">
<a class="deeanatech-social-sharing deeanatech-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $deeanatechURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
<a class="deeanatech-social-sharing deeanatech-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $deeanatechTitle;?>&url=<?php echo $deeanatechURL;?>&via=deeanatech" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
<a class="deeanatech-social-sharing deeanatech-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $deeanatechTitle; echo " "; echo $deeanatechURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887
CSS Code
css
Copy code
/*social-sharing-buttons*/
.deeanatech-social-wrapper {
margin: 20px auto;
font-size: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.deeanatech-social-sharing {
padding: 12px;
flex: 1;
}
@media only screen and (max-width: 600px) {
.deeanatech-social-sharing {
display: inline-block;
}
}
.deeanatech-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.deeanatech-social-sharing:first-of-type {
border-radius: 6px 0 0 6px;
}
.deeanatech-social-sharing:last-of-type {
border-radius: 0 6px 6px 0;
}
.deeanatech-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.deeanatech-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.deeanatech-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.deeanatech-social-telegram {
fill: #fff;
background-color: rgb(2, 126, 189);
}
.deeanatech-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}“Dear friend, I hope the information provided on under “Integrating Social Sharing Buttons into Your GeneratePress Site: A Step-by-Step Guide” has been clear and helpful to you. If you have any questions or need further clarification, please don’t hesitate to leave a comment. We’re here to help and ensure you have all the knowledge needed to enhance your website.”
