Navigation:

social media buttons all together

If you understand how using social media can bring traffic to your website, another thing to keep in mind is that using your website, you can help build up your social network with social media buttons.

A visitor that finds your website might like the products or services that you offer, but might not need them just yet. Instead of relying on them to hopefully bookmark your website and remember to return at another time when they are in need of your services, having them add you to their social network can help you stay relevant.

In this guide I'll try to cover some of the many ways you can help add social media buttons to your website to easily allow visitors to start following you on their favorite social networks.

What are Social Media buttons?

I doubt you've been able to navigate the Internet much over the last few years without running into some form of social media buttons. These are basically just small icons that you place on your website linking to your social media networks.

As a matter of fact, if you scroll to the bottom of this article, you should see a Facebook, Google+, and Twitter like buttons. That way if you enjoy this article and want some of your friends on one of these social networks to also read it, you can easily share it with them

Typically there are 2 main types of social media buttons, ones that simply link to your social profiles, and then ones that keep track of how many likes, followers, shares you have on that page or on your website.

How to add Social Media buttons to HTML

In the simplest form, if you just have some HTML pages making up your website, you can easily add social media buttons to these pages with some simple code from each social network.

For the examples below I'll just be using this quick dummy page I created on example.com:

example site no social media yet

Facebook buttons

Adding some Facebook social media buttons to your website can help you spread your message via word of mouth to your visitor's friends. They have both a like button you can use on any page, and a like box you can use if you have a Facebook page for your business.

Facebook Like button

Visit the Facebook Like button, page and simply fill in some info for your button then click Get Code

facebook click get code for like button

Select the JavaScript code from the top box, and paste it in your HTML page right after the <body> tag.

Next select the HTML from the bottom box, and paste it where you want the button to display on your page.

insert facebook html code in html page

You should now see your Facebook like button on your page where you placed it:

example site with facebook like button

Facebook Like box

Visit the Facebook Like box, page if you already have a Facebook page you're trying to promote on your website. Then click the Get Code button after filling in your page details.

facebook click get code for like box

Since we already have the JavaScript in our HTML page from the like button above, now you just need to copy the like box's HTML and paste it on your page where you want it to display.

insert facebook html code in html page for like box

Now you should see both the Facebook like button, and like box on our page:

example site with facebook like button and like box

Google+ buttons

Google+ is one of the younger social media networks, but it's already surpassed Twitter and is on track to give Facebook a run for their money as well. Google lets you use a various array of buttons, from a +1 button you can use on any page, a badge to get people to follow you, a follow button, and finally a share button as well.

Google+ +1 button

Visit the Google+ +1 button page, and fill in all the details for your button.

Next copy the resulting code and paste it into your page.

insert googleplus html code in html page for +1 button

You should now see your Google+ +1 button where you placed the code on your page:

example site with googleplus +1 button

Google+ badge

Visit the Google+ badge button page, and customize your badge to your liking.

Then copy the resulting code you get and paste it into your page.

insert googleplus html code in html page for badge

Now you'll see our new Google+ badge right beside our +1 button:

example site with googleplus +1 button and badge

Google+ follow button

Visit the Google+ follow button page, and adjust the size and settings.

Then you'll want to copy the code and paste it into your page.

insert googleplus html code in html page for follow button

Now we've got a Google+ +1 button, a badge, and the new follow button we just created!

example site with googleplus +1 button badge and follow button

Google+ share button

Visit the Google+ share button page, and choose your settings.

Next you'll want to copy the code and paste it into your page where you'd like the button.

insert googleplus html code in html page for share button

Now we've got our Google+ +1 button, a badge, a follow button, and the new share button we just created!

example site with googleplus 1 button badge follow and share button

Twitter buttons

With Twitter they offer 4 different types of social media buttons for your website. There is the ability to share a link, a follow button, a Hashtag button, and finally a mention button.

Twitter share a link button

Visit the Twitter share a link button page, then type in all the details for the page you'd like to share.

Then you need to copy and paste the code into your page where you'd like the button.

insert twitter html code in html page for share a link

Now we can see our Twitter share a link button, and if you click it shows the details we typed in.

example site with twitter share a link button

Twitter follow button

Visit the Twitter follow button page, and select the Twitter handle you'd like the button to follow.

Then copy the resulting HTML code and paste it into your webpage where you'd like the follow button.

insert twitter html code in html page for follow button

Now we can see our Twitter share a link button, and the new follow button we just created. If you click on our new follow button, you can see that it will bring up the Twitter handle that we entered into the form.

example site with twitter share a link and follow button

Twitter hashtag button

Visit the Twitter hashtag button page, and fill out the details you'd like to use with your hashtag button.

Next copy the HTML code then paste it where you want the button on your site.

insert twitter html code in html page for hashtag button

We've now got our Twitter share a link button, the follow button and the new hashtag button we created. When you click on it, you'll see the hashtag and details we typed in, in the pop-up window.

example site with twitter hashtag button

Twitter mention button

Visit the Twitter mention button page, then fill out details you'd like to use.

Then copy the resulting HTML code and paste it where you'd like the button to display on your site.

insert twitter html code in html page for mention button

Now we have the Twitter share a link button, the follow button, the hashtag button, and the new mention button we created. When you click on it, the message you typed in will be presented for you to submit.

example site with twitter mention button

You should hopefully now have a good grasp on how to add social media buttons to your website. This guide will continue to be updated with how to also add these type of buttons to various content management systems. If you needed any help in the meantime with how to do this, please leave a comment below!

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-03-24 2:54 am

Hi

Great stuff. U made the life very easy. Keep it up. 

My chrome is not showing all the social media icons where as all other browsers are showing the result correctly, Can u tell me why?

Staff
9,384 Points
2014-03-24 10:13 am
It sounds like it may just be a caching issue. Try clearing your browser cache.
n/a Points
2014-04-09 9:07 pm

Hi

I added a facebook like button to my  web-page. Pressing the like button returns a like for Inmotion Hosting instead of my website. How can I rectify this problem ?

Cheers

Terry 

Staff
17,716 Points
2014-04-09 9:44 pm
Hello Terry,

You need to generate the Facebook code using YOUR domain URL not, InMotion's. Please go through the instructions above and replace the InMotion URL with yours and it will go to the URL of your choice.

Regards,
Arnel C.
n/a Points
2014-08-16 9:35 pm
good
n/a Points
2014-11-09 3:55 pm

I have pasted the code the display like button and box. But still not getting any thing on my page. I have one doubt. I have not publist the site . its still in my local system . So is it due to that. do we have live website to see the button appearing properly ? 

Staff
10,207 Points
2014-11-10 10:26 am
Hello Harinder,

Thank you for your question. It is difficult for me to say without seeing the site published, but you should still be able to test it.

What kind of environment/software are you testing with?

You may have to allow the software out of your firewall to communicate with the social media networks.

Thank you,
John-Paul

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

7 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!