Blog

Custom Social Sharing Widget for WordPress

Share This Jryven PubishingI wrote a post about the simple social-follow code that I wrote for use in WordPress text widgets. It went over very well. So, I thought that I would also share the code that  I have been using to do social share bars, too.

To make installation easy, I have set the code so that you can call it using hooks. To ensure sustainability – be sure to use a child theme with this technique.

Alright, to start out, create a new file called social-share-bar.php in your child theme directory. Paste this code in there:

<?php
/**
 * Social Media Bar
 */
?>

<div class="sharesocialmedia">
    <ul>
    <!-- Facebook | src = https://developers.facebook.com/docs/reference/plugins/like/ -->
        <li id="facebook">
            <div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
        </li>
    <!-- Google Plus | src = http://www.marketingtechblog.com/wordpress-pinterest-button/ -->
        <li id="google">
            <div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60" data-href="<?php the-permalink(); ?>"></div>
        </li>
    <!-- LinkedIn | src = http://developer.linkedin.com/plugins/share-plugin-generator -->
        <li id="linkedin">
            <div class="linkedinshare">
                <script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
                <script type="IN/Share" data-counter="top"></script>
            </div>
        </li>
    <!-- Twitter | src = https://twitter.com/about/resources/buttons#tweet -->
        <li id="twitter">
            <a href="https://twitter.com/share?url=<?php the_permalink();?>" class="twitter-share-button" data-url="<?php the_permalink();?>" data-count="vertical">Tweet</a>
        </li>
    <!-- Pinterest | src = http://www.google.com/+1/button/ -->
        <li id="pinterest">
            <?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
            <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>
        </li>
    </ul>
</div>

Then, create a file called social-share-bar-footer.php in your childtheme directory and paste this into the file:

<?php
/**
 * Social Media Bar Footer
 *
 * Author URL: Jryven.com
 */
?>

<div class="sharesocial">
    <!-- Twitter | src = https://twitter.com/about/resources/buttons#tweet -->
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <!-- Google Plus | src = http://www.marketingtechblog.com/wordpress-pinterest-button/ -->
		<script type="text/javascript">
		  (function() {
		    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		    po.src = 'https://apis.google.com/js/plusone.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		  })();
		</script>
    <!-- Pinterest | src = http://www.google.com/+1/button/ -->
		<script type="text/javascript">
			(function() {
		    window.PinIt = window.PinIt || { loaded:false };
	    	if (window.PinIt.loaded) return;
	    	window.PinIt.loaded = true;
	    	function async_load(){
	        var s = document.createElement("script");
	        s.type = "text/javascript";
	        s.async = true;
	        s.src = "http://assets.pinterest.com/js/pinit.js";
	        var x = document.getElementsByTagName("script")[0];
	        x.parentNode.insertBefore(s, x);
	   		 }
	   		 if (window.attachEvent)
	        	window.attachEvent("onload", async_load);
	    	else
	        	window.addEventListener("load", async_load, false);
				})();
		</script>
    <!-- Facebook | src = https://developers.facebook.com/docs/reference/plugins/like/ -->
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>
</div>

Now, just paste

<?php get_template_part( 'social-share-bar'); ?>

in the place that you’d like your share bar to appear (probably right before the end of your content section), and paste

<?php get_template_part( 'social-share-bar-footer'); ?>

in your footer in order to activate the bar. Almost done! The last trick is to add some style. To start out, put

/* SHARE BAR
------------------------------------------------ */

.sharesocialmedia {
	margin-right: auto !important; /* centers images */
	margin-left: auto !important; /* centers images */
	max-width: 315px; /* centers images */
	border-top: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
	}

.sharesocialmedia ul {
	list-style: none; /* removes bullet points */
	margin: 5px auto 5px auto;
	}

.sharesocialmedia ul li {
	margin: 5px auto 5px auto;
	display: inline-table;
	padding: 0 0.25em 0 0.25em;
	}

in the style.css file of your child theme. Optionally, (maybe you won’t need this, or will need to modify it) add

/* Gives Share Bar More Space */

.entry-meta {
	padding-top: 30px;
	}

as well. That bit should increase the distance between your post entry meta content and the sharing bar. And the last piece to have handy is this,

/* FACEBOOK MODS */

#facebook {
	margin: 5px -27px 5px auto;
	}

.fb-like span {
	overflow:visible !important;
	width:450px !important;
	margin-right:-375px;
	}

You would need the FACEBOOK MODS segment ONLY IF you experienced the rather infamous “facebook flyout clipping” issue, which, if you haven’t had the pleasure of gaining acquaintance, is what happens when the that contains the facebook flyout is not set to make overflow visible and cuts the flyout off so that it is unusable.

Let me know if it works for you. Post your URL if you have issues.  Share any tweaks that you think are valuable.

What’s Next

Our Work

Check out some recent work we’re proud of.

Our Blog

Read our latest ideas about tech, features, messaging, and more.

Get in Touch

Want to discuss a project? Hit us up, we’d love to chat!