How To Add Share Links to a Single Post

Home » Tutorials » Theme Tutorials » How To Add Share Links to a Single Post

Share links have become critical to every website. If you don’t have share links on your blog posts, make sure to add them with one of these methods.

Using a Widget

The easiest way to add share buttons to your website is to:

  1. Install & activate the Gabfire Widget Pack plugin
  2. Activate the Share Items widget in Appearance > Gabfire Widget Pack
  3. Drag the Gabfire: Share Items widget to the appropriate widget zone in Appearance > Widgets
  4. Share links are now available on your single posts!

Using PHP Code

If you want to manually hard-code share links to your site, you’ll need to complete the following steps.

1. Add this code to single.php

<span>
	<span><a href="http://twitter.com/share?url=<?php echo urlencode(wp_get_shortlink()); ?>&amp;counturl=<?php urlencode(the_permalink()); ?>" data-count="horizontal" data-via="<?php echo get_option('of_bn_twitter'); ?>"><?php _e('tweet', 'blognews'); ?></a></span>
	<span><g:plusone size="medium"></g:plusone></span>                    
	<span><div id="fb-root"></div><fb:send href="<?php the_permalink(); ?>" font="arial"></fb:send></span>
	<span><object data="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=84&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" style="border:none; overflow:hidden; width:84px; height:21px;"></object></span>
	<div></div>
</span>                            
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

Under this code:

<?php endwhile; else : endif; ?>

2. Add this code to your Custom CSS box:

.archive .archive-left {width:262px;float:left;overflow:hidden;}
.archive .archive-right {width:340px;float:right;}
    .archive-right .entry_title {border-bottom:1px dotted #ddd;border-bottom:1px dotted #ddd;padding-bottom:5px;margin-bottom:5px;display:block;}
    .archive-right .postmeta {border-bottom:1px dotted #ddd;padding-bottom:5px;margin-bottom:10px;display:block;}
    .archive-right .share-items {border-bottom:1px dotted #ddd;}
    .share-items {padding-bottom:5px;margin-bottom:5px;display:block;}
        .share-google1 {float:left;width:70px;display:block;overflow:hidden;}
        .share-fbsend {float:left;width:65px;display:block;overflow:hidden;}
        .share-twitter {float:left;width:110px;display:block;overflow:hidden;}        
        .share-fblike {float:left;width:90px;display:block;overflow:hidden;}

3. Finally, add this code in inc/theme-js.php

wp_register_script('plus1', 'http://apis.google.com/js/plusone.js');
wp_enqueue_script('plus1');

Under this code:

wp_enqueue_script('jquery');

LEAVE A COMMENT