Home > Sci/Tech > Replace Social Share Links With CSS

Replace Social Share Links With CSS

As part of renovating this site, I wanted to cut down on the resource-heavy social media share links at the end of each post. I’ve modified some of the CSS created by Chris Ferdinandi to replace the aforementioned links with simple color-based links to various social platforms. Furthermore, I tapped into the FontAwesome repository to add an icon to each link. Here’s the CSS block followed by my PHP-HTML (written for WordPress).


.btn {
    font-size: .9375em;
    line-height: 1.2;
    font-weight: bold;
    background-color: #08c;
    border: .0725em solid #08c;
    border-radius: .0725em;
    margin-right: .3125em;
    margin-bottom: .3125em;
    padding: .5em .6875em;
}

.btn,.btn:hover,a .btn:hover,.btn.active {
    color: #FFF;
}

.btn:hover,a .btn:hover,.btn.active {
    background-color: #005580;
    text-decoration: none;
    border-color: #005580;
}

.btn-tweet {
    background-color: #41b7d8;
    border-color: #41b7d8;
}

.btn-tweet:hover,a .btn-tweet:hover {
    background-color: #238caa;
    border-color: #238caa;
}

.btn-facebook {
    background-color: #3b5997;
    border-color: #3b5997;
}

.btn-facebook:hover,a .btn-facebook:hover {
    background-color: #263960;
    border-color: #263960;
}

.btn-google {
    background-color: #d64937;
    border-color: #d64937;
}

.btn-google:hover,a .btn-google:hover {
    background-color: #a02f21;
    border-color: #a02f21;
}

.btn-rss {
    background-color: #F8BC2E;
    border-color: #F8BC2E;
}

.btn-rss:hover,a .btn-rss:hover {
    background-color: #e9aa16;
    border-color: #e9aa16;
}

<a title="Share on Twitter" target="_blank" href="https://twitter.com/intent/tweet?text=<?php the_title() ?>&url=<?php the_permalink() ?>&via=RKmd" class="btn btn-tweet">
<i class="fa fa-twitter fa-lg"></i>  Tweet</a>

<a title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>" class="btn btn-facebook">
<i class="fa fa-facebook fa-lg"></i>  Share</a>

<a title="Share on Google Plus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink() ?>" class="btn btn-google">
<i class="fa fa-google-plus fa-lg"></i>  Share</a>

<a title="Subscribe to RSS" target="_blank" href="https://feedpress.me/rkmd" class="btn btn-rss">
<i class="fa fa-rss fa-lg"></i>  Subscribe</a>

This relatively small modification has substantially reduced the number of resources required for page loads. You can see an example of the result at the bottom of this post.

 LEGAL

My posts are not to serve as a replacement for recommendations provided by licensed physicians nor do they represent the opinions of Baylor College of Medicine or its affiliated institutions. Please read this site's Disclaimer and Terms of Use for more information.

ALSO CHECK OUT  

Exit Pixel C – Enter iPad Pro

About a week ago, I sold my Pixel C and its keyboard for ~$500 on …

 DROP A LINE

Your email address will not be published. Required fields are marked *