To Add social share buttons in generatePress theme or WordPress website is a great way to encourage visitors to share your content, increasing visibility and driving more traffic. While many plugins can help you achieve this, they can sometimes slow down your site. If you’re using the GeneratePress theme, you can easily add social share buttons without relying on any plugins. This guide will walk you through the process step-by-step.
📋Table of Contents
❓Why Avoid Plugins for Social Share Buttons?
Using fewer plugins is always a good practice for several reasons:
- Improved Site Speed: Each plugin adds extra code, which can slow down your site.
- Better Security: Fewer plugins mean fewer potential vulnerabilities.
- More Control: Custom code gives you more flexibility in design and functionality.
⚙️Add Floating Social Share Icons Across Your Entire Website
➤Step 1: Create a Hook Element in GeneratePress
- Log in to your WordPress dashboard.
- Navigate to Appearance > Elements.
- Click the Add New button and select Hook.
➤Step 2: Insert the PHP Code
- Give your element a title, such as “Floating Social Share Icons.”
- In the Hook field, select
wp_footerif you want the icons to appear at the ‘entire site‘. - Make sure to check the Execute PHP box.
- Paste the following PHP code into the content area:
⌨ Php Code For Floating Social Share Icons
<?php
$webcreationURL = urlencode(get_the_permalink());
$webcreationTitle = urlencode(get_the_title());
$webcreationImage = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="webcreation-float-social-wrapper hide-on-mobile hide-on-tablet">
<!-- Facebook -->
<a class="webcreation-float-social-sharing webcreation-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webcreationURL; ?>" target="_blank" rel="nofollow" aria-label="Share on Facebook">
<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>
<!-- Twitter -->
<a class="webcreation-float-social-sharing webcreation-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webcreationTitle; ?>&url=<?php echo $webcreationURL; ?>&via=webcreation" target="_blank" rel="nofollow" aria-label="Share on Twitter">
<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>
<!-- Pinterest -->
<a class="webcreation-float-social-sharing webcreation-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webcreationURL; ?>&media=<?php echo $webcreationImage; ?>&description=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow" aria-label="Share on Pinterest">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>
</a>
<!-- LinkedIn -->
<a class="webcreation-float-social-sharing webcreation-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webcreationURL; ?>&title=<?php echo $webcreationTitle; ?>&mini=true" target="_blank" rel="nofollow" aria-label="Share on LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
</a>
<!-- WhatsApp -->
<a class="webcreation-float-social-sharing webcreation-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webcreationTitle; ?> <?php echo $webcreationURL;?>" target="_blank" rel="nofollow" aria-label="Share on WhatsApp">
<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.555-5.338 11.891-11.893 11.891-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.655zm6.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.451 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.646 3.742-.979zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.668.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.134.297-.347.446-.521.151-.173.198-.297.298-.495.099-.198.05-.372-.025-.521-.075-.148-.668-1.611-.916-2.211-.242-.579-.487-.501-.668-.511l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.875 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.693.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.29.173-1.413z"/></svg>
</a>
<!-- Telegram -->
<a class="webcreation-float-social-sharing webcreation-social-telegram" href="https://telegram.me/submit?url=<?php echo $webcreationURL;?>&title=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow" aria-label="Share on Telegram">
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z" fill="white"></path>
</svg>
</a>
</div>➤Step 3: Add Custom CSS for Positioning
- Still within the same element, or in your theme’s custom CSS (Appearance > Customize > Additional CSS), add the following CSS to position the icons as floating and fixed on the entire website:
⌨CSS Code For Floating Social Share Icons (Style – 1)
/* Entire Site Social Share */
.webcreation-float-social-wrapper {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.webcreation-float-social-sharing {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
font-size: 12px;
padding: 14px 10px;
}
.webcreation-float-social-sharing:first-of-type {
border-top-right-radius: 10px;
}
.webcreation-float-social-sharing:last-of-type {
border-bottom-right-radius: 10px;
}
.webcreation-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.webcreation-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.webcreation-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.webcreation-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.webcreation-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.webcreation-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.webcreation-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.webcreation-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.webcreationa-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.webcreation-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.webcreation-social-telegram {
fill: #fff;
background-color: #1ba2f1;
}
.webcreation-social-telegram:hover {
background-color: #2686C6;
}⌨CSS Code For Floating Social Share Icons (Style – 2)
/* Social Wrapper Styles */
.webcreation-float-social-wrapper {
display: flex;
flex-direction: column;
position: fixed;
left: 10px; /* Left-side positioning */
top: 250px; /* Adjust vertical position */
z-index: 9999;
opacity: 0; /* Initially hidden */
animation: fadeIn 1s ease-in-out forwards; /* Fade-in on page load */
width: 40px; /* Narrow width */
background-color: #333; /* Solid color background */
border-radius: 30px; /* Fully rounded edges */
padding: 10px 5px;
border: 2px solid #ffffff; /* Add a contrasting border */
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
}
/* Animation for entry effect */
@keyframes fadeIn {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Styling the social buttons */
.webcreation-float-social-sharing {
display: inline-flex;
margin: 5px 0; /* Reduced spacing between buttons */
padding: 5px; /* Smaller padding for compact size */
border-radius: 20%; /* Rounded edges for buttons */
background-color: #333; /* Default button background */
color: white; /* Icon color */
font-size: 14px; /* Smaller icon size */
transition: all 0.3s ease-in-out; /* Smooth hover effect */
animation: buttonEntry 0.5s ease; /* Button entry animation */
}
/* Animation for button entry effect */
@keyframes buttonEntry {
0% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Adjust hover effect */
.webcreation-float-social-sharing:hover {
transform: scale(1.1) rotate(5deg); /* Slight scaling and rotation on hover */
background-color: #0073e6; /* Change background on hover */
opacity: 0.9; /* Slightly decrease opacity on hover */
}
/* Individual colors for social icons */
.webcreation-social-facebook { background-color: #3b5998; }
.webcreation-social-twitter { background-color: #1da1f2; }
.webcreation-social-pinterest { background-color: #bd081c; }
.webcreation-social-linkedin { background-color: #0077b5; }
.webcreation-social-whatsapp { background-color: #25d366; }
.webcreation-social-telegram { background-color: #0088cc; }⌨CSS Code For Floating Social Share Icons (Style – 3)
/* Social Wrapper Styles */
.webcreation-float-social-wrapper {
display: flex;
flex-direction: column;
position: fixed;
left: 10px; /* Left-side positioning */
top: 250px; /* Adjust vertical position */
z-index: 9999;
opacity: 0; /* Initially hidden */
animation: fadeIn 1s ease-in-out forwards; /* Fade-in on page load */
width: 40px; /* Narrow width */
background-color: #333; /* Solid color background */
border-radius: 30px; /* Fully rounded edges */
padding: 10px 5px;
border: 2px solid transparent; /* Transparent border for glow effect */
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
}
/* Animation for entry effect */
@keyframes fadeIn {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Styling the social buttons */
.webcreation-float-social-sharing {
display: inline-flex;
margin: 5px 0; /* Reduced spacing between buttons */
padding: 5px; /* Smaller padding for compact size */
border-radius: 20%; /* Rounded edges for buttons */
background-color: #333; /* Default button background */
color: white; /* Icon color */
font-size: 14px; /* Smaller icon size */
transition: all 0.3s ease-in-out; /* Smooth hover effect */
animation: buttonEntry 0.5s ease; /* Button entry animation */
}
/* Animation for button entry effect */
@keyframes buttonEntry {
0% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Automatic border color animation */
@keyframes borderColorChange {
0% { border-color: #3b5998; }
25% { border-color: #1da1f2; }
50% { border-color: #bd081c; }
75% { border-color: #0077b5; }
100% { border-color: #25d366; }
}
/* Apply border color animation to social buttons */
.webcreation-float-social-sharing {
animation: buttonEntry 0.5s ease, borderColorChange 5s infinite; /* Button entry and border color animation */
}
/* Adjust hover effect */
.webcreation-float-social-sharing:hover {
transform: scale(1.1) rotate(5deg); /* Slight scaling and rotation on hover */
background-color: #0073e6; /* Change background on hover */
opacity: 0.9; /* Slightly decrease opacity on hover */
}
/* Glowing effect for each social button */
.webcreation-social-facebook:hover {
box-shadow: 0 0 10px 2px #3b5998, 0 0 20px 4px #3b5998;
}
.webcreation-social-twitter:hover {
box-shadow: 0 0 10px 2px #1da1f2, 0 0 20px 4px #1da1f2;
}
.webcreation-social-pinterest:hover {
box-shadow: 0 0 10px 2px #bd081c, 0 0 20px 4px #bd081c;
}
.webcreation-social-linkedin:hover {
box-shadow: 0 0 10px 2px #0077b5, 0 0 20px 4px #0077b5;
}
.webcreation-social-whatsapp:hover {
box-shadow: 0 0 10px 2px #25d366, 0 0 20px 4px #25d366;
}
.webcreation-social-telegram:hover {
box-shadow: 0 0 10px 2px #0088cc, 0 0 20px 4px #0088cc;
}⌨CSS Code For Floating Social Share Icons (Style – 4)
/* Social Wrapper Styles */
.webcreation-float-social-wrapper {
display: flex;
flex-direction: column;
position: fixed;
left: 10px; /* Left-side positioning */
top: 250px; /* Adjust vertical position */
z-index: 9999;
opacity: 0; /* Initially hidden */
animation: fadeIn 1s ease-in-out forwards; /* Fade-in on page load */
width: 40px; /* Narrow width */
background-color: #333; /* Solid color background */
border-radius: 30px; /* Fully rounded edges */
padding: 10px 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
}
/* Animation for entry effect */
@keyframes fadeIn {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Styling the social buttons */
.webcreation-float-social-sharing {
display: inline-flex;
margin: 5px 0; /* Reduced spacing between buttons */
padding: 5px; /* Smaller padding for compact size */
border-radius: 20%; /* Rounded edges for buttons */
background-color: #333; /* Default button background */
color: white; /* Icon color */
font-size: 14px; /* Smaller icon size */
transition: all 0.3s ease-in-out; /* Smooth hover effect */
animation: buttonEntry 0.5s ease, borderColorChange 5s infinite; /* Button entry and border color animation */
}
/* Animation for button entry effect */
@keyframes buttonEntry {
0% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Automatic border color animation for icons */
@keyframes borderColorChange {
0% { border-color: #3b5998; } /* Facebook */
20% { border-color: #1da1f2; } /* Twitter */
40% { border-color: #bd081c; } /* Pinterest */
60% { border-color: #0077b5; } /* LinkedIn */
80% { border-color: #25d366; } /* WhatsApp */
100% { border-color: #0088cc; } /* Telegram */
}
/* Individual styling for each social button with animated border */
.webcreation-float-social-sharing {
border: 2px solid transparent; /* Transparent border for animation */
animation: borderColorChange 5s linear infinite; /* Add the color change animation */
}
/* Adjust hover effect */
.webcreation-float-social-sharing:hover {
transform: scale(1.1) rotate(5deg); /* Slight scaling and rotation on hover */
background-color: #0073e6; /* Change background on hover */
opacity: 0.9; /* Slightly decrease opacity on hover */
}
/* Individual colors for social icons */
.webcreation-social-facebook { background-color: #3b5998; }
.webcreation-social-twitter { background-color: #1da1f2; }
.webcreation-social-pinterest { background-color: #bd081c; }
.webcreation-social-linkedin { background-color: #0077b5; }
.webcreation-social-whatsapp { background-color: #25d366; }
.webcreation-social-telegram { background-color: #0088cc; }
/* Glowing effect for each social button on hover */
.webcreation-social-facebook:hover {
box-shadow: 0 0 10px 2px #3b5998, 0 0 20px 4px #3b5998;
}
.webcreation-social-twitter:hover {
box-shadow: 0 0 10px 2px #1da1f2, 0 0 20px 4px #1da1f2;
}
.webcreation-social-pinterest:hover {
box-shadow: 0 0 10px 2px #bd081c, 0 0 20px 4px #bd081c;
}
.webcreation-social-linkedin:hover {
box-shadow: 0 0 10px 2px #0077b5, 0 0 20px 4px #0077b5;
}
.webcreation-social-whatsapp:hover {
box-shadow: 0 0 10px 2px #25d366, 0 0 20px 4px #25d366;
}
.webcreation-social-telegram:hover {
box-shadow: 0 0 10px 2px #0088cc, 0 0 20px 4px #0088cc;
}⌨CSS Code For Floating Social Share Icons (Style – 5)
/* Social Wrapper Styles */
.webcreation-float-social-wrapper {
display: flex;
flex-direction: column;
position: fixed;
left: 10px; /* Left-side positioning */
top: 250px; /* Adjust vertical position */
z-index: 9999;
opacity: 0; /* Initially hidden */
animation: fadeIn 1s ease-in-out forwards; /* Fade-in on page load */
width: 40px; /* Narrow width */
background-color: #333; /* Solid color background */
border-radius: 30px; /* Fully rounded edges */
padding: 10px 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
}
/* Animation for entry effect */
@keyframes fadeIn {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Styling the social buttons */
.webcreation-float-social-sharing {
display: inline-flex;
margin: 5px 0; /* Reduced spacing between buttons */
padding: 5px; /* Smaller padding for compact size */
border-radius: 20%; /* Rounded edges for buttons */
background-color: #333; /* Default button background */
color: white; /* Icon color */
font-size: 14px; /* Smaller icon size */
transition: all 0.3s ease-in-out; /* Smooth hover effect */
position: relative; /* Position relative for absolute border */
border: 2px solid transparent; /* Transparent border for animation */
animation: buttonEntry 0.5s ease, pulseGlow 3s infinite; /* Slower pulse animation */
}
/* Animation for button entry effect */
@keyframes buttonEntry {
0% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Pulsing glow effect for borders */
@keyframes pulseGlow {
0% {
border-color: transparent;
box-shadow: 0 0 0px transparent; /* Initial state */
}
20% {
border-color: #3b5998; /* Facebook color */
box-shadow: 0 0 10px #3b5998, 0 0 20px #3b5998; /* Glow effect */
}
40% {
border-color: #1da1f2; /* Twitter color */
box-shadow: 0 0 10px #1da1f2, 0 0 20px #1da1f2; /* Glow effect */
}
60% {
border-color: #25d366; /* WhatsApp color */
box-shadow: 0 0 10px #25d366, 0 0 20px #25d366; /* Glow effect */
}
80% {
border-color: #bd081c; /* Pinterest color */
box-shadow: 0 0 10px #bd081c, 0 0 20px #bd081c; /* Glow effect */
}
100% {
border-color: transparent; /* Final state */
box-shadow: 0 0 0px transparent; /* Initial state */
}
}
/* Individual styling for each social button */
.webcreation-social-facebook {
background-color: #3b5998; /* Facebook color */
}
.webcreation-social-twitter {
background-color: #1da1f2; /* Twitter color */
}
.webcreation-social-pinterest {
background-color: #bd081c; /* Pinterest color */
}
.webcreation-social-linkedin {
background-color: #0077b5; /* LinkedIn color */
}
.webcreation-social-whatsapp {
background-color: #25d366; /* WhatsApp color */
}
.webcreation-social-telegram {
background-color: #0088cc; /* Telegram color */
}
/* Add more social media button styles if needed */
.webcreation-social-instagram {
background-color: #e1306c; /* Instagram color */
}
.webcreation-social-youtube {
background-color: #ff0000; /* YouTube color */
}
/* Adjust hover effect */
.webcreation-float-social-sharing:hover {
transform: scale(1.1) rotate(5deg); /* Slight scaling and rotation on hover */
opacity: 0.9; /* Slightly decrease opacity on hover */
}
/* Glowing effect for each social button on hover */
.webcreation-social-facebook:hover {
box-shadow: 0 0 10px 2px #3b5998, 0 0 20px 4px #3b5998;
}
.webcreation-social-twitter:hover {
box-shadow: 0 0 10px 2px #1da1f2, 0 0 20px 4px #1da1f2;
}
.webcreation-social-pinterest:hover {
box-shadow: 0 0 10px 2px #bd081c, 0 0 20px 4px #bd081c;
}
.webcreation-social-linkedin:hover {
box-shadow: 0 0 10px 2px #0077b5, 0 0 20px 4px #0077b5;
}
.webcreation-social-whatsapp:hover {
box-shadow: 0 0 10px 2px #25d366, 0 0 20px 4px #25d366;
}
.webcreation-social-telegram:hover {
box-shadow: 0 0 10px 2px #0088cc, 0 0 20px 4px #0088cc;
}
/* Add hover effects for additional social media buttons if needed */
.webcreation-social-instagram:hover {
box-shadow: 0 0 10px 2px #e1306c, 0 0 20px 4px #e1306c;
}
.webcreation-social-youtube:hover {
box-shadow: 0 0 10px 2px #ff0000, 0 0 20px 4px #ff0000;
}🎯By following these steps, you can add floating social share icons that are fixed across your entire website without relying on any external plugins, keeping your site lightweight and efficient.
⚙️Add Social Sharing Icons After Each Post in WordPress
Social sharing icons are essential for any blog or website, as they allow readers to easily share your content across various platforms, driving more traffic and boosting your online presence. Adding these icons after each post in WordPress is a great way to encourage sharing without disrupting the reading experience. This guide will show you how to add social sharing icons after each post without using a plugin, keeping your site fast and optimized.
❓Why Add Social Sharing Icons After Each Post?
Adding social sharing icons directly after your content provides several benefits:
- Increased Visibility: Readers are more likely to share your content if the buttons are easily accessible.
- Enhanced User Experience: Placing the icons at the end of your post ensures they don’t interfere with the reading flow.
- Better SEO: Encouraging social sharing can lead to more backlinks and social signals, improving your search engine rankings.
➤Step 1: Create a Hook Element in GeneratePress
- Log in to your WordPress dashboard.
- Navigate to Appearance > Elements.
- Click the Add New button and select Hook.
➤Step 2: Configure the Hook Element
- Title the element (e.g., “Post Social Share Icons”).
- In the Hook field, select
generate_after_contentto place the icons after the post content. - Check the Execute PHP option to ensure the PHP code runs properly.
- Insert the given PHP Code.
⌨Php Code For After Post Social Sharing Icons
<?php
$webcreationURL = urlencode(get_the_permalink());
$webcreationTitle = urlencode(get_the_title());
$webcreationImage = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="webcreation-social-wrapper">
<span class="hide-on-mobile">Share this content:</span>
<a class="webcreation-social-sharing webcreation-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webcreationURL; ?>" 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="webcreation-social-sharing webcreation-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webcreationTitle; echo " "; echo $webcreationURL; ?>" 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 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webcreationTitle; ?>&url=<?php echo $webcreationURL; ?>&via=webcreation" 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="webcreation-social-sharing webcreation-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webcreationURL; ?>&media=<?php echo $webcreationImage; ?>&description=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $webcreationURL; ?>&title=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/>
</svg>
</a>
<a class="webcreation-social-sharing webcreation-social-reddit" href="https://www.reddit.com/submit?url=<?php echo $webcreationURL; ?>&title=<?php echo $webcreationTitle; ?>" target="_blank" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>➤Step 3: Add Custom CSS
- Go to Appearance > Customize > Additional CSS.
- Add the following CSS to style your social share icons:
⌨CSS Code For After Post Social Share Icons
/* After Post Social Share */
.webcreation-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.webcreation-social-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
}
.webcreation-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.webcreation-social-sharing {
font-size: 17px;
padding: 6px 17px;
display: inline-block;
}
.webcreation-social-wrapper {
margin: 30px 0px;
font-size: 0;
}
}
.webcreation-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.webcreation-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.webcreation-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.webcreation-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.webcreation-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.webcreation-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.webcreation-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.webcreation-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.webcreation-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.webcreation-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.webcreation-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.webcreation-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.webcreation-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.webcreation-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.webcreation-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}🎯By following these steps, you’ve successfully added social sharing icons after each post using a GeneratePress element, enhancing your site’s social engagement and SEO without relying on plugins.
🎯Conclusion
Integrating social sharing icons into your website, whether floating across the entire site or positioned after each post, is a strategic move to enhance user engagement and drive traffic. Floating social share icons ensure that sharing options are always accessible, making it easier for visitors to share content as they navigate your site. Meanwhile, adding social sharing icons after each post provides a targeted opportunity for readers to share your content once they’ve finished reading, seamlessly integrating sharing options into the content consumption experience.
By implementing these strategies, you not only improve the functionality and user experience of your site but also boost your content’s visibility and reach on social media. This approach keeps your website dynamic and user-friendly, ultimately contributing to increased traffic and enhanced online presence.
You can visit our blog website Tutorial Temple for others interesting topic.
