Custom Icons for Facebook, Twitter, and others

What if I wanted custom icons for Facebook, Twitter, Google or others?

Facebook Twitter Google Plus

As you may know, companies do not allow you to substitute their API icons with your own custom icons in a number of contexts as LIKE and FOLLOW. To tell the truth, it is understandable that they would want to keep some control on their product image.

You can find the code necessary to add FB LIKE here, twitter FOLLOW here, and Google plus here.

However as you browse the net, I am sure you have seen customized icons that though still the official FB or Twitter look are not the typical icons that they should be (see social media icon example below.)

So, if you are like many and want to add your custom icons, there is a way.

In Edge Animate, you might be tempted to use hide() and show() or display on or off for the mouseenter and mouseleave events. Unfortunately this will not work as the API code for each icon interfers with it. The way to go, as mentioned to me by Joel, another great contributor to the Adobe forum, it is better to use:

.css("display","none");

and toggle the images.

You will first need to copy the code from the social media API. Note that you will have to have a Facebook account in order to copy the necessary code from the developper's site. Seems to be overkill though. For twitter, you do not need to be logged in to get the code. Make sure the code order is respected because if you load the iframes before the mouseover code, then it will not work properly.

When you are using only one social media icon, you can use the code directly from the social media developper's site. For example below are the respective code for Facebook.

 
//Facebook SDK Code
(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/sdk.js#xfbml=1&appId=1439255586347149&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))

If you want to add several social media icons as in this example, then there is a better way. Joel directed me to a site where a smart programmer, Nicholas Gallagher, combined the code for several social media (scroll down on the page here to social media example).

 
 (function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };

    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('http://apis.google.com/js/plusone.js');
    // Facebook SDK
     add("//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1439255586347149&version=v2.0",'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

We now need to load the SDK icons in their respective containers. Each container is a transparent rectangles the same size at the custom icon. These transparent rectangle as simply named facebook, twitter, and google. The custom icons are png files and are named BFIcon, twitterIcon, and googleIcon.

Facebook


sym.$("facebook").html('<div class="fb-like" data-href="https://www.facebook.com/edgeherocommunity" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div<')

Twitter


sym.$("twitter").html('<a href="https://twitter.com/mjpagedesign" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @YourTwitterHandle</a>')
sym.$("twitter").css("display","none");

Google


sym.$("google").html('<div class="g-plusone" data-annotation="inline" data-width="300" data-href="//plus.google.com/u/0/109372329780729324584" data-rel="author"></div>')

In animate, select both icons one social media at a time and give them a class name. I chose facebook, twitter, and google but any other name will do as long as you remember to change the class name in the code.

In order to show the original icon or hide them on mouseentre and mouseleave, you will need to use the jquery toggle(); While in the past you had to write your own code to toggle between 2 options, toggle(); makes things easier. I often forget to use it. Since the custom icons are visible at load, they will be hidden on mouseenter while the sdk icons will be made visible. Then, on mouseleave the opposite will happen.

Next, you will need to hide the SDK icon so just your custom icon will show. For this, do not use the Edge Animate internal display on off but use the following code for Twitter and Google.


// hide the Twitter SDK icon
sym.$("twitter").css("display","none");

// hide the Google SDK icon
sym.$("twitter").css("display","none");

There seems to be a bug in the Facebook API and I had to use a different approach for it. I decided to keep the toggle() code commented out in the file in case Facebook gets their act together.


// hide the Facebook SDK icon
sym.$("facebook").css("opacity","0");

Facebook using hide() and show():


// toggle the icons on mouseover and mouseout
sym.$("BFIcon").on("mouseenter",function(){
	sym.$("BFIcon").hide();
	sym.$("facebook").css("opacity",1);
});
//sym.$("facebook").on("mouseleave",function(){sym.$(".facebook").toggle();});
sym.$("facebook").on("mouseleave",function(){
	sym.$("BFIcon").show();
	sym.$("facebook").css( "opacity",0);
});

Twitter and Google


// toggle the twitter icons on mouseover and mouseout
sym.$("twitterIcon").on("mouseover",function(){sym.$(".twitter").toggle();});
sym.$("twitter").on("mouseout",function(){sym.$(".twitter").toggle();});	

// toggle the google icons on mouseover and mouseout
sym.$("googleIcon").on("mouseover",function(){sym.$(".google").toggle();});
sym.$("google").on("mouseout",function(){sym.$(".google").toggle();});

Now you are done! Test and see if everything works as expected.

The complete code is as follows.


(function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };

    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('http://apis.google.com/js/plusone.js');
    // Facebook SDK
    //add("//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=1439255586347149&version=v2.0");
    add("//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0");
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

// load and hide the Facebook SDK icon
sym.$("facebook").html('<div class="fb-like" data-href="https://www.facebook.com/edgeherocommunity" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div<')
/************** Facebook bug - keep for later use *****************/
//sym.$("facebook").css("display","none");
//toggle the icons' visibility 
//sym.$("BFIcon").on("mouseenter",function(){sym.$(".facebook").toggle();});
//sym.$("facebook").on("mouseleave",function(){sym.$(".facebook").toggle();});
/*****************************************************************/
// work around to show Facebook Icon
sym.$("facebook").css("opacity","0");
//sym.$("BFIcon").on("mouseenter",function(){sym.$(".facebook").toggle();});
sym.$("BFIcon").on("mouseenter",function(){
	sym.$("BFIcon").hide();
	sym.$("facebook").css("opacity",1);
});
//sym.$("facebook").on("mouseleave",function(){sym.$(".facebook").toggle();});
sym.$("facebook").on("mouseleave",function(){
	sym.$("BFIcon").show();
	sym.$("facebook").css( "opacity",0);
});	
// Load and hide the twitter SDK icon
sym.$("twitter").html('<a href="https://twitter.com/mjpagedesign" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @YourTwitterHandle</a>')
sym.$("twitter").css("display","none");
// Toggle the icons' visibility
sym.$("twitterIcon").on("mouseenter",function(){sym.$(".twitter").toggle();});
sym.$("twitter").on("mouseleave",function(){sym.$(".twitter").toggle();});	
// load and hide the google SDK icon
sym.$("google").html('<div class="g-plusone" data-annotation="inline" data-width="300" data-href="//plus.google.com/u/0/109372329780729324584" data-rel="author"></div>')
sym.$("google").css("display","none");
// Toggle the icons' visibility
sym.$("googleIcon").on("mouseenter",function(){sym.$(".google").toggle();});
sym.$("google").on("mouseleave",function(){sym.$(".google").toggle();});

Download Sample

Follow @mjpagedesign

Your one-stop web everything MJPage Design

Custom Icons for Facebook, Twitter, and others