This approach integrates Facebook, X (formerly Twitter), Pinterest, LinkedIn, WhatsApp, and Reddit sharing buttons that appear after your content. It updates the code and process from this guide 🔗.
- Open Astra Customizer:
- Go to your WordPress dashboard.
- Navigate to Appearance > Astra Options.
- Enable Site Builder:
- From the Astra Options page, click on Site Builder.
- If you haven’t activated Astra Site Builder, follow the prompts to enable it.
- Create a New Hook:
- In Site Builder, click the Hooks tab to add custom code to different parts of your site.
- Click Add New Hook to create a new custom hook.
- Add the Code: 💻
- In the Hook Code section, paste your saved code, including the CSS (or paste CSS into Custom > Additional CSS).
- Set Custom Layout Settings:
- Scroll to the Layout Settings section.
- Set Custom Layout to Hooks to allow placement anywhere on the page.
- Choose Action for Hook Placement:
- In the Action dropdown, select After Content to place code after the main content.
- Choose other actions if you prefer a different placement, but After Content works well.
- Save Your Changes: ✅
- Click Save to apply changes.
- Refresh your website to see the buttons live.
Hook Code 📜
<?php
// Get the current post URL, title, and featured image URL
$URL = urlencode(get_the_permalink()); // Current URL
$Title = rawurlencode(html_entity_decode(get_the_title(), ENT_QUOTES, 'UTF-8')); // Title
$Image = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); // Image URL
?>
<div align="center" class="social-wrapper">
<!-- Text for desktop display: 'Share on:' -->
<span class="hide-on-mobile">Share on:</span>
<!-- Facebook Share Button -->
<a class="social-sharing social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $URL; ?>" target="_blank" rel="nofollow">
<!-- Facebook icon SVG -->
<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>
<!-- X (formerly Twitter) Share Button -->
<a class="social-sharing social-x" href="https://x.com/intent/tweet?text=<?php echo $Title; ?>&url=<?php echo $URL; ?>&via=JasonBra1n" target="_blank" rel="nofollow">
<!-- X (formerly Twitter) icon SVG -->
<svg width="18" height="18" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.681L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white" />
</svg>
</a>
<!-- Pinterest Share Button -->
<a class="social-sharing social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $URL; ?>&media=<?php echo $Image; ?>&description=<?php echo $Title; ?>" target="_blank" rel="nofollow">
<!-- Pinterest icon SVG -->
<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-3.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>
<!-- LinkedIn Share Button -->
<a class="social-sharing social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $URL; ?>&title=<?php echo $Title; ?>&mini=true" target="_blank" rel="nofollow">
<!-- LinkedIn icon SVG -->
<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 Share Button -->
<a class="social-sharing social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $Title;
echo " ";
echo $URL; ?>" target="_blank" rel="nofollow">
<!-- WhatsApp icon SVG -->
<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>
<!-- Reddit Share Button -->
<a class="social-sharing social-reddit" href="https://www.reddit.com/submit?url=<?php echo $URL; ?>&title=<?php echo $Title; ?>" 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>
CSS Code 🎨
<style>
/* Wrapper for social media buttons */
.social-wrapper {
margin: 30px 0;
/* Adds margin above and below the wrapper */
font-size: 0;
/* Removes spacing between inline-block elements */
}
/* Style for the text or label before social media buttons */
.social-wrapper span {
font-weight: bold;
/* Makes the label text bold */
padding-right: 10px;
/* Adds space to the right of the label */
font-size: 16px;
/* Sets font size */
}
/* General styles for social sharing buttons */
.social-sharing {
font-size: 17px;
/* Sets font size */
padding: 7px 20px;
/* Adds padding inside the button */
}
/* Mobile responsiveness: when the screen is 600px or smaller */
@media only screen and (max-width: 600px) {
.social-sharing {
font-size: 17px;
/* Keeps font size the same */
padding: 7px 12px;
/* Reduces padding for smaller screens */
display: inline-block;
/* Displays buttons inline */
}
}
/* Hide elements with the "hide-on-mobile" class on small screens */
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none;
/* Hides the element */
}
}
/* Styles for the SVG icons within the social media buttons */
.social-sharing svg {
position: relative;
/* Positions the SVG relative to the button */
top: 0.15em;
/* Adjusts vertical positioning slightly */
display: inline-block;
/* Keeps the SVG inline with the text */
}
/* Rounded corners for the first and last social buttons */
.social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
/* Rounds the left corners */
}
.social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
/* Rounds the right corners */
}
/* Specific background colors for each social media platform */
.social-facebook {
fill: #fff;
/* White icon */
background-color: rgba(59, 89, 152, 1);
/* Facebook blue background */
}
.social-x {
/* Formerly Twitter */
fill: #fff;
/* White icon */
background-color: rgba(0, 0, 0, 1);
/* Black background */
}
.social-pinterest {
fill: #fff;
/* White icon */
background-color: rgba(189, 8, 28, 1);
/* Pinterest red background */
}
.social-linkedin {
fill: #fff;
/* White icon */
background-color: rgba(0, 119, 181, 1);
/* LinkedIn blue background */
}
.social-whatsapp {
fill: #fff;
/* White icon */
background-color: rgba(37, 211, 102, 1);
/* WhatsApp green background */
}
/* WhatsApp button hover effect */
.social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
/* Slightly darker green on hover */
}
.social-reddit {
fill: #fff;
/* White icon */
background-color: rgba(255, 87, 0, 1);
/* Reddit orange background */
}
/* Hover effect for all social sharing buttons */
a.social-sharing:hover {
opacity: 0.8;
/* Slightly reduces the opacity on hover for a visual effect */
}
</style>Final Check: 🔍
Visit your website to ensure the Social Sharing Buttons have been successfully added in the location you specified (after the content). If necessary, you can adjust the positioning by modifying the layout settings or changing the action. ✅
This method adds your Social Sharing Buttons after the content on any page where this hook is enabled. 📄
Bonus 🚀
To add more options, I have created a section for Telegram Messenger 📲
<!-- Telegram Share Button -->
<a class="social-sharing social-telegram"
href="https://t.me/share/url?url=<?php echo $URL; ?>&text=<?php echo $Title;?>"
target="_blank"
rel="nofollow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="678.67139,255.29321,542.99999,450.00001"><g fill="#ffffff" fill-rule="evenodd" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M715.99979,449.01528c145.76015,-63.50538 242.95642,-105.37202 291.5888,-125.59991c138.85532,-57.75473 167.70826,-67.78735 186.51421,-68.11863c4.13619,-0.07286 13.38441,0.95221 19.37502,5.81318c5.05835,4.1045 6.45011,9.6491 7.11611,13.54062c0.666,3.89152 1.49533,12.7565 0.83608,19.68334c-7.52462,79.06182 -40.08352,270.92401 -56.64764,359.4746c-7.0089,37.46907 -20.80965,50.03227 -34.17036,51.26174c-29.03593,2.67193 -51.0845,-19.18897 -79.20723,-37.62377c-44.00651,-28.84682 -68.86738,-46.80406 -111.58332,-74.95322c-49.36565,-32.53123 -17.36396,-50.41097 10.76939,-79.63145c7.36263,-7.64714 135.29562,-124.01208 137.77177,-134.56821c0.30968,-1.32022 0.59708,-6.24137 -2.32649,-8.83992c-2.92357,-2.59855 -7.23851,-1.70995 -10.35229,-1.00323c-4.41369,1.00175 -74.71465,47.46808 -210.90289,139.39899c-19.9547,13.70243 -38.02904,20.37872 -54.22303,20.02886c-17.85258,-0.3857 -52.19377,-10.09412 -77.72292,-18.39264c-31.31254,-10.17847 -56.19912,-15.5599 -54.03206,-32.8461c1.12874,-9.00372 13.5277,-18.2118 37.19687,-27.62424z" id="Path 1"/></g></svg>
</a>/* Telegram button styling */
.social-telegram {
fill: #fff; /* White icon */
background-color: #0088cc; /* Telegram blue background */
}And let's try this with the newer Truth Social 🌐
<!-- Truth Social Share Button -->
<a class="social-sharing social-truth"
href="https://truthsocial.com/share?url=<?php echo $URL; ?>&title=<?php echo $Title; ?>"
target="_blank"
rel="nofollow">
<svg width="18" height="18" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M140.401 45V13.5H53.1006V129.9H90.6006V45H140.401Z" fill="white"/>
<path d="M3 13.5H39V45H3V13.5Z" fill="white"/>
<path d="M104.399 98.3994H140.399V129.899H104.399V98.3994Z" fill="#2FEECC"/>
</svg>
</a>/* Truth Social button styling */
.social-truth {
background-color: #5448EE; /* Truth Social Primary Blue */
fill: white; /* White icon */
color: white;
}
