Social sharing plugins can be great, but they can also add extra bloat. In today's age where site speed is vital, saving even a a couple KB can help. In the case where you only need to add a few links it's much simpler to add them to your templates manually. Want an example? Check the bottom of the posts on this site!

<div class="social-share cf">
<!-- Facebook -->
<a href="https://www.facebook.com/sharer.php?u=<?php global $wp; echo home_url( $wp->request ) ?>" target="_blank" class="fb-share"><span>Share<br/>on Facebook</span></a>
<!-- Pinterest-->
<a href="//pinterest.com/pin/create/button/?url=<?php echo home_url( $wp->request ) ?>" target="_blank" class="pt-share"><span>Pin<br/> this Item</span></a>
<!-- Email -->
<a href="mailto:enteryour@addresshere.com?subject=<?php the_title(); ?>&body=Check this out! <?php the_title(); echo ' ';echo home_url( $wp->request ) ?>" class="email-share"><span>Email<br/> a Friend</span></a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=<?php echo home_url( $wp->request ) ?>" target="_blank" class="tw-share"><span>Tweet<br/> this Item</span></a>
</div>

If you wish to use you're own icons just the class from the <a> tags and text within the container

some css to get you started

.social-share {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.social-share a {
display: block;
float: left;
line-height: 15px;
font-size: 12px;
padding-top: 10px;
text-align:center;
}
.social-share a:before {
display: block;
font-family: "FontAwesome";
font-weight: 900;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid gray;
text-align: center;
border-radius: 15px;
margin:0 auto;
}
.social-share a span {
display: block;
min-width: 70px;
float: left;
width:100%;
}
a.fb-share:before {
content: "\f39e";
}
a.pt-share:before {
content: "\f231";
}
a.email-share:before {
content: "\f0e0";
}
a.tw-share:before {
content: "\f099";
}
@media(min-width:481px){
.social-share a:before {
margin-right: 10px;
float: left;
}
.social-share a span {
width: auto;
}
}

*FontAwesome v5 is required - fontawesome.com

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.