Sociala knappar är lika lätt som meningsfulla att lägga till på sin site. Principen är enkel: Knappen låter dina besökare tipsa sina vänner om siten och på så sätt sprids länken snabbt över sociala nätverk såsom facebook, twitter osv. Detta kallas för viral marknadsföring.
Innan man satt sig in i hur sociala knappar fungerar kanske det känns komplicerat, men det finns många enkla lösningar, i synnerhet om du kör ett CMS (ex. WordPress, Joomla, Drupal etc.). Jag berättar här om hur jag lade in knapparna på denna site. Fortsättningen av denna How-to skrivs på engelska.
This How-to will in brief explain how I added social buttons to this site. It’s not very complicated and if you want to try it yourself it should take you only a couple of minutes to understand how to implement your own buttons. However, you’ll benefit from being a little bit friendly with HTML and CSS when adding your buttons.
Your webpage layout most likely consists of a header-part, a content-part and a footer-part. You’ll want to consider what to use your social buttons for before deciding how to place them. If you’re running a blog you’ll want to consider attaching social buttons to each post/article in the content-part of your layout, but if you’re more interested in only quick sharing your domain name or a certain page of your site you might be satisfied with adding your social buttons to the header or footer. Which buttons to attach to your site is dependent on your sites content, target group, location etc. If your site is intended for a younger audience, add a MySpace-button, if you have a Russian target group, add a vkontakte.ru-button. You get the picture.
This site aims to reach both a Swedish and an international audience interested in mainly graphic design, and clients in need of my services, and I’ve chosen a set of buttons which I believe suits this context (hover the social buttons below).
Adding buttons is quite simple. It took me about an hour to figure out the best way for me to do it, and another hour to properly style my buttons in place here on the site. This is a WordPress-blog and there are two ways to do things when you are running a CMS.
Either you find a nice plugin, or you do it by yourself. I stumbled upon quite a few plugins and other nice features, such as the ShareThis-button. However, I decided to stick with manually constructed social buttons, and a nice plugin for retweeting: The Topsy retweet-button-plugin for WordPress
This is how you add your social icons manually:
Web communities (eg. facebook, linkedin etc.) receive links through query string (a line of code attached to a URL, separated by a ?-character). The only thing you need to do is to add a link to your site containing the url and query string for a specific site. Communities usually have their own syntax for sharing links so be sure to use a proper query string. Here you can find how facebook likes it done: http://www.facebook.com/share/
A link from this site to facebook would look something like this (note that the line breaks aren’t meant to be, it’s an issue due to presenting too long a string of code):
<a href="http://www.facebook.com/sharer.php?u=http://www.sidearm.se/ &t=Sidearm.se"><img src="images/social-buttons/facebook_16.png" width="16" height="16" alt="Share this on Facebook!"></a>
Just copy/paste this code into your own site, change the sidearm-related stuff to something more yoursite-related and you’re good to go! Feel free to rip my sharing-buttons, just go view my source and copy/paste. The graphics are easily acquired by right-clicking and saving the images.
If you want any help with this, just drop me a comment or an e-mail.
1