How To Add Social Media Buttons to Posts

How To Add Social Media Buttons to Posts

In this post we will discuss How To Add Social Media Buttons to Posts. There are lots of social plugin for WordPress to integrate social media buttons. I also tried some of them but not found them helpful. So i decide to build my own social media icons. Earlier we had discussed How to Create a WordPress Child Theme.

Steps:

1. Open Functions.php and add below mentioned code at the bottom of Functions.php file before ?> tag.

/**
 * Add Twitter, Facebook, Youtube & Google Plus Sharing Icon to Posts
*/
function social_buttons_below($content) {
    global $post;
    $permalink = get_permalink($post->ID);
    $title = get_the_title();
    if(!is_feed() && !is_home() && !is_page()) {
        $content = $content . '<hr/><h3><em>Share This Post:</em></h3><div class="hSocial">
            <span><a href="https://twitter.com/Hightechnology1" id="iconTwitter" target="_blank" title="Twitter: @Hightechnology1">Twitter</a></span>
            <span><a href="https://www.facebook.com/pages/Hightechnology-Technology-That-Teach-You/276470822367157" id="iconFacebook" target="_blank" title="Facebook: Hightechnology">Facebook</a></span>
            <span><a href="https://www.youtube.com/user/TheHightechnology/" id="iconYouTube" target="_blank" title="YouTube Channel: The Hightechnology">YouTube</a></span>
            <span><a href="https://plus.google.com/106179794573359873484/" id="iconGooglePlus" target="_blank" title="Google Plus: Hightechnology">Google</a></span></div><hr/>
		<div style="clear: both"></div>';
    }
    return $content;
}
add_filter('the_content', 'social_buttons_below');

CSS:

.hSocial {
    display: block;
    margin: 2em auto;
    width: 200px;
    height: 40px;
}
.hSocial span {
    float: left;
    display: inline;
    margin-right: 8px;
}
.hSocial span a {
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    background-color: none;
    background: transparent url("http://hightechnology.in/wp-content/uploads/2014/07/social.png") 0 0 no-repeat;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}

Note: Implementing code can be problematic if you do not have basic syntax understanding. In some cases, your functions.php file might not have a closing ?>. Then just paste the PHP function at the bottom of the functions.php file.