Share Count buttons are tires on website, giving its content a smooth ride around the world. If don’t have social share buttons yet on your WordPress Blog, then I strongly recommend you to have them right away. Best way to add social button is either on the Article Landing Page or on the Blog Summary Page which we also call them as post teasers. Check out the screenshot below showing share button on teaser post.
Share Button in Thesis Theme Teaser
I have already written an article about Social Media share buttons for WordPress. If you haven’t read it, then you can check it out here. There are also plugin available for adding share count buttons, but if you are Thesis Theme owner then its far easier and no plugin dependency, ofcourse.
Here is a quick tutorial which will help you to add share count buttons in without plugin in Thesis Theme.
Step 1: Update Theme Theme
Before we begin with the article, I recommend you to safely upgrade thesis theme, whereas if you don’t have a copy of Thesis Theme then you can download thesis theme here. Move to next step, if you already have updated Thesis Theme Version.
Step 2: Share Button Code
Already decided which all Share button to add in blog summary page ? If not, then you can visit the link below to do so:
Social Share Button Code for WordPress Blog
In this example, we will add Facebook Like button and Twitter Share Button in Thesis Teaser. If you have selected button codes, then move to Step 3.
Step 3: Add Share Button in Thesis Teaser
All set for the action, below code will add social button in thesis teaser, copy-paste the code snippet in the custom_functions.php file.
Make sure you take full backup of custom_functions.php file using FTP before modifying it.
/*
Code: Share Buttons in Thesis Teaser
Author: Aky Joe
URL: www.thecreatology.com
*/
function share_button_joe(){?>
<?php if(!is_single() || !is_page()){?>
<div class="share-button">
<div data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-action="like" data-font="verdana"></div>
<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-via="thecreatology" data-related="akyjoe">Tweet</a>
</div>
<?php }}
add_action('thesis_hook_after_teaser','share_button_joe');
function footer_scripts_joe(){ ?>
<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_GB/all.js#xfbml=1&appId=390363454310194";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<?php }
add_action('thesis_hook_after_html','footer_scripts_joe');
Note: Make sure you replace @thecreatology with your twitter account.
Function name share_buttons_joe() embeds share buttons in Thesis Teaser whereas the function name footer_scripts_joe() are html5 scripts for share buttons.
In case you have your own list of share buttons, then simply put the code between the div container class tag share-button.
We’re Done
Once done updating custom_functions.php file, refresh your blog page to see the effect. You can also see demo site below.
Demo Site: Lets Create Something New
With this we come to end of this quick tutorial to add social share count buttons in Thesis Theme without Plugin. If you have any query, then post your feedback as comments below.