How To Add Social Media Buttons To Your Site

Mitz Pantic
Mitz Pantic Blogger, Tips4pc

Posted on August 18th 2013

How To Add Social Media Buttons To Your Site
Adding social media buttons to your site is part of my own social media checklist and is a great way to encourage visitors to share your articles and become followers or fans. But how exactly do you add buttons to your site, which buttons should you add, and are there any pitfalls you should watch out for? We answer all those questions.

The Easiest Way To Add Social Media Buttons

Several services make it easy to add social media buttons to your site. All you have to do is copy and paste some code—which they provide—into your theme. But there’s a catch. As always on the Internet, you should wonder how these services make their money. Some of them accept money from particular social media sites to emphasize their buttons over buttons from major sites like Facebook, Twitter, and Google+. Other services use the code you add to your theme to track everyone who visits your site. Still other services don’t yet know how they’re going to make their money, so they might go out of business someday and temporarily break your social media buttons. But for all of these problems, using a service is still the quickest and easiest way to add buttons to your site.

social buttons by mitz

One great thing about using a service is that you know their social media buttons will look good.

The Manual Way To Add Social Media Buttons

I prefer to add social media buttons to my site directly. All of the major social media sites offer free buttons you can use on your site along with the necessary code to make them work. Simply copy and paste the button you want and the code which goes with it to your site. Manually adding social media buttons makes it easy to only provide buttons for sites I use.

For example, if I use Facebook, Google+, and Twitter—but not Pintrest—On some sites I don’t have to add a Pintrest button. People can still share content from my site on Pintrest, but they’ll have to do it manually (which is fine). But most people who want to share my stuff will have a Facebook, Google+, or Twitter account and they’ll find it much more convenient to share my stuff using one of those networks where I can see them sharing it and can add my own comments. Here is an article I wrote about adding a Twitter and Facebook button manually.

Here is an example of some code to add to your website. A little bit more detailed than just adding one or two buttons to a page.

Add Social Media Buttons – A Vertical Sharebar

You would add this first lot of code to your single.php file in your WordPress editor.


Then you would add the css to the main css file.

.buttonsWrap { display:block; float:left; margin:40px 0 0 -90px; position:fixed; background:#F5F5F5; width:50px; padding:10px } .tweetmemeBtn, .facebookBtn, .stumbleUponBtn .googleplusBtn { display:block; float:left; } .facebookBtn { margin:15px 0 10px 2px } .googleplusBtn { margin:13px 0 0 0 }

Source: adding social media buttons into your website.

Don’t Forget Email

Email is the original online social media network, but too many sites today forget it. If you use WordPress or any other major Content Management System (CMS), it’s easy to install a plugin which lets visitors email posts they like to their friends and family. When they email through your site, not only do they promote your content, but they also give you a great opportunity to add them to your mailing list.

You can also add social media buttons to your emails you send so people can follow you and connect with you. Even it is a message sent through an email autoresponder series, you need to give the ability to share.

Making Social Media Buttons Work With Your Template

Adding just any social media buttons is easy, but you also need to make them work with your template. This is particularly hard when you try to put buttons from different sites together. The buttons from Twitter aren’t exactly the same size as the buttons from Google+, and the buttons from Google+ don’t match the blue on the Facebook button, etc… My solution for this problem is to go smaller. Get the smallest social media buttons you can. Not only will they blend together better and take up less space on your site, but the inconsistencies between the buttons will be less noticeable when the buttons appear in miniature.

Extra Tips:

  • Do not forget to add your Twitter account as the source by adding data-via=”yourtwitterid” as shown below. My account is “buildwebsites1″. Notice I have left the @ sign out.

data-via=”buildwebsites1″>Tweet

  • You can also take thecode out and add it into footer.php or if your theme has a place for additional scripts you can add it there. This means the scripts will load last and improve page load speeds.
  • Do not forget to clean up your website by removing useless social media buttons and stray script.

Finally, whatever buttons you use and wherever you get them from, make sure you test the buttons before you finish editing your layout. It would be sad if someone excited about sharing your site lost interest after clicking broken social media buttons.

Mitz Pantic

Mitz Pantic

Blogger, Tips4pc

My name is Milica Pantic (aka Mitz) and I am a serial full-time blogger. I started out with one website many years ago and it went so well, I sold my businesses and began living the Internet dream. Since then I have been perfecting the system of blogging to earn money online and I will never stop learning. This is an ever changing business and I love the challenge! I have been developing the best information about successful blogging for years now and give it all away free at my blog. :) Hope to see you there!

See Full Profile >

Comments

Miz - what do you think about social media sharing services such as AddThis and ShareThis? I was having a discussion with a client that runs a large amount of ecommerce sites, and they don't have the manpower to run social for all of those sites. However, they do want to include social sharing buttons on their individual products and categories.

I'd love to hear your input - we get this question all the time in my SEO training class and I want to have the best info for my students.

Thanks!

Sorry Beth, the comment above was meant to be your reply.  Hope that answers your question. :) 

Social is a lot of work and if these sites are surviving without that promotion then I wouln't bother with the individual social properties.

For them to insert a few of the most popular buttons for people to click on and share, addthis is a simple option. 

I like to check my page speed here https://developers.google.com/speed/pagespeed/insights/ and then again after installing any extra plugins or code to see if it causes a slow down. 

There are also a few other tips. 

1. Only install buttons you need and bring value to your site. 

2. Get plugins that are cared for and updated regulary. 

3. If hand coding, update code to newer versions as asynchronous loading code is faster. Even Google adsense code is asynchronous now.

3. Load scripts last (after css in head) and only once. For example you might have two twitter buttons on your site but you only need the script to load once for both.