How-to-Add-Share-Buttons-to-WordPress-Posts-No-Plugin-or-Java

How to Add Share Buttons to WordPress Posts No Plugin or Java

/ Astra, WordPress / By

Speed up your website by removing your java script heavy social sharing plugin by adding this little bit of code to you WordPress Theme. You will have the stylish looking social share icons you see on this page.

  1. Log in to Your WordPress Website as an Administrator.
  2. Select “Appearance > Theme Editor” From the Sidebar.
  3. On the Right Hand Side of the Screen Select the Function.php File.
  4. Copy and Past the Code in the Code Block at the bottom of this Page into your function.php file.
  5. Click “Update File” and done.

Are you obsessed with your page speed? I couldn’t find a social share plugin that didn’t affect my page speed by 5 to 10 points. My page speeds are in the high 90s on Google PageSpeed Insights. So if your page speed is not that high, this won’t give as big of an impact to you, but it takes a lot of fine tuning to get up in the high 90s. I have some of my pages at 100 Google page speed.

If you check this page it may be lower and that is because of all the HTML tags I must use to make the PHP code embedded to look good. I am using Shiny Code Plugin to do this. If you know a faster syntax highlighter that is compatible with Gutenberg blocks please let me know. Shiny Code Plugin is the lowest overhead and best looking syntax highlighter for WordPress I have found.

Are You Using Astra Theme with Astra Pro Plugin

If you are using Astra Theme and have the Astra Pro Plugin then there is an even better way to add this code here: Fast Social Media Share Buttons That Look Great-Astra Custom Hooks.

How These Social Share Buttons Are So Fast

Most Social Share Buttons have a lot of unnecessary overhead. The goal of the social share icon is to have your reader click the button and share your content. First, they must be a reader. Second, they must be compelled to click your icon and share your content. If your page loads slowly then your visitor will likely never become a reader. These social share icons reduce the page speed overhead by, not having java-script, using optimized inline SVG for images, being built with the page and served up with the content. If you are using a cache plugin, these social share buttons will all be cached and loaded with the content. Finally, these buttons will add <20kb to the overall content of the page. Awesome and Fast.

Optimized With Inline SVG

This code is also optimized with inline Scalable Vector Graphics (SVG) for the icons. You will use no additional server calls for an icon or font file. Most plugins have a call to access at least one additional icon. Often the plugin uses a font that must be filled separately from various other servers. Now you could be concerned these SVGs will not render appropriate for all the browsers that your viewers might be using. You shouldn’t worry >94.5% of browsers used support SVG images, just checkout CanIUse.com.

PHP Creates the Links & Graphics and Serves It Up As HTML Fast

This method of adding social share buttons will be much faster as they are generated with the page just like the content is. The PHP code will generate the URLs links through built-in WordPress and php calls. Additionally, the SVG images are not images stored as separate files, these icons are sent as straight HTML in the page at less than 2kb of data each. All of the images, links, and styles will add less than 20Kb to the entire page and be sent with the content HTML.

Using Themes Function.php File

The functions.php is a special PHP file that your WordPress theme will execute. WordPress will execute the code in functions.php during its normal PHP processing. You can use the functions.php add custom functionality to your theme and site. For the below tutorial we will use the function.php file to add these fast social share buttons. You need to be very careful when using your function.php file. If you mess this up you can crash your site. It is best that you backup your function.php file via ftp so you can reset the file if something goes wrong.

Adding Code to Function.php File Tutorial

Now that Custom Layouts is Active we can continue.

1. Log in to Your WordPress Website as an Administrator.

2. Select “Appearance > Theme Editor” from the sidebar.

How-to-Add-Share-Buttons-to-WordPress-Posts-No-Plugin-or-Java-1

3. On the Right Hand Side of the Screen Select the Function.php file.

Initially the style.css file will be selected. If you put php code in style.css it will not work.

4. Copy and Paste the Code in the Code Block at the Bottom of this Page to the “end” of your function.php file.

5. Now – Don’t Forget to “Update File”

The Whole Social Icon Code

// Add Fast Social Share Icons to the Bottom of All Posts
add_filter('the_content','add_Social_Share_End_Post');
function add_Social_Share_End_Post($content) {
  if(is_single() && !is_home()) {
  // 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
  $shareThis .='<!-- Superfast Social Sharing Buttons No JavaScript. No Plugin Required.-->';
  $shareThis .='<center>';
  $shareThis .='<h3 style = "font-weight:bold; text-align: center;">Share On Your Favorite Social Media!<h3></center>';
  $shareThis .='<center class="social-share-buttons">';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<span class=share-Space></span>';
  $shareThis .='<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>';
  $shareThis .='<br> <a style="font-size:4;color:transparent;" target="_blank" href="http://macademy.musclemagfitness.com">Designed with MAcademyORON.org</a>';
  $shareThis .='</center>';
  $shareThis .='<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>';
  $content .= $shareThis;
  }
  return $content;
}

Pin This Image to Share This Tutorial

How-to-Add-Share-Buttons-to-WordPress-Posts-No-Plugin-or-Java-Pin
5/5 (2 Reviews)

Share This On Your Favorite Social Media!