Making Your Own Social Networking Sites Button

Social networking sites are helping bloggers to increase traffic on their blog. And according to many SEO experts, social network is the new SEO. Social share buttons, social like buttons and social follow buttons can be found on every blog nowadays.

Tutes Inside- Making You Own Social Buttons Guide

Although there are many ways you can make your social media buttons and I already have posted many articles to help you with that if you haven't read them then you can read them here:-

Social media gadgets for blogger

So I was thinking of making an article where I can educate people to make their own buttons for these sites. Through this article you would be able to understand how these buttons are made and how you can customise them give your personalised look.

For those who have complicated life and wish to make their buttons as soon as possible then you can follow my other articles to make your buttons in less time.

Social share buttons for blogger
Social follow buttons for blogger

For those who want to know how to make their own buttons this article is specially for you.

Social media buttons ultimate guide


Now we have two types of buttons automatic and manual button.
Automatic buttons are very easy to make and you just need to copy the codes from each official developer site and paste them in your blog area (HTML/Javascript gadget) but you can't style them as you want.

Quick links to developer sites

Facebook
Twitter
Google+
Instagram
YouTube

And for manual, every social media button has two sides. One front and other is back. Front is what people see and back usually remains same.

To change the back you just need to paste the link to your page/account/channel. And for the front, you can choose any of the following methods

Using image as your buttons


You can search for some cool images or you can make your own images in any image editor like I use PhotoShop for this purpose.

When you have your images ready to make your buttons then you can upload them in post editor to grab their links.

Now you just need to place them on your blog. You can use the 'Image' gadget or 'HTML/Javascript' gadget for this purpose.


You can play around with codes here to give the best look.
You just need to replace image links with your links and # with like or follow the link.

Using font awesome icons


To me, this is the best way and this is the way developers use. If you don't know font awesome icons then visit their website and see the magic.
You can use any of their icon on your blog for free but before placing any of the icons you need to place the stylesheet in your template. Here's the link just copy it and paste into HTML/Javascript gadget

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


You can use any font awesome icon and you just need to add one more line of the button to add one more button.

To help you understand easily I've styled every button in the different section.
To change the hover style you can add your own hover style.

Well, this is enough for one article and I'll be posting some more articles on how to design them. You can subscribe my blog for more articles like these.

Don't forget to show me your buttons.

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

0 comments:

Don't forget to check 'Notify me' box to get notification of reply.