TimesToCome

Geekiness and life on the third coast

Adding popular social links to your posts and pages in WordPress




To place a link list of share buttons on posts and pages in WordPress you’ll want to edit the page.php and single.php files in your theme. I usually place the links at the end of the post just above or below the signature depending on your theme.


<div class="social_links">
<ul>

<!-- Digg -->
<li><a href="http://digg.com/submit?phase=2
&url=<?php the_permalink() ?>
&title=<?php the_title(); ?>
&bodytext=<?php the_excerpt() ?>"
title="Digg this story">Digg</a>
</li>

<!-- Reddit -->
<li>
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>
</li>

<!-- Twitter -->
<li>
<a href="http://twitter.com/home?status=Reading:<?php echo urlencode(get_permalink(get_the_ID())); ?>&title=<?php echo urlencode(get_the_title(get_the_ID())); ?>">
Twitter this!</a></p>
</li>

<!-- Google Plus -->
<li>
<div class="g-plusone" data-size="tall"></div>

<!-- Place this tag after the last +1 button tag. -->
<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>
</li>

<!-- Stumble upon -->
<li>
<a href="http://www.stumbleupon.com/submit?url=<?php echo urlencode(get_permalink(get_the_ID())); ?>&title=<?php echo urlencode(get_the_title(get_the_ID())); ?>">
Stumble Upon</a>
</li>

<!-- Facebook -->
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=box_count&show_faces=false& width=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:60px; height:60px;">
</iframe>
</li>

<!-- eMail -->
<li>
<a href="mailto:?subject=<?php urlencode(the_title()) ?>&body=<?php urlencode(the_permalink()) ?>">
Email me</a>
</li>

</ul>
</div>

</div>

To have a horizontal list of links edit your style.css and add:

.social_links {
float:left;
padding:0 15px 0 0;
margin-left:100px;
}

.social_links ul li {
float:left;
list-style-type: none;
width: 100px;
}