Custom Social Share Buttons with Counter in Genesis

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

wprocket

As StudioPress fanboy, I always keep doing my practice with the Genesis Framework. In a recent project, we have tried trimming down the 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 a counter in your Genesis Framework child theme.

This article is one of the posts of the 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 a counter. And I have found the jumboshare jQuery plugin. I use this plugin in this tutorial. Here is the screenshot of the custom social share buttons with the counter in Genesis Framework.

Custom Social Share Buttons with Counter in Genesis

Let’s get hands dirty with some code.

/*
* JumboShare jQuery Social Share Buttons
* @package StudioPlayer
* @link https://github.com/mycodingtricks/jumboShare
*/
(function($){
    $.fn.jumboShare = function( options ) {
            var cssId = 'fontawesomeCss';  // you could encode the css path itself to generate id..
            if (!document.getElementById(cssId))
            {
                var head  = document.getElementsByTagName('head')[0];
                var link  = document.createElement('link');
                link.id   = cssId;
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css';
                link.media = 'all';
                head.appendChild(link);
            }
        var rand = Math.floor((Math.random() * 1000) + 1);
        var settings = $.extend({
            // These are the defaults.
            url:window.location.href,
            text:document.title,
            twitterUsername:"rainastudio",
            id: rand,
            total: 0,
            position: 'append' //append|prepend
        }, options );
        // Greenify the collection based on the settings variable.
        this.each(function(){
          var elem = $(this);
          switch(settings.position){
              case 'append':
                  elem.append(init());
                  break;
              default: 
                  elem.prepend(init());
                  break;
          }
          $.getScript("//assets.pinterest.com/js/pinit.js");
          getCount();
        });
        function init(){
         var code = "<div class='mct_jumboShare' id='jumboShare_"+settings.id+"'>"+
            "<div class='mct_jumboShare_container'>"+
               "<div class='mct_jumboShare_counter' id='jumboShare_counter_"+settings.id+"'>"+
                  "0"+
               "</div>"+
               "<div class='mct_jumboShare_buttons' id='jumboShare_buttons_"+settings.id+"'>"+
                "<a target=_blank rel=nofollow href='https://www.facebook.com/sharer.php?u="+encodeURIComponent(settings.url)+"&t="+encodeURI(settings.text)+"' class='jumboShare_btn facebook'><span class='jumboShare_btn_text'><span class='fa fa-facebook'></span><span class='ct_text'>Share</span></span></a>"+
                "<a target=_blank rel=nofollow href='https://twitter.com/intent/tweet?via="+settings.twitterUsername+"&url="+encodeURIComponent(settings.url)+"&text="+encodeURI(settings.text)+"' class='jumboShare_btn twitter'><span class='jumboShare_btn_text'><span class='fa fa-twitter'></span><span class='ct_text'>Tweet</span></span></a>"+
                "<a target=_blank rel=nofollow href='https://plus.google.com/share?url="+encodeURIComponent(settings.url)+"' class='jumboShare_btn google'><sapn class='jumboShare_btn_text'><span class='fa fa-google-plus'></span><span class='ct_text'>Share</span></span></a>"+
                "<a target=_blank rel=nofollow href='https://www.linkedin.com/cws/share?token&isFramed=false&url="+encodeURIComponent(settings.url)+"' class='jumboShare_btn linkedin'><span class='jumboShare_btn_text'><span class='fa fa-linkedin'></span><span class='ct_text'>Share</span></span></a>"+
                "<a rel=nofollow href='https://www.pinterest.com/pin/create/button' data-pin-custom='true' data-pin-do='buttonBookmark' class='jumboShare_btn pinterest'><sapn class='jumboShare_btn_text'><span class='fa fa-pinterest'></span><span class='ct_text'>Pin It</span></span></a>"+
                "<a target=_blank rel=nofollow href='https://buffer.com/add?url="+encodeURIComponent(settings.url)+"&text="+encodeURIComponent(settings.text)+"' class='jumboShare_btn buffer'><span class='jumboShare_btn_text'><span class='fa fa-buffer'></span><span class='ct_text'>Buffer</span></span></a>"+
            "</div></div>";
          return code;
        }
        function convertNumber(n){
            if(n>=1000000000) return (n/1000000000).toFixed(1)+'G';
            if(n>=1000000) return (n/1000000).toFixed(1)+'M';
            if(n>=1000) return (n/1000).toFixed(1)+'K';
            return n;
        }
        function add(n){
            settings.total = settings.total+n;
        }
        function updateCounter(){
          $("#jumboShare_counter_"+settings.id).html(convertNumber(settings.total)+"<br><span class='total-text'>Shares</span>").fadeIn();
        }
        function getCount(){
            var $this = this;
            $.getJSON('https://count.donreach.com/?url='+encodeURIComponent(settings.url)+'&callback=?',function(d){
                add(d.total);
                updateCounter();
            });
            $.getJSON("https://api.bufferapp.com/1/links/shares.json?callback=?&url="+encodeURIComponent(settings.url),function(data){
                add(data.shares);
                updateCounter();
            });
        }
        return this;
    };
 
}(jQuery));

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 it. Add the below code into functions.php file of your child theme to call the js file in the footer.

// Include jumboshare scripts.
add_action( 'wp_enqueue_scripts', 'studio_player_jumboshare_scripts' );

function studio_player_jumboshare_scripts() {
    if ( !is_admin() ) {

    // Social Share JS.
    wp_register_script( 'app-socail-share-js', get_stylesheet_directory_uri() .'/js/jumboShare.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
    wp_enqueue_script( 'app-socail-share-js' );

    }

}

Add CSS code for buttons into style.css

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

wprocket-728x98_Black

/*

JumboShare social share.

---------------------------------------------------------------------------------------------------   */

.mct_jumboShare {
position: relative;
display: inline-block;
width: 100%;
border-bottom: 1px solid #dfdfdf;
border-top: 1px solid #dfdfdf;
padding: 20px 0 20px 0;
margin: 0 0 20px 0;
float: left;
background: #ffffff;
}
.mct_jumboShare * {
box-sizing: border-box;
}
.mct_jumboShare_container {
display: flex;
}
.mct_jumboShare_counter {
font-weight: 700;
padding-right: 20px;
margin-right: 20px;
display: inline-block;
border-right: 1px solid #dfdfdf;
padding: 7px 20px 5px 5px;
margin: 0 20px 0 0;
color: #333;
font-family: 'Proxima Nova', 'proxima-nova', Arial, Helvetica, sans-serif;
text-transform: uppercase;
vertical-align: middle;
text-align: center;
line-height: .8;
}
.mct_jumboShare_counter .total-text {
color: #b1a9a5;
font-size: 12px;
font-weight: 700;
}
.mct_jumboShare_counter div {
position: relative;
font-size: 18px;
line-height: 18px;
bottom: 2px;
font-weight: 100;
}
.mct_jumboShare_buttons {
height: 100%;width: 100%;
}

.mct_jumboShare_buttons a {
margin-right: 10px;
float: left;
}
.mct_jumboShare_buttons a:hover{
border-radius:5px;
text-decoration: none;
}

.jumboShare_btn {
cursor: pointer;
text-decoration: none;
position: relative;
padding: 8px 12px;
border-radius: 3px;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
border: 1px solid rgba(0, 0, 0, 0.07);
color: #fff;
font-size: 14px;
background: #2d2d2d;
transition: all 0.3614s ease-in-out;
-webkit-transition: all 0.3614s ease-in-out;
-moz-transition: all 0.3614s ease-in-out;
-o-transition: all 0.3614s ease-in-out;
}
.jumboShare_btn:hover, .jumboShare_btn:focus{color: #fff;}

.jumboShare_btn.facebook {
background: #3a589e;
border: 1px solid #3a589e;
}
.jumboShare_btn.twitter {
background: #55acee;
border: 1px solid #55acee;
}
.jumboShare_btn.google {
background: #DD5346;
border: 1px solid #DD5346;
}
.jumboShare_btn.linkedin {
background: #0077b5;
border: 1px solid #0077b5;
}
.jumboShare_btn_text .fa {
padding: 0 10px 0 0;
font-size: 15px;
position: relative;
top: 0px;
}
.jumboShare_btn.pinterest {
background: #BD081B;
border: 1px solid #BD081B;
color: #fff !important;
}
.jumboShare_btn.buffer {
color: #2d2d2d;
background: #fff;
border: 1px solid #2d2d2d;
}
.jumboShare_btn.buffer .fa {
background: url(images/buffer-icon.png);
background-size: contain;
background-repeat: no-repeat;
width: 15px;
height: 15px;
top: 3px;
margin-right: 10px;
}
.jumboShare_mct {
position: absolute;
right: 0px;
top: 15px;
background: rgba(0,0,0,0.8);
color: #fff;
text-decoration: none;
padding: 2px 4px;
font-family: cursive;
font-size: 9px;
}
@media screen and (max-width: 479px) {
.mct_jumboShare_counter div{
font-size: 17px;
line-height: 17px;
}

/* .jumboShare_btn_text{display:none} */
/* .mct_jumboShare_buttons a{width:32px;height:32px;float: none;display: inline-block;text-align: center;} */
.mct_jumboShare_buttons{text-align:left}
/* .jumboShare_btn{padding-right:0px;margin-right:5px !important;} */
}
@media only screen and ( max-width: 700px ) and ( min-width: 320px ) {

.jumboShare_btn_text .fa {
padding-right: 0 !important;
}

.jumboShare_btn.buffer .fa {
margin-right: 0 !important;
}
}

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.

The final step, get social share buttons live

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

// Add social share div into entry_header.
add_action('genesis_entry_header', 'social_share_div_header' );

function social_share_div_header() {
    if ( ! is_archive() && ! is_home() ){
        echo '<div id="jumboShare"></div>';
    } else {
        return;
    }
}

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

Conclusion

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

You will love The following tutorials:

GenesisPro728x90

Facebook
Twitter
LinkedIn
Pinterest
Tumblr
Anwer Ashif

Anwer Ashif

Founder of RainaStudio. Help businesses and individuals to create and outstand their online presence. Our success rate is measurable. Our blog served all around the world and counting.

3 thoughts on “Custom Social Share Buttons with Counter in Genesis (RainaStudio Map 101)

  1. Wow! Great Suggestion. I have installed the genesis theme in my site changing the canvas theme. I am looking this type of information. Hope your suggestion will improve my site. Thanks Bro

Leave a Reply

Your email address will not be published.

Want to speed up WordPress site?