Add Slick Social Media Icons to Thesis

So as it currently stands there are some pretty sweet social media plugins and even some killer social media tutorials out there for Thesis, but personally I wanted to roll something custom for Blogging.com.

Thesis Social Media Icons Video:

Today’s video will show you how to quickly implement sleek unobtrusive social media links/smart icons to your Thesis site without a plugin. These smart icons can be found right under this posts’s title.

Implementation

Now that you have watched the video on how to implement the code its time to grab the code below. Simply add these two snip-bits to your custom_functions.php and custom.css and you will have a slick looking social media setup.

**Update: We now have code for the share buttons on the side of your website and code to insert the share buttons below the headline of your posts.

Make sure to change $twitter=’Blogging.com’; to $twitter='[Insert your Twitter Account]’;

Sidebar Social Bar

To implement the code below simply copy and paste it into your custom_functions.php. Don’t forget to add your twitter name. This code sets up the social media “smart icons” along with the HTML to allow us to effectively style it.

function add_floating_share(){
global $post;
	if(is_single() || is_page()){
	?>
    <div id="sharebar">
    <ul>

    <li><a href="http://twitter.com/share" data-count="vertical" data-via="taxreceipts">Tweet</a></li>
    <li><g:plusone size="tall"></g:plusone></li>
    <li id="fb"><div id="fb-root"></div><fb:like href="" send="true" layout="box_count" width="65" show_faces="true" font="tahoma"></fb:like></li>
    <li><su:badge layout="5"></su:badge></li>

    <? 
	    $img_url = get_post_meta($post->ID, 'img_url', true);
	    $anchor_text = get_post_meta($post->ID, 'anchor_text', true);
	    $pin_description = get_post_meta($post->ID, 'pin_description', true);
	    if(strlen($img_url)>0 && strlen($anchor_text)>0 && strlen($pin_description)){ ?>
	    <li><a href="http://pinterest.com/pin/create/button/?url=<?=get_permalink();?>&media=<?=$img_url;?>&description=<?= $pin_description;?>" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></a></li>
	    <? } ?>

    </ul>
    </div>

	<? 
	 }
}
add_action('thesis_hook_before_content_box','add_floating_share');
function social_footer(){ ?>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=176133919079931&amp;xfbml=1"></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<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&appId=120406481416771";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
 <?
 }

 add_action('wp_footer','social_footer');

Add to Your custom.css

Now that we have added the smart icons we need to style them. Please make note of the .social{margin:-15px auto 10px;} You may need to change the -15px to something else depending on your customizations.

#sharebar {
	left:-80px; 
	top:  100px;
	position: absolute; 
	width: 67px; 
	background: #fff; 
	padding: 0; 
	text-align: center; 
	border: 1px solid #ccc; 
	list-style: none; 
	margin: 0; 
	z-index: 99; 
	box-shadow: 0 0 4px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
 }
#sharebar ul { 
	margin: 0 0px; 
	list-style: none;
}
#sharebar li { 
	display: block; 
	margin: 5px 0; 
	padding: 0; 
	overflow: visible; 
	text-align: center; }
#sharebar #fb { 
	margin-left: 10px; 
	text-align: left;}
p.recommended {
	background: whiteSmoke;
	padding: 14px;
	border: 2px solid #EFEFEF;
	text-align: center;
}
.page {
	position: relative;
}

You may need to tweak the CSS for your website. This code is adapted from the sharebar currently on Blogging.com.

Below Post Share Bar

To implement the code below simply copy and paste it into your custom_functions.php. Don’t forget to add your twitter name. This code sets up the social media “smart icons” along with the HTML to allow us to effectively style it.

function add_floating_share(){
global $post;
	if(is_single() || is_page()){
	?>
    <div id="sharebar">
    <ul>

    <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="taxreceipts">Tweet</a></li>
    <li><g:plusone size="tall"></g:plusone></li>
    <li id="fb"><div id="fb-root"></div><fb:like href="" send="false" layout="box_count" width="65" show_faces="true" font="tahoma"></fb:like></li>
    <li><su:badge layout="5"></su:badge></li>

    <? 
	    $img_url = get_post_meta($post->ID, 'img_url', true);
	    $anchor_text = get_post_meta($post->ID, 'anchor_text', true);
	    $pin_description = get_post_meta($post->ID, 'pin_description', true);
	    if(strlen($img_url)>0 && strlen($anchor_text)>0 && strlen($pin_description)){ ?>
	    <li><a href="http://pinterest.com/pin/create/button/?url=<?=get_permalink();?>&media=<?=$img_url;?>&description=<?= $pin_description;?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></a></li>
	    <? } ?>

    </ul>
    </div>

	<? 
	 }
}
add_action('thesis_hook_before_post','add_floating_share');
function social_footer(){ ?>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=176133919079931&xfbml=1"></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<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&appId=120406481416771";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
 <?
 }

 add_action('wp_footer','social_footer');

Add to Your custom.css

#sharebar {

	background: #fff; 
	padding: 0; 
	list-style: none; 
	margin: 0; 
	width: 100%;
	overflow: auto;
 }
#sharebar ul { 
	margin: 0 0px; 
	list-style: none;
}
#sharebar li { 
	display: block; 
	margin-right: 10px; 
	padding: 0; 
	overflow: visible; 
	text-align: center;
	float: left; 
}
#sharebar #fb { 
	margin-left: 10px; 
	text-align: left;
	}
p.recommended {
	background: whiteSmoke;
	padding: 14px;
	border: 2px solid #EFEFEF;
	text-align: center;
}
.page {
	position: relative;
}
#sharebar #fb {
	width: 45px;
	margin-left: 0px;
}

By default, this will put the icons below the headline in Thesis, but you may change this by using a different Thesis Hook.

Closing:

Note: Thanks to the help and suggestion by Scott Wyden we have added “Email This” functionality. Here is the image you need . Right Click -> Save Image as. Make sure you grab the email icon and add it to you custom/images folder.

Hopefully this quick tutorial has helped you figure out how to implement social media into your Thesis Theme.

If you have any questions on implementation or the code please feel free to leave us a note in the comments.

Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they’ve got guts and hustle. He’s also the co-founder of Broadband Now which aims to simplify the broadband shopping process.

Written by

Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they've got guts and hustle. He's also the co-founder of Broadband Now which aims to simplify the broadband shopping process.

«
»

Comments are closed.