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.
I realize that you are just explaining about the wordpress and php. What about those of us that we are using blogspot.com? Can you help us to find out how to do it?
James osborne recently posted..I Want To Get Married: Best Christian Relationship Advice
I do not specialize in blogger sites but I think there are widgets that you can add in. ???
Hey Mitz,
Such a brilliant post.The social media icons in a site are very essential to increase the contacts.Thanks for sharing the code to embed the social media buttons securely.
nice article very helpful with me in current time social media site is very helpful to get huge traffic and social media buttons in site is helpful to users to share post. thanks for sharing.
hiren recently posted..Orissa OPEPA Sikhya Sahayak Recruitment 2013 – http://www.opepa.in
It was really excellent tips keep it up. I believe social media floating bar is the best option because it has maximum number of social media and secondly either you scroll down or up your blog it will remain on display. Thank you very much for sharing with us this great post.
Hi Mitz,
I personally love to add social media buttons manually to my post, below the title ( before the post) and also at the end of the post.
Simply get the codes from their respective sites, go to single.php from the editor, and try to check for the following:
1. depending on theme ( for example, based on your theme), I will look for an area where there is ‘leave a comment or edit a comment’ and then I will paste the codes there. immediately after comment stufff, i can use place the code here
2. The concept is that you should look for the last word after your site title e.g. posted by, date e.t.c.
Nice tutorial mitz
Secondly, i realized you’ve changed your theme, how is it in terms of SEO advantage?
dare khuji recently posted..What is expectation gap
OMG my theme is awesome! I went and changed it on Tips4pc also as it was such a success. SEO, the way the code is written, loading speed, and more.. all great !
mitz recently posted..The Best WordPress Theme Framework – Genesis vs Thesis
I think social media floating bar is the best option because it has maximum number of social media and secondly either you scroll down or up your blog it will remain on display. However apart from this you can also put social media buttons just after the post to encash the appreciation if your post impresses the readers to get likes, follow and +1 rewards just after the post is finished.
Mi Muba recently posted..How she made her boyfriend quit smoking forever? A True Story
Yes I agree. I will put that code on this site but I need to figure out what hook to use..?
mitz recently posted..New Genesis 2 Loop Hooks