Add Twitter and Facebook horizontal share buttons to thesis teaser box (Home Page)

Facebook and twitter share buttons are vital for a blog to spread via social medias.We have written many tutorials about thesis theme customization.In this post we are going to share a  tutorial on how to add Twitter and Facebook horizontal share buttons to thesis teaser box (Home Page) like the new Shoutmeloud thesis theme

Here is a screenshot of the sharing buttons

1.First open custom_functions.php file by going to /wp-content/themes/thesis_18/custom folder using an FTP client

2.Backup the custom_functions.php and custom.css files and then continue with these steps

3.Add the below php code to the custom_functions.php file to add the Facebook and twitter buttons and save the file.Don’t forget to change the letter in green to your site name.

function tweet_button_home() {
 ?>
 <div class="mtsshare">
 <div class="tweet">
 <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"
 data-via="mytechshout">Tweet</a><script type="text/javascript"
 src="https://platform.twitter.com/widgets.js"></script>
 </div>
 </div>
 <?php }
 add_action('thesis_hook_after_teaser', 'tweet_button_home');
 function facebook_button_home() {
 ?>
 <div class="mtsshare">
 <div class="flike">
 <iframe src="https://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID));
 ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light"
 scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px;
 height:20px"></iframe></div>
 </div>
 <?php }
 add_action('thesis_hook_after_teaser', 'facebook_button_home');

4.Then add the below css code to the custom.css file in the same thesis custom folder and save it

.mtsshare {    display: block;    float: left;    margin: 8px 10px 20px 0;}
.tweet {    float: left;    height: 20px;    margin: 0 20px 0 0;    overflow: hidden;    width: 100px;}
.flike {    float: left;    height: 20px;    margin: 0 15px 0 0;    width: 75px;}

5.Now refresh your home page to see the twitter and facebook share buttons in action.

To add twitter and other share buttons to posts , I suggest you to read this post

Add twitter,Digg,Facebook share buttons to wordpress thesis

Hope you liked this thesis customization tutorial..For more tutorials like this ,read our

Thesis Customization tutorials

Do follow us to receive updates about thesis theme and unique WordPress tips.

If you have any errors installing the share buttons in thesis theme or anything about thesis customization,ask your questions via comments ,we are here to help.