Custom Social Share Buttons with Counter in Genesis
2

Custom Social Share Buttons with Counter in Genesis (RainaStudio Map 101)

As StudioPress fanboy, I always keep doing my practice with Genesis Framework. In a recent project, we have tried trimming down WordPress plugins list as much as possible. So, we have written a lot of custom functions for built-in features. In this post today you’ll learn how you add custom social share buttons with counter in your Genesis Framework child theme.

This is one of the posts of RainaStudio Map 101 blog series. You can check out the previous posts of this series from the unordered list below.

Genesis Tutorial: Add Custom Social Share Buttons with Counter

First, I have searched the best jQuery social share buttons with counter. And I have found the jumboshare jQuery plugin. I use this plugin in this tutorial. This is the screenshot of the custom social share buttons with counter in Genesis Framework.

Custom Social Share Buttons with Counter in Genesis

Let’s get hands dirty with some code.

Download or create a jumboshare.js file in your child theme js directory. And add the code above into the file. You can change or modify the username where twitterUsername:"rainastudio" with your website’s Twitter username.

Enqueue JumboShare js file to functions.php

Save the file after updating. Add the below code into functions.php file of your child theme to call the js file in the footer.

Add CSS code for buttons into style.css

Add the following CSS code to your style.css file of Genesis child theme.

Due to FontAwesome doesn’t have Buffer icon, we need to put a Buffer icon file with the name buffer-icon.png into child-theme/images directory. You can download the icon file from here.

Final step, get social share buttons live

Next, we need echo some HTML markup into genesis_entry_header. Let’s add following PHP functions to your child theme’s functions.php.

Check out your site’s single post and pages to see social share buttons with the counter. Hope you will see like the demo screenshot included at top.

Conclusion

Share your website content on social media network using custom social share buttons. Ask anything you need to help with, I will be in touch within hours. Leave your feedback for this tutorial using the form below. I will catch you. 🙂

  • Reza says:

    the button does not appear bro.

  • >

    Download 
    Studioplayer Genesis Child Theme Free!

    Rock and solid mobile first design child theme with native option panel.

    arrow-circle-o-down