Thesis Tutorial #1 : Add Nice Looking Social Sharing Button

Assalamu’alaikum and hello world~

This is just a simple tutorial for The Thesis Theme for WordPress user. I’ll show you how to add nice looking social sharing button at the bottom of each post just like mine? (See at the bottom of this post to see and try out the button.)

Wooot.. apehal aku speaking plak ari ni…?! LOL!

Okay, let’s straight to the point…

Firstly, go to Custom File Editor.
Then, all you have to do is simply place the following code in custom_function.php. Just put at the very bottom of custom_function.php and save it!

function fb_like() {
	?>
	<div class="fb-like"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=273645020698&amp;xfbml=1"></script><fb:like layout="button_count" href="<?php the_permalink(); ?>" send="true" width="178" show_faces="false" action="recommend" font="arial"></fb:like></div>
	<?php }
add_action('thesis_hook_after_post','fb_like');

function twitter_button() { ?>
   <div class="tweetbutton">
      <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>" data-via="[YOUR TWITTER USERNAME]">Tweet</a>
      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   </div>
<?php }

add_action('thesis_hook_after_post', 'twitter_button');

function google_plus_one_integration() {
	?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
	<?php
}
add_action('thesis_hook_after_html', 'google_plus_one_integration');

function google_plus_one_output() {
if (is_single()) { ?>
<div id="g-plusone">
<g:plusone size=medium></g:plusone>
</div>
<?php }
}
add_action('thesis_hook_after_post', 'google_plus_one_output');

function linkedin_button() {
if (is_single()) { ?>
   <div class="linkedin">
      <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script>
   </div>
<?php }
}
add_action('thesis_hook_after_post', 'linkedin_button');

You must change the RED value to your own.

After done the above step, now place the following code in custom.css, and modify as desired to fit the look of your site and save!

.custom #g-plusone,
.fb-like,
.tweetbutton, .linkedin {padding: 13px 12px 12px 15px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}
.custom .fb-like{background: #ECEEF5;border: 1px solid #9DACCE;margin: 2px 0 0 0;float: left;padding: 10px 6px 7px 8px;width: 178px;}
.custom .tweetbutton{background: #E8F3F9;border: 1px solid #A4CCE5;margin: 2px 0 0 8px;float: right;padding: 10px 4px 4px 8px;width: 100px;}
.custom #g-plusone{background: #F9F9F9;border: 1px solid #CCCCCC;margin: 2px 0 0 8px;float: right;padding: 10px 3px 4px 8px;width: 66px;}
.custom .linkedin{background: #F9F9F9;border: 1px solid #CCCCCC;margin: 2px 0 0 8px;float: right;padding: 9px 3px 5px 8px;width: 96px;}

Now you’re done!

UPDATE!
The result you got if using my code above is, two of the button (facebook & twitter) will appear on the frontpage. Please use this code instead of the above if don’t want the button on the frontpage.

Only change this line:

function fb_like() {
	?>
	<div class="fb-like"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=273645020698&amp;xfbml=1"></script><fb:like layout="button_count" href="<?php the_permalink(); ?>" send="true" width="178" show_faces="false" action="recommend" font="arial"></fb:like></div>
	<?php }
add_action('thesis_hook_after_post','fb_like');

function twitter_button() { ?>
   <div class="tweetbutton">
      <a href="http://twitter.com/share" data-count="horizontal" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>" data-via="[YOUR TWITTER USERNAME]">Tweet</a>
      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   </div>
<?php }

add_action('thesis_hook_after_post', 'twitter_button');

with this one..

function fb_like() { if (is_single()) { ?>
	<div class="fb-like"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=273645020698&amp;xfbml=1"></script><fb:like layout="button_count" href="<?php the_permalink(); ?>" send="true" width="178" show_faces="false" action="recommend" font="arial"></fb:like></div>
	<?php } }
add_action('thesis_hook_after_post','fb_like');

function twitter_button() { if (is_single()) { ?>
   <div class="tweetbutton">
      <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>" data-via="[YOUR TWITTER USERNAME]">Tweet</a>
      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   </div>
<?php } }
add_action('thesis_hook_after_post', 'twitter_button');

For other type of themes, please refer tutorial from Ariffshah.com

Tagged as: social sharing button, thesis, thesis framework, thesis tutorial