JUST 5 Steps to Create Social Media Icons & Share Counter with CSS3

5
1305
Steps to Create Social Media Icons & Share Counter

Social networking hubs like Facebook, Twitter, Google +, LinkedIn and many more has emerged as the most successful approach to promote a content or service. Every internet user wants to follow his beloved Brands, Authors and idols. Social networking websites helps the end users to connect with their favorite web pages and share the liking with their circle.

Whether it is a service providing website or an informational blog page; Social media icons are a part of every web design. Social Media icons are used to share the content on the social networking hubs and are also looked as a feedback collecting form for the author.

How to create social media icons for your website? Designing the Custom Social Media icons can be a complicated hassle for the beginners. To help everyone out there; with this post of mine I am explaining the simple steps to design Custom Social Media Icons in CSS3.

In this post we will design the social media icons and the sharing counters for Facebook, Twitter and Google+ profile. By following the basic algorithm behind the designing process; you can even extend the process further for more social networking platforms like Youtube, LinkedIn, Pinterest etc.

Step 1: Designing the Basic Button Layout

To design the social media buttons; we will start with designing the basic button shapes. Development of HTML5 is an easy and affordable process and hence everyone can make an attractive online presence with the trade. The HTML code for simple button shapes is provided below:

<html>

<head>

</head>

<a href=”#”>Tweet</a>

</div>

<a href=”#”>Like</a>

</div>

<a href=”#”>+1</a>

</div>

</html>

After defining the basic button shape; we will concentrate on shaping it as per the requirement in the proceeding steps. In the upcoming step we will use CSS to tweak the appearance of these icons.

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;

}

Steps to Create Social Media Icons & Share Counter

Till this step we had successfully designed the basic layout for the social media buttons and share counter. To finalize the desired basic look; we have to add the below provided CSS Code to the program.

.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: Styling the Buttons with CSS Elements

Step 2 concerns about the styling of the basic layout. In this step we will integrate the HTML code to the CSS element. I had provided the HTML code below which must be combined with the different share buttons you had designed. You can add the codes to the buttons as per their tag name; for example add “type_Twitter” for twitter style, “type_facebook” for the Facebook style and so on.

.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;

}

Steps to Create Social Media Icons & Share Counter

Step 3: Designing the Share Counter

At this step we will integrate the Share counter to the social media buttons. You can add the below provided HTML code to the buttons which are employed to display the social media counters.

.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: Finalizing the Design Interface

Up till this step you can see the actual interface of the social media buttons and we just need a few tweaks before finalizing the design. In this step we will add some basic styles and will fix Borders or Layout issue if any. Add the below provided code to the design to make it look more clean and fluid.

.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;

}

Steps to Create Social Media Icons & Share Counter

 Step 5: Linking the Counter with Social Website API

Congratulations! You had successfully designed the front End interface of the buttons till this step and now it’s time to make them functional. For this we have to use PHP.

Copy the below provided code and integrate this with your design. You have to replace the URL written (‘http://api.twitter.com/YOURPOST/PAGE’) after file_get_contents with the URL of your social media page/profile.

‘; $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’; }

}

?>

After saving the file with the name Social.php; you can now attach the social media buttons to the actual share counters. You have to paste this PHP code at the fake counter numbers which are located near your social media buttons.

Steps to Create Social Media Icons & Share Counter

Conclusion

I hope you had successfully added the social media icons on your website. Finding any error? Please feel free to share that with us in the comment section below. You can even share the snapshots of the icons if you had done some more creative tweaks in the CSS styling.

David Meyer is a professional blogger with years of experience in web development. He is currently working with CSSCHOPPER; A renowned name to hire Web Developer from India.  David is always keen to learn and share the latest web technology.

 

Previous articleList of the Best JavaScript and jQuery Books for novice & intermediates
Next articleBitcoin shows the potential of digital currency
Olawale Daniel is a business builder and psychologist, a network marketing professional, a world-class motivational speaker, a successful internet entrepreneur and a digital media strategist interested in all things mobile and digital — start-ups, media, branding. He started TechAtLast back in 2010 as a platform to quench his thirst for latest technologies. As a motivational speaker and author, Olawale has published several motivational and personal development books and he's currently working on "SUCCESS AHEAD - Don't Quit" which is billed to hit the stand by Q4 of the year. He writes regularly on his personal website on motivation and personal lifestyle and tips for network marketing success, OlawaleDaniel.com. His latest book on How to Sponsor More People in Your Network Marketing Business is still one of the best sellers in its category. He's presently working as a Health and Wellness consultant at BURN SLIM TRIM Inc., a firm that helps people regain their perfect lifestyle through state-of-the-art recent discoveries way back from nature. He's also the brain behind FOBCourse, a business university for startup entrepreneurs in Africa.

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.