Friday, 2 May 2014

How to Create Custom Social Media Icons in CSS3

How to Create Custom Social Media Icons in CSS3

On almost every website, blog, magazine or business you come across on the internet; it has some kind social media content or buttons. Whether it be social sharing, profile links, or “liking”, “following”, etc. This tutorial will show you how to create custom social media icons step by step. So, lets begin!
 Social Media Icons 


 

STEP 1 – Creating the Buttons

To begin creating our social media buttons we will start with creating the actual button. Let’s start by adding the simple HTML code below for the button.
1
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
    <a class="share__btn" href="#">Tweet</a>
</div>
    <a class="share__btn" href="#">Like</a>
</div>
    <a class="share__btn" href="#">+1</a>
</div>
</html>
Now that we have added the basic HTML we can now add some style to it and start shaping out the buttons. The CSS below will be used as the border and style for the both the buttons and the share counter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
    font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 42px 40px;
}
a {
    text-decoration: none;
}
.share {
    display: inline-block;
    margin-right: 20px;
}
.share__count {
    background-color: #fff;
    border: solid 1px #a5b1bd;
    border-radius: 3px;
    /* add in vendor rules */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* add in vendor rules */
    color: #424a4d;
    float: left;
    font-weight: bold;
    margin-right: 10px;
    padding: 4px 10px;
    position: relative;
    text-align: center;
}
Social Media Icons
Now, we’re not quite finished creating the basic layout for both the share buttons and the share counter by adding the above code. We now need to add this basic CSS code to finalize and shape out the buttons.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.share_size_large > .share__count {
    display: block;
    float: none;
    font-size: 18px;
    margin-right: 0;
    margin-bottom: 12px;
    padding: 10px 0;
}
.share__btn {
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    /* add in vendor rules */
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
    /* add in vendor rules */
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

STEP 2 – Stylizing The Share Buttons

Since we have finished creating the basic button layouts we can now begin stylizing them by inserting the HTML code to point to the CSS element.
Let’s add the HTML code below to each of our share buttons. Now, remember; we will be adding style to the buttons through the CSS code we will be adding later. If you want a Facebook share button style; then add “type_facebook”. If you would like a Twitter style share button, add “type_twitter”, and so on. You can always customize the colors and styles of the different buttons based on your social media profiles.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.share_size_large > .share__btn {
    padding: 5px 0;
    width: 100%;
}
.share_type_twitter > .share__btn {
    background-color: #4099FF;
}
.share_type_facebook > .share__btn {
    background-color: #3B5999;
}
.share_type_gplus > .share__btn {
    background-color: #F90101;
}
Social Media Icons

STEP 3 – Creating The Share Counter

We now want to add the share counter to the social media buttons. Let’s start by adding the small and simple HTML code to each and one of our buttons in which we would like to display the social media counters. You can always implement social sharing counters into your buttons; Which I have showed you how to do in “Step 5″.
Now, we will want to add some style to the social counters. Basically, this will add some layout to the counter box.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.share__count:before, .share__count:after {
  content: '';
  display: block;
    height: 0;
    top: 50%;
  position: absolute;
    right: -14px;
  width: 0;
    margin-top: -6px;
}
.share_size_large > .share__count:before, .share_size_large > .share__count:after {
  content: '';
  display: block;
    height: 0;
    left: 50%;
  position: absolute;
    top: auto;
  width: 0;
}

STEP 4 – Finishing the Social Media Buttons Style

We’ll now finish the social media buttons style off by finalizing the social counters by adding style to them and adding a small pointer toward the actual buttons. The following code also fixes any border and layout problems your buttons may have.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.share__count:before {
    border: solid 7px transparent;
    border-color: transparent transparent transparent #a5b1bd;
}
.share_size_large > .share__count:before {
  border-color: #a5b1bd transparent transparent transparent;
    bottom: -14px;
  margin-left: -7px;
}
.share__count:after {
    border: solid 6px transparent;
    border-color: transparent transparent transparent #fff;
    right: -12px;
    margin-top: -5px;
}
.share_size_large > .share__count:after {
  margin-left: -6px;
  bottom: -12px;
  border-color: #fff transparent transparent transparent;
}
Social Media Icons

STEP 5 – Adding The Working Counter

Since we have finished up the button and counter design it’s time to make the counter actually usable. For this, we will be using PHP. Now, if you want the counter to work properly, go grab the Facebook/Twitter/Google Plus API counter for shares, likes, comments, etc, from the social network website and replace the URL after file_get_contents with your API URL.
The PHP code is below, just be sure to name your file social.php if you don’t change the code I provided.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'; $fbend = '';
        $fbpage = $facebook;
        $fbparts = explode($fbbegin,$fbpage);
        $fbpage = $fbparts[1];
        $fbparts = explode($fbend,$fbpage);
        $fbcount = $fbparts[0];
        if($fbcount == '') { $fbcount = '0'; }
}
function twit_count() {
        global $tcount;
        $twit = file_get_contents('http://api.twitter.com/YOURPOST/PAGE');
        $begin = ''; $end = '';
        $page = $twit;
        $parts = explode($begin,$page);
        $page = $parts[1];
        $parts = explode($end,$page);
        $tcount = $parts[0];
        if($tcount == '') { $tcount = '0'; }
}
?>
Since we have now created the social.php file, we can now link the social media buttons to the actual counter. Place the small PHP code where your fake counter numbers are located near your button. Be sure to replace fbcount with the correct social name in the PHP file.
Creating the counter with Google+ is a bit different, and a bit difference for the most part. Just add the following code to where you want to display the counter numbers. With, the Google+ counter you may want to make the layout for the counter a bit wider; which will just make it look a bit better, since the Google+ counter is different than the Twitter and Facebook API.
Social Media Icons
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)