Astra users who want to have slick looking sticky share buttons that will improve your page speed look no further. Here is a short tutorial with the code for making your own responsive social share buttons. If you are a pro at Astra Custom Layouts (Hooks) then you can skip straight to the code. For those who are on your path to mastery of Astra Pro follow the short turtorial.
- Add Astra Pro Custom Layouts
- Open Custom Layouts under Appearance
- Add New in Custom Layouts
- Name Your Custom Layout and Click “<> Enable Code Editor”
- Copy and Paste this Code into the editor
- Set the Layout, Action, and Display
- Then Publish and Done
Optimized With Inline SVG
This code is also optimized with inline Scalable Vector Graphics (SVG) for the icons. There are no additional calls to an icon or font file. This provides additional site speed gain over most plugins which have a call to get at least one additional file to load the icons. Many times the plugin will use a font that has to be loaded separately from some other server if render blocking this will extremely slow down your site. If you are concerned that these SVGs will not be compatible with all the browsers that are being used. You should check out CanIUse.com which shows that >94.5% of all browsers being used support SVG.
PHP Creates and Links and Graphics and Serves It Up As HTML
You will get additional performance gain with Astra and these sticky share buttons since they will be generated with the page. The PHP code will generate the URLs to be shared and the Icons will be straight html. Unlike images or icon files that are stored as separate files, there are no additional server calls to get the ULRs or the images. All of the images and links and styles will add less than 12Kb to the entire page will be loaded with the HTML of the page.
Using Astra “Custom Layouts” i.e Hooks
You must have Astra Pro “Custom Layouts” to use these sticky buttons with this method. Astra has released a free plugin called Astra Hooks, this doesn’t have the capability to insert PHP code like Astra Pro “Custom Layouts”. Below is the tutorial with code on how to implement these Sticky Social Share Icons. In a future post, I may go over how to implement these Sticky Social Share Icons using the function.php file and anyone using a WordPress theme can do that, if I do I will put a link here. For now here is how to do this with Astra Pro “Custom Layouts” and Hooks to put them right where you want them.
Astra Users Who Want Social Share Icons at the Bottom Of Each Post Check This Out.
Fast Social Media Share Buttons That Look Great-Astra Custom Hook-No JS
Adding with Custom Layouts Tutorial
1. Add Astra Pro Custom Layouts
Here is a video on how to Activate Custom Layouts in Astra if you haven’t already.
Now that Custom Layouts is Active we can continue.
2. Hover Over Appearance Then Click on Custom Layouts
3. Click Add New in Custom Layouts
4. Name Your Custom Layout and Click “<> Enable Code Editor”
It is very important to Enable the code editor or you word press site will display all the PHP, HTML and CSS code as text. Unfortunately even though this code is pretty, the results are what you want posted all over your site.
5. Copy and Paste the Code in the Code Block at the bottom of this Page
Here is a link to the code. <Link>
6. Set the Layout, Action, and Display on
Make Layout > “Hooks”.
Set Action > “footer_after”. This will load the Sticky Icons with the footer content. If you want to know where the other actions will put your content look here.
Set Display On > Entire Website. If you don’t want to have these Sticky Social Share Icons on every page you can click Add Display Rule or Add Exclusion Rule.
7. Now Don’t Forget to Publish
If you are hesitant look at the bottom of this post and you will see the Social Icons you will soon have on all your posts. Or you can click “Save Draft” and Preview as well.
Your Sticky Social Share Icon Code
<?php
// Get current page URL
$PageURL = urlencode(get_permalink());
// Get current page titleShareString
$PageTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
// Construct sharing URL without using any script
$emailURL = 'mailto:?subject=I wanted you to see '.$PageTitle.'&body=You Can Check out the article here : '.$PageURL;
$twitterURL = 'https://twitter.com/intent/tweet?text='.$PageTitle.'&url='.$PageURL.'&via=share';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$PageURL;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$PageURL.'&title='.$PageTitle;
$tumblrURL = 'http://www.tumblr.com/share/link?url='.$PageURL;
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$PageURL.'&description='.$PageTitle;
$bufferURL = 'https://bufferapp.com/add?url='.$PageURL.'&text='.$PageTitle;
$whatsappURL = 'https://wa.me/?text='.$PageTitle . ' ' . $PageURL;
// Add sharing button at the end of page/page ShareString
echo '<!-- Superfast Social Sharing Buttons No JavaScript. No Plugin Required.-->';
echo '<center class="sticky-social-share-buttons">';
echo '<a class=share-EMST id=EMShareIconST href="'.$emailURL.'" target="_blank"><svg width="50" height="50" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path id="path" d="M21.5 178.391 L233.5 178.391 233.5 78.391 21.5 78.391 Z" fill="none" stroke="#000000" stroke-width="6" stroke-opacity="1" stroke-linejoin="round"/><path id="path-1" d="M128 145 L26 80" fill="none" stroke="#000000" stroke-width="4" stroke-opacity="1" stroke-linejoin="round"/><path id="path-2" d="M128 145 L230 80.001" fill="none" stroke="#000000" stroke-width="4" stroke-opacity="1" stroke-linejoin="round"/><defs><text id="string" transform="matrix(1.0 0.0 0.0 1.0 29.5 4.0)"><tspan x="1.935546875" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">S</tspan><tspan x="49.958984375" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">h</tspan><tspan x="90.001953125" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">a</tspan><tspan x="130.044921875" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">r</tspan><tspan x="154.021484375" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">e</tspan></text></defs><use id="share" xlink:href="#string"/><defs><text id="string-1" transform="matrix(1.0 0.0 0.0 1.0 57.5 188.0)"><tspan x="1.990234375" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">T</tspan><tspan x="45.970703125" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">h</tspan><tspan x="86.013671875" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">i</tspan><tspan x="102.009765625" y="55.0" font-family="Helvetica, Helvetica" font-size="72" text-decoration="none" fill="#000000">s</tspan></text></defs><use id="this" xlink:href="#string-1"/></svg></a>';
echo '<span class=shareST-Space id=EMhide></span>';
echo '<a class=share-IconST id=FBShareIconST href="'.$facebookURL.'" target="_blank"><svg height="30" viewBox="0 0 256 256" width="30" xmlns="http://www.w3.org/2000/svg"><path d="m100.667 255.682v-116.62h-39.167v-45.647h39.167v-33.573c0-38.95 23.79-60.16 58.535-60.16 16.639 0 30.946 1.243 35.116 1.767v40.723h-24.037c-18.848 0-22.494 8.977-22.494 22.158v29.085h45.2l-5.89 45.647h-39.31v116.62z" fill="#fff"/></svg></a>';
echo '<span class=shareST-Space id=FBhide></span>';
echo '<a class=share-IconST id=TWShareIconST href="'.$twitterURL.'" target="_blank"><svg height="30" viewBox="0 0 256 256" width="30" xmlns="http://www.w3.org/2000/svg"><path d="m255.996 56.537c-9.419 4.177-19.541 7.001-30.165 8.27 10.843-6.5 19.172-16.792 23.093-29.057-10.149 6.019-21.389 10.39-33.352 12.745-9.58-10.208-23.231-16.585-38.337-16.585-29.005 0-52.521 23.514-52.521 52.519 0 4.117.464 8.125 1.359 11.97-43.649-2.191-82.35-23.1-108.254-54.877-4.521 7.757-7.111 16.779-7.111 26.405 0 18.222 9.272 34.298 23.365 43.716-8.61-.273-16.708-2.635-23.789-6.569-.005.219-.005.439-.005.66 0 25.447 18.105 46.674 42.131 51.5-4.407 1.2-9.047 1.843-13.837 1.843-3.385 0-6.675-.33-9.882-.943 6.684 20.865 26.08 36.051 49.063 36.474-17.975 14.087-40.622 22.483-65.229 22.483-4.24 0-8.42-.248-12.529-.735 23.243 14.903 50.85 23.599 80.51 23.599 96.605 0 149.434-80.031 149.434-149.436 0-2.277-.052-4.542-.153-6.795 10.264-7.405 19.168-16.655 26.209-27.187z" fill="#fff"/></svg></a>';
echo '<span class=shareST-Space id=TWhide></span>';
echo '<a class=share-IconST id=TBShareIconST href="'.$tumblrURL.'" target="_blank"><svg height="30" viewBox="0 0 256 256" width="30" xmlns="http://www.w3.org/2000/svg"><path d="m143.153 111.006-.001 58.547c0 14.854-.192 23.414 1.383 27.625 1.562 4.189 5.479 8.537 9.747 11.051 5.671 3.397 12.136 5.094 19.428 5.094 12.963 0 20.619-1.712 33.435-10.135v38.486c-10.925 5.138-20.466 8.149-29.331 10.231-8.875 2.06-18.465 3.101-28.766 3.101-11.707 0-18.614-1.471-27.603-4.414-8.99-2.967-16.665-7.201-23.005-12.635-6.363-5.481-10.756-11.302-13.212-17.458-2.457-6.159-3.679-15.104-3.679-26.811v-89.776h-34.357v-36.252c10.052-3.261 21.291-7.947 28.445-14.038 7.189-6.113 12.942-13.427 17.277-21.987 4.348-8.536 7.337-19.428 8.968-32.629h41.271v64h63.992v48z" fill="#fff"/></svg></a>';
echo '<span class=shareST-Space id=TBhide></span>';
echo '<a class=share-IconST id=LNShareIconST href="'.$linkedInURL.'" target="_blank"><svg height="30" viewBox="0 0 256 256" width="30" xmlns="http://www.w3.org/2000/svg"><path d="m91.428 82.143h50.602v25.938h.724c7.04-12.627 24.273-25.938 49.954-25.938 53.414 0 63.292 33.25 63.292 76.495v88.076h-52.746v-78.079c0-18.624-.381-42.579-27.436-42.579-27.471 0-31.663 20.282-31.663 41.226v79.432h-52.727zm-91.428 0h54.857v164.571h-54.857zm54.857-45.714c0 15.148-12.28 27.428-27.429 27.428-15.148 0-27.428-12.28-27.428-27.428 0-15.149 12.28-27.429 27.428-27.429 15.149 0 27.429 12.28 27.429 27.429z" fill="#fff"/></svg></a>';
echo '<span class=shareST-Space id=LNhide></span>';
echo '<a class=share-IconST id=PNShareIconST href="'.$pinterestURL.'" target="_blank"><svg height="30" viewBox="0 0 256 256" width="30" xmlns="http://www.w3.org/2000/svg"><path d="m110.013 169.307c-6.728 35.251-14.926 69.042-39.241 86.693-7.495-53.272 11.012-93.271 19.62-135.741-14.67-24.703 1.765-74.392 32.68-62.142 38.051 15.052-32.948 91.799 14.709 101.399 49.767 9.996 70.078-86.398 39.215-117.745-44.575-45.285-129.771-1.062-119.283 63.768 2.545 15.846 18.904 20.646 6.536 42.521-28.535-6.323-37.054-28.851-35.954-58.879 1.765-49.151 44.114-83.544 86.604-88.318 53.732-6.029 104.164 19.75 111.135 70.322 7.841 57.099-24.251 118.948-81.718 114.493-15.578-1.216-22.101-8.947-34.303-16.371z" fill="#fff"/></svg></a>';
echo '<span class=shareST-Space id=PNhide></span>';
echo '<a class=share-IconST id=WAShareIconST href="'.$whatsappURL.'" target="_blank"><svg height="30" viewBox="0 0 256 256" width="30" xmlns="http://www.w3.org/2000/svg"><path d="m256 124.372c0 68.872-56.26 124.703-125.673 124.703-22.036 0-42.738-5.632-60.749-15.517l-69.578 22.11 22.684-66.907c-11.443-18.79-18.033-40.829-18.033-64.39 0-68.872 56.266-124.703 125.676-124.703 69.418 0 125.673 55.831 125.673 124.703zm-125.673-104.844c-58.266 0-105.66 47.033-105.66 104.844 0 22.94 7.478 44.185 20.127 61.468l-13.201 38.938 40.605-12.905c16.682 10.954 36.667 17.342 58.132 17.342 58.257 0 105.66-47.027 105.66-104.838 0-57.81-47.4-104.849-105.663-104.849zm63.462 133.564c-.776-1.271-2.827-2.039-5.905-3.567-3.083-1.527-18.233-8.926-21.049-9.941-2.824-1.018-4.884-1.53-6.935 1.527-2.05 3.061-7.956 9.942-9.756 11.981-1.798 2.045-3.593 2.301-6.676.771-3.078-1.528-13.002-4.759-24.77-15.17-9.156-8.101-15.34-18.102-17.137-21.165-1.795-3.058-.188-4.711 1.351-6.232 1.388-1.371 3.083-3.57 4.622-5.354 1.544-1.786 2.056-3.057 3.078-5.1 1.032-2.039.517-3.823-.256-5.356-.768-1.527-6.935-16.569-9.501-22.69-2.566-6.115-5.128-5.097-6.929-5.097-1.795 0-3.851-.256-5.905-.256-2.053 0-5.393.765-8.217 3.823-2.822 3.06-10.778 10.456-10.778 25.495 0 15.041 11.034 29.573 12.578 31.61 1.539 2.036 21.305 33.906 52.623 46.145 31.32 12.234 31.32 8.153 36.969 7.641 5.643-.51 18.221-7.393 20.798-14.527 2.56-7.145 2.56-13.264 1.795-14.538z" fill="#fff"/></svg></a>';
echo '<span class=shareST-Space id=WAhide></span>';
echo '<a class=share-IconST id=BFShareIconST href="'.$bufferURL.'" target="_blank"><svg width="30" height="30" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path id="path" d="M232.22 188.683 L208.127 176.691 C206.057 175.658 202.676 175.658 200.607 176.691 L131.613 211.031 C129.553 212.064 126.163 212.064 124.102 211.031 L55.109 176.691 C53.039 175.658 49.659 175.658 47.589 176.691 L23.497 188.683 C21.428 189.716 21.428 191.395 23.497 192.419 L124.102 242.497 C126.163 243.53 129.553 243.53 131.613 242.497 L232.22 192.419 C234.289 191.395 234.289 189.716 232.22 188.683" fill="#192534" fill-opacity="1" stroke="none"/><path id="path-1" d="M232.22 122.515 L208.127 110.523 C206.057 109.49 202.676 109.49 200.607 110.523 L131.613 144.864 C129.553 145.888 126.163 145.888 124.102 144.864 L55.109 110.523 C53.039 109.49 49.659 109.49 47.589 110.523 L23.497 122.515 C21.428 123.548 21.428 125.229 23.497 126.262 L124.102 176.329 C126.163 177.362 129.553 177.362 131.613 176.329 L232.22 126.262 C234.289 125.229 234.289 123.548 232.22 122.515" fill="#192534" fill-opacity="1" stroke="none"/><path id="path-2" d="M23.495 64.296 L124.102 110.521 C126.163 111.467 129.551 111.467 131.612 110.521 L232.219 64.296 C234.288 63.344 234.288 61.793 232.219 60.847 L131.612 14.622 C129.551 13.669 126.163 13.669 124.102 14.622 L23.495 60.847 C21.428 61.793 21.428 63.344 23.495 64.296" fill="#192534" fill-opacity="1" stroke="none"/></svg></a>';
echo '</center>';
?>
<html>
<style>
.sticky-social-share-buttons{box-sizing:border-box;line-height:0;z-index:15;}
/*Social Icons on Left for Desktop*/
@media screen and (min-width: 769px) {
.sticky-social-share-buttons{position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width:36px;}
}
/* Social Icons Bottom for Mobile */
@media screen and (max-width: 768px) {
.sticky-social-share-buttons{position: fixed;bottom: 0%;left:50%;transform:translateX(-50%);width:100%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);}
#EMhide, #TBhide, #BFhide {display:none;}
#EMShareIconST, #TBShareIconST, #BFShareIconST {display:none;}
}
.share-EMST:link, .share-EMST:visited {text-align:center;vertical-align:bottom;text-decoration:none;display:inline-flex;border-radius:0px;box-sizing:border-box;padding: 0px;}
.share-IconST:link, .share-IconST:visited {text-align:center;vertical-align:middle;text-decoration:none;display:inline-flex;border-radius:0px;box-sizing:border-box;padding: 10px;}
#EMShareIconST:link, #EMShareIconST:visited {background-color: rgba(256, 256, 256,1);}
#EMShareIconST:hover, #EMShareIconST:active {background-color: rgba(240, 240, 240,.5);}
#FBShareIconST:link, #FBShareIconST:visited {background-color: rgba(59, 89, 152,1);}
#FBShareIconST:hover, #FBShareIconST:active {background-color: rgba(59, 89, 152,.75);}
#TWShareIconST:link, #TWShareIconST:visited {background-color: rgba(29, 161, 242,1);}
#TWShareIconST:hover, #TWShareIconST:active {background-color: rgba(29, 161, 242,.75);}
#TBShareIconST:link, #TBShareIconST:visited {background-color: rgba(54, 70, 93,1);}
#TBShareIconST:hover, #TBShareIconST:active {background-color: rgba(54, 70, 93,.75);}
#PNShareIconST:link, #PNShareIconST:visited {background-color: rgba(189, 8, 28,1);}
#PNShareIconST:hover, #PNShareIconST:active {background-color: rgba(189, 8, 28,.75);}
#LNShareIconST:link, #LNShareIconST:visited {background-color: rgba(0, 119, 181,1);}
#LNShareIconST:hover, #LNShareIconST:active {background-color: rgba(0, 119, 181,.75);}
#WAShareIconST:link, #WAShareIconST:visited {background-color: rgba(37, 211, 102,1);}
#WAShareIconST:hover, #WAShareIconST:active {background-color: rgba(37, 211, 102,.75);}
#BFShareIconST:link, #BFShareIconST:visited {background-color: rgba(256, 256, 256,1);}
#BFShareIconST:hover, #BFShareIconST:active {background-color: rgba(240, 240, 240,.5);}
.shareST-Space{padding:5px;}
</style>
</html>Pin This Image to Share These Buttons With Other Astra Users
