Blog article

Code snippets, plus the latest news

Social media buttons. Adding social media buttons to your blog without a plugin.

In today’s article we’ll show you how to add social media buttons to your blog without a plugin. The process is tried and trusted, and we’ve used this in many client blogs.

Note: This requires users to edit WordPress theme files, and you must have font-awesome enqueued in your theme.

Adding the code to your blog

This method depends on how your blog uses the single post articles, which is normally located in single.php. Often, this file is created by templates specifically by developers for this purpose, but in other cases you can also use index.php. Let’s head over to single.php which is used in the Twenty Fifteen theme, which is shown below.

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
 
get_header(); ?>
 
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
 
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();
 
            /*
             * Include the post format-specific template for the content. If you want to
             * use this in a child theme, then include a file called called content-___.php
             * (where ___ is the post format) and that will be used instead.
             */
            get_template_part( 'content', get_post_format() );
 
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
 
            // Previous/next post navigation.
            the_post_navigation( array(
                'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .
                    '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
                    '<span class="post-title">%title</span>',
                'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .
                    '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
                    '<span class="post-title">%title</span>',
            ) );
 
        // End the loop.

Adding Social media buttons.

Next we look at the social media code which we’re going to add, along with the necessary CSS file. Here’s the required html and pHp markup.

<div class="share_this">   
            <div class="social_buttons">
        <div class="message">Share this post.</div>
                <div class="lgn_fb">
                <a href="http://facebook.com/share.php?u=<?php the_permalink() ?>&amp;t=<?php echo urlencode(the_title('','', false)); ?>" target="_blank" title="Share <?php _e('this post on Facebook');?>"><i class="fa fa-facebook"></i></a>
                </div>
                <div class="lgn_twt">
                <a href="http://twitter.com/home?status=Reading:%20<?php $escapett = get_the_title(); $twtt = rawurlencode($escapett); echo $twtt;?>%20<?php the_permalink();?>" target="_blank" title="Tweet <?php _e('this post'); ?>"><i class="fa fa-twitter"></i></a>
                </div>
                <div class="lgn_del">
                <a title="<?php _e('Submit to'); ?> Delicious" target="_blank" href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title('','', false)) ?>"><i class="fa fa-delicious"></i></a>
                </div>
                <div class="lgn_digg">
                <a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>" target="_blank" title="Digg <?php _e('this post'); ?>"><i class="fa fa-digg"></i></a>
                </div>
                <div class="lgn_stmbl">
                <a title="Stumble <?php _e('This'); ?>" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(the_title('','', false)) ?>" target="_blank"><i class="fa fa-stumbleupon"></i></a>
                </div>
                
                <div class="lgn_gplus">
                <a title="Plus One <?php _e('This'); ?>" href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php echo the_permalink(); ?>" target="_blank">
                <i class="fa fa-google-plus"></i></a>
                </div>
                
                <div class="lgn_pin">
                <a title="Pin <?php _e('This'); ?>" href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><i class="fa fa-pinterest"></i></a>
                </div>
              <div class="share_this_bottom"></div>          
            </div>
</div>

This all looks complex, however it’s not. We need to add this to our existing single.php shown previously. The most trickiest of this process is to put it into the correct place, which in our case is just above the previous and next postnavigation, just above line 31. Copy the code above and insert the code at line 30.

Adding the required CSS3

The CSS needs to be added to Styles.css or whichever stylesheet you are using in your theme. If you are using a child theme, then paste the above into the child theme’s CSS styles.css. If presentation matter to you, then add the appropriate media queries too, although the code pretty much takes care of itself.

/* Social Sharing */
.share_this, .share_this_bottom {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    float: left;
    text-align: center;
    padding: 5px 0;
}
.social_buttons {
    text-align: center;
}
.social_buttons div.message {
    font-weight: bold;
    font-size: 17px;
    color: #2a6ac3;
    padding-right: 40px;
}
.social_buttons div {
    display: inline-block;
}
.social_buttons div a {
    font-size: 24px;
}
.social_buttons div i, .social_buttons div a {
    color: #bababa;
}
.social_buttons div a {
    display: inline-block;
    color: #ddd;
    padding: 5px;
    text-align: center;
}
.social_buttons div.lgn_twt a:hover i, .social_buttons div.lgn_twt a:hover {
    color: #4099ff;
}
.social_buttons div.lgn_fb a:hover i, .social_buttons div.lgn_fb a:hover {
    color: #2a6ac3;
}
.social_buttons div.lgn_del a:hover i, .social_buttons div.lgn_del a:hover {
    color: #1e73be;
}
.social_buttons div.lgn_digg a:hover i, .social_buttons div.lgn_digg a:hover {
    color: #356aa0;
}
.social_buttons div.lgn_stmbl a:hover i, .social_buttons div.lgn_stmbl a:hover {
    color: #eb4924;
}
.social_buttons div.lgn_gplus a:hover i, .social_buttons div.lgn_gplus a:hover {
    color: #D84B37;
}
.social_buttons div.lgn_pin a:hover i, .social_buttons div.lgn_pin a:hover {
    color: #C11A22;
}

And that’s it, your Social media sharing is now complete. There’s virtually no impact on page loading times, plus it’s much better than using a plugin to achieve the same effect.

Post your comments here

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