Facebook,twitter and other social networking sites can be used to drive targeted traffic to your blog.Here is how to Add twitter,Digg,Facebook share button at one go using this thesis customization tutorial.
Adding twitter,Digg,Facebook share buttons:
#Open your custom_functions.php of thesis theme by using Ftp client Filezilla or through the Custom File Editor under Thesis options
#Backup your custom_functions.php file by downloading it to your computer.
#Now copy and paste the below code into the php file to add twitter,digg,facebook,google plus share bottons like our site just to the right side of the post title
/*Adding twitter button */ function add_twitter_btn () { if (is_single()) { ?> <div style="float:right; padding-left:3px;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mytechshout" data-related="technoblog007:Official blog handle must follow">Tweet</a><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script></div> <?php } } add_action('thesis_hook_before_headline','add_twitter_btn'); /*Adding facebook share button */ function fb_share() { if (is_single()) { ?> <div class="fb_share"> <a name="fb_share" type="box_count" share_url="<?php the_permalink() ?>" href="https://www.facebook.com/sharer.php">Share</a> <script src="https://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <?php } } add_action('thesis_hook_byline_item','fb_share'); /*Adding digg button */ function Digg_button() { if (is_single()) { echo '<div style="float:right; padding-left: 5px;"><script type="text/javascript" src="https://tweetmeme.com/i/scripts/button.js"> </script><script src="https://digg.com/tools/diggthis.js" type="text/javascript"></script></div>'; } } add_action('thesis_hook_before_headline', 'Digg_button'); /*Adding google +1 button */ function google_plus_one_integration() { ?> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <?php } add_action('thesis_hook_before_headline','google_plus_one_integration'); function google_plus_one_output() { if (is_single()) { ?> <div class="plusone"> <g:plusone size="tall"></g:plusone> </div> <?php } } add_action('thesis_hook_before_headline', 'google_plus_one_output');
Customization through css:
#Now add the below css code into your custom.css file for floating facabook share and google plus buttons to the right
/*Like Button*/ .fb_share{ float: right; position: relative;}.teaser-like2 { float: right; position: relative;} /*google +1 Button*/ .plusone{ float: right; position: relative;}
#Now save your files
#Now the share buttons will be aligned to the right of the post title.
#You have added the share buttons to your thesis theme successfully..
Also read:
Add google plus one to thesis theme
Hope you liked this Thesis Customization Post.Do subscribe to get more updates about Thesis Customizations.
Do comment 🙂
Awesome info, thank you for posting this! 🙂 I will be adding this today to my site.