Fast Social Media Share Buttons That Look Great-Astra Custom Hook-No JS

Are you obsessed with your page speed? I know I am obsessed, I use Google PageSpeed Insights and Pingdom Tools Page speed test all the time. Every time I add a new plugin to one of the sites I manage, I find it very important to test the page speed. This is why I got very frustrated with all the social sharing button plugins, they all had an impact on my site speed. Most of them use javascript (js) to call some unnecessary events and capture data that you are already being tracked on the social media site itself. So if you want a super fast and elegant looking social share buttons here is some code for you.

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. Most plugins 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. Now you may be concerned that these SVGs will not be compatible with all the browsers that are being used. To put that worry to rest >94.5% of all browsers being used support SVG according to CanIUse.com.

PHP Creates and Links and Graphics and Serves It Up As HTML

Another reason you don’t have to worry about multiple calls is that with Astra these share buttons will be generated with the page just like the content is. The PHP code will generate the URLs to be shared and the Icons. Unlike images in the content that are stored as separate files these icons are sent as straight HTML in the page. All of the images and links and styles will add less than 20Kb to the entire page and be sent with the content HTML. Now that is pretty slick.

Using Astra Hooks

You must have Astra Pro “Custom Layouts” to use these buttons with this method. Below is the tutorial and code on how to implement these Social Share Icons. Sorry if you are trying to use the Astra Hooks Free Plugin, it will not work since it can’t inject PHP. You can follow this tutorial How to Add Share Buttons to WordPress Posts No Plugin or Java, to add these Social Share Icons to any WordPress site using the function.php file of your theme. For you Astra users here is how to do this with Astra Pro “Custom Layouts” and Hooks to put them right where you want them.

Adding with Custom Layouts Tutorial

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.

Hover Over Appearance Then Click on Custom Layouts

Click Add New in Custom Layouts

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.

Copy and Paste the Code in the Code Block at the bottom of this Page.

Here is a link to the code. <Link>

Set the Layout, Action, and Display on

Make Layout > “Hooks”.

Set Action > “entry_bottom”. This puts the social share icons at the bottom of your content. If you want to know where the other actions will put your content look here.

Set Display On > All Post. If you want to have these Social Share Icons on other pages you can click Add Display Rule.

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.

The Whole Social Icon Code

A little attribution I got the original idea for how to do this from Chrunchify.com.

<?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.'&media=&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>';
echo '<h3 style = "font-weight:bold; text-align: center;">Share This On Your Favorite Social Media!<h3></center>';
echo '<center class="social-share-buttons">';
echo '<a class=share-EM id=EMShareIconFT 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=share-Space></span>';
echo '<a class=share-Icon id=FBShareIcon 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=share-Space></span>';
echo '<a class=share-Icon id=TWShareIcon 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=share-Space></span>';
echo '<a class=share-Icon id=TBShareIcon 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=share-Space></span>';
echo '<a class=share-Icon id=LNShareIcon 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=share-Space></span>';
echo '<a class=share-Icon id=PNShareIcon 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=share-Space></span>';
echo '<a class=share-Icon id=WAShareIcon 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=share-Space></span>';
echo '<a class=share-Icon id=BFShareIcon 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>
.share-EM:link, .share-EM:visited {text-align:center;vertical-align:middle;text-decoration:none;display:inline-flex;border-radius:0px;box-sizing:border-box;padding: 0px;}
.share-Icon:link, .share-Icon:visited {text-align:center;vertical-align:middle;text-decoration:none;display:inline-flex;border-radius:0px;box-sizing:border-box;padding: 10px;}
#EMShareIconFT:link, #EMShareIconFT:visited {background-color: rgba(256, 256, 256,1);}
#EMShareIconFT:hover, #EMShareIconFT:active {background-color: rgba(240, 240, 240,.5);}
#FBShareIcon:link, #FBShareIcon:visited {background-color: rgba(59, 89, 152,1);}
#FBShareIcon:hover, #FBShareIcon:active {background-color: rgba(59, 89, 152,.75);}
#TWShareIcon:link, #TWShareIcon:visited {background-color: rgba(29, 161, 242,1);}
#TWShareIcon:hover, #TWShareIcon:active {background-color: rgba(29, 161, 242,.75);}
#TBShareIcon:link, #TBShareIcon:visited {background-color: rgba(54, 70, 93,1);}
#TBShareIcon:hover, #TBShareIcon:active {background-color: rgba(54, 70, 93,.75);}
#PNShareIcon:link, #PNShareIcon:visited {background-color: rgba(189, 8, 28,1);}
#PNShareIcon:hover, #PNShareIcon:active {background-color: rgba(189, 8, 28,.75);}
#LNShareIcon:link, #LNShareIcon:visited {background-color: rgba(0, 119, 181,1);}
#LNShareIcon:hover, #LNShareIcon:active {background-color: rgba(0, 119, 181,.75);}
#WAShareIcon:link, #WAShareIcon:visited {background-color: rgba(37, 211, 102,1);}
#WAShareIcon:hover, #WAShareIcon:active {background-color: rgba(37, 211, 102,.75);}
#BFShareIcon:link, #BFShareIcon:visited {background-color: rgba(256, 256, 256,1);}
#BFShareIcon:hover, #BFShareIcon:active {background-color: rgba(240, 240, 240,.5);}
.share-Space{padding:5px;}
</style>
</html>