Adding Social Media buttons to your website
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:
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
Next select the HTML from the bottom box, and paste it where you want the button to display on your page.
You should now see your Facebook like button on your page where you placed it:
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.
Now you should see both the Facebook like button, and like box on our page:
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.
You should now see your Google+ +1 button where you placed the code on your page:
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.
Now you'll see our new Google+ badge right beside our +1 button:
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.
Now we've got a Google+ +1 button, a badge, and the new follow button we just created!
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.
Now we've got our Google+ +1 button, a badge, a follow button, and the new share button we just created!
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.
Now we can see our Twitter share a link button, and if you click it shows the details we typed in.
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.
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.
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.
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.
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.
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.
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!
2014-03-24 2:54 am
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?
2014-03-24 10:13 am
It sounds like it may just be a caching issue. Try clearing your browser cache.
2014-04-09 9:07 pm
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 ?
2014-04-09 9:44 pm
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.
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 ?
2014-11-10 10:26 am
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.
2015-03-09 6:33 am
Great website - exetremely useful!
One issue, I am using modx and I have inserted the generated code into the HTML.
The twitter icon has not appeared but only the text.
Please see link to website: http://www.totterdells.ie/bottom-menu/totterdells/tech-blogs/totterdells_chosen_charity_peter_mcverry_trust.html
Any help would be much appreciated,
2015-03-10 9:58 am