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.

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.

<!-- Main wrapper -->
<div>
<!-- Tweetmeme button -->
<div>
<a href="https://twitter.com/share" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<!-- Facebook button -->
<div><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme

=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowTransparency="true"></iframe>
</div>
<!-- StumbleUpon button -->
<div>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink()?>"></script>
</div>
<!-- Google Plus button -->
<div>
<g:plusone size="tall"></g:plusone>
</div>
</div>

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.

<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”en” data-count=”vertical”
data-via=”buildwebsites1″>Tweet</a>

• You can also take the <script> bla bla </script> code 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.