Social media sharing buttons are a must have, especially for a blog. Sure, the first solution that comes to mind for adding such buttons is a plugin, and there are plenty of free and premium plugins to choose from.
Being an important part of a website, sharing buttons should not be underestimated and just slapped-on. They should be attractive, and encourage the reader to share your awesome content. We carefully pondered all the details, to come up with the perfect buttons both aesthetically and performance-wise.
This is what the buttons will look like:
Demo link: click here
Adding the buttons in 3 steps
Step 1: Add this code in functions.php
(NOTE: if you are using a child theme, add the code to the child theme’s functions.php
file)
/** * Social share buttons */ function hdev_share_social_buttons() { $url = urlencode(get_the_permalink()); $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); $media = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); include( locate_template('hdev-share-template.php', false, false) ); }
Step 2: Create a file named hdev-share-template.php
and add this content:
<ul class="share-buttons"> <li> <a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>" target="_blank"> <svg id="facebook" data-name="facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.61 59.03"> <title>facebook</title> <path d="M47.2,12.76H41.63c-4.36,0-5.18,2.09-5.18,5.11v6.71h10.4l-1.38,10.5h-9V62H25.59V35.07h-9V24.57h9V16.84c0-9,5.5-13.87,13.52-13.87a69.4,69.4,0,0,1,8.09.43Z" transform="translate(-16.59 -2.97)"/> </svg> <span>Share</span> </a> </li> <li> <a class="share-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $title; ?>&url=<?php echo $url; ?>&via=HungBun" target="_blank"> <svg id="twitter" data-name="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.1 47.2"> <title>twitter</title> <path d="M54.86,20.19v1.55c0,15.74-12,33.88-33.88,33.88A33.64,33.64,0,0,1,2.74,50.27a24.55,24.55,0,0,0,2.88.15A23.84,23.84,0,0,0,20.4,45.33,11.93,11.93,0,0,1,9.27,37.07a15,15,0,0,0,2.25.18,12.58,12.58,0,0,0,3.13-.41A11.91,11.91,0,0,1,5.1,25.17V25a12,12,0,0,0,5.38,1.51A11.92,11.92,0,0,1,6.8,10.61,33.84,33.84,0,0,0,31.35,23.06a13.44,13.44,0,0,1-.29-2.73,11.92,11.92,0,0,1,20.61-8.15,23.43,23.43,0,0,0,7.56-2.87A11.87,11.87,0,0,1,54,15.88,23.87,23.87,0,0,0,60.84,14,25.59,25.59,0,0,1,54.86,20.19Z" transform="translate(-2.74 -8.42)"/> </svg> <span>Tweet</span> </a> </li> <li> <a class="share-googleplus" href="https://plus.google.com/share?url=<?php echo $url; ?>" target="_blank"> <svg id="googleplus" data-name="googleplus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.45 37.8"> <title>googleplus</title> <path d="M21.65,53.45a18.9,18.9,0,0,1,0-37.8,18.05,18.05,0,0,1,12.66,5l-5.13,4.93a10.61,10.61,0,0,0-7.53-2.91,11.94,11.94,0,0,0,0,23.88c7.48,0,10.29-5.39,10.73-8.15H21.65V31.9H39.49A16,16,0,0,1,39.8,35C39.8,45.79,32.55,53.45,21.65,53.45Zm40.51-16.2H56.77v5.39H51.35V37.25H46V31.84h5.39V26.45h5.42v5.39H62.2Z" transform="translate(-2.75 -15.65)"/> </svg> <span>Recommend</span> </a> </li> <li> <a class="share-pinterest" href="http://pinterest.com/pin/create/button/?url=<?php echo $url; ?>&media=<?php echo $media; ?>&description=<?php echo $title; ?>" target="_blank"> <svg id="pinterest" data-name="pinterest" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.48 61.48"> <title>pinterest</title> <path d="M31.78,63a30.1,30.1,0,0,1-8.73-1.28,25.52,25.52,0,0,0,3.12-6.56s.36-1.36,2.16-8.45c1,2,4.16,3.84,7.48,3.84,9.89,0,16.61-9,16.61-21.09,0-9.09-7.72-17.61-19.49-17.61C18.37,11.83,11,22.32,11,31c0,5.28,2,10,6.28,11.77a1.06,1.06,0,0,0,1.52-.8c.16-.52.48-1.88.64-2.44A1.51,1.51,0,0,0,19,37.85a8.93,8.93,0,0,1-2-6C17,24,22.77,17.07,32.1,17.07c8.24,0,12.81,5,12.81,11.81,0,8.85-3.92,16.33-9.77,16.33a4.76,4.76,0,0,1-4.84-5.92C31.22,35.41,33,31.2,33,28.4c0-2.52-1.36-4.64-4.16-4.64-3.28,0-5.92,3.4-5.92,8a12.81,12.81,0,0,0,1,4.88c-3.36,14.25-4,16.73-4,16.73a26.94,26.94,0,0,0-.52,7.08A30.77,30.77,0,1,1,31.78,63Z" transform="translate(-1.04 -1.5)"/> </svg> <span>Pin</span> </a> </li> </ul>
Step 3: Add this code to style.css
(NOTE: if you are using a child theme, add the code to the child theme’s style.css
file)
.share-buttons { font-size: 0.7rem; line-height: 0.7rem; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 60px; z-index: 2; position: relative; text-align: center; list-style-type: none; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; } .share-buttons li { height: auto; flex: 0 1 auto; width: calc(25% - 1px); margin-right: 1px; } .share-buttons li:last-child { width: 25%; margin-right: 0; } .share-buttons svg { fill: #fff; margin-right: 5px; width: 16px; height: 16px; } .share-googleplus svg { width: 20px; height: 16px; } .share-buttons a { display: block; padding: 12px 12px 9px; text-align: center; } .share-buttons li:first-child a { border-radius: 3px 0 0 3px; } .share-buttons li:last-child a { border-radius: 0 3px 3px 0; } .share-twitter { background: #1da1f2; } .share-facebook { background: #3b5998; } .share-googleplus { background: #db4437; } .share-pinterest { background: #b5071a; }
Displaying the buttons
To display the buttons, call the hdev_share_social_buttons()
function in single.php
and/or page.php
of your theme.
<?php hdev_share_social_buttons(); ?>