Tuesday, March 19, 2024

How To Add Social Networking Buttons To Your Site

Social networking is the modern term for an age-old advertising technique–word-of-mouth–that has endured through the test of time. The principle behind word-of-mouth advertising, or social networking, is simple: people trust their friends’ and family’s opinion of a product more than they do a professional advertisement made in a far-off city by people they never met. For example, let’s say your good friend, who has the same tastes as you, recommends a new restaurant.

Chances are, you’re going to want to try the new eatery. The same principle works for your website. If a friend of yours says, Hey, you should read this, then it’s a good bet you just might want to read it. The question is, how does your friend tell you about this excellent website he wants you to check out? The answer lies in social networking buttons. By adding social networking buttons to your site, you are providing your current audience with a means to provide word-of-mouth advertising to their friends, who will hopefully become your future audience.

The Latest Social Networking Tool: Google +1 Buttons

The newest of these social networking buttons comes in the form of Google +1. Now, when you perform a Google search, you’ll see a +1 icon. In the screenshot below, you’ll see in the first search result where I clicked the +1 box on the search results page. That means everyone in my Google network (gmail contacts and so forth) will see that I like that search result. In the second search result, you’ll see the +1 is greyed out, which means no one in my Google network likes that search box.
To make Google +1 more effective, you can add a +1 box on your site or within an article. When a visitor clicks the +1 box, then when someone in his Google network searches for a similar item, he’ll see that his friend likes that article.

There are social networking buttons like this available for Twitter, Facebook, Reddit, Digg, Slashdot… just about every social networking Web 2.0 type of site has a button available for you to add to your site. And they all work basically the same way. For example, if someone clicks the Twitter button from your article, they can send a short message and a link back to your site through Twitter. That way, all of the Tweeter’s friends, and anyone who is looking at all global Tweets, will see what is essentially a word-of-mouth advertisement for your page. What is really nice about this Twitter button is that it automatically appends “via @yourwebsite” at the end of the tweet. This allows for two more features: you can see who is using the Twitter button on your site by looking at your Mentions from Twitter and people who see the tweet can click through to your Twitter stream:

 

Adding the Social Networking Buttons

So, how do you get these social networking buttons on your site? If you have Joomla! or WordPress, you can find a few free or pay-for modules. But they might not always provide what you’re looking for. You can also use services from Clearspring such as AddThis and/or ShareThis (which I believe are the same product). Clearspring’s products are free and they do provide analytics as to how often the buttons are being used. However, from my personal experience using Clearspring’s ShareThis through a Joomla module, the analytics never received any data, although I know they were being used because I used them!

By using code straight from the vendor, you can see the number of times someone has +1’d, Tweeted, or Liked the article, because there’s a running counter right alongside button.

Most of these buttons work through JavaScript. If you have a standard, static HTML site, you probably know where the js should be placed. If you’re using Joomla!, it’s a bit trickier. First, navigate to the index.php file that is found within the template folder. Open that up in Notepad and scroll to the bottom of the file. Then, right before the closing </body> tag, add in the following example code for Google +1 and Twitter:

<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>

Then place the HTML code in the web page where you want the button to appear. For Joomla!, I found it easiest to create a custom HTML module with a special position {loadposition social} that I use to directly place the buttons into the article. I typically place it directly below the main image and right after the introduction paragraph.

If you’re working in Joomla!, and you’re using TinyMCE editor, you do need to turn off the Code Cleanup options. Then remember to turn them back on when you’re done creating the module.

Here’s the code for the Google +1, Twitter, Reddit and Delicious:

<g:plusone></g:plusone>

<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” data-via=”YourSite”>Tweet</a>

<a href=”http://www.reddit.com/submit” onclick=”window.location = ‘http://www.reddit.com/submit?url=’ + encodeURIComponent(window.location); return false”> <img src=”http://www.reddit.com/static/spreddit7.gif” alt=”submit to reddit” border=”0″ /> </a>

<img src=”http://l.yimg.com/hr/img/delicious.small.gif” height=”10″ width=”10″ alt=”Delicious” />
<a href=”http://www.delicious.com/save” onclick=”window.open(‘http://www.delicious.com/save?v=5&noui&jump=close&url=’+encodeURIComponent(location.href)+’&title=’+encodeURIComponent(document.title), ‘delicious’,’toolbar=no,width=550,height=550′); return false;”> Bookmark this on Delicious</a>

The Facebook button is a bit more complex in that not only can you Like the article, but you can also add a comment from the button that appears on your Facebook wall. Because of the added complexity, I did resort to a module from Verge. This module is free and offers an automatic URL discovery feature, which means you can add this button to every page of your site, and when someone Likes it, that specific page will be linked to, as opposed to say the front page.

How do you determine which social networking buttons to use on your site? One good way to determine which buttons to use is through your analytics console. By seeing where your visitors are coming from, you’ll know which buttons to use. For example, do you get a lot of visitors from Facebook? If so, add the Facebook button. If you get zero traffic from Digg, you might want to skip that button. Of course, if you are getting zero traffic from a particular site, you might want to add their button to see if you can generate some traffic from that site. If the button does not bring in new traffic after a month or two, you can always remove it.

By adding social networking buttons to your site, you are allowing your visitors to share your pages with their friends. This is a tried-and-true advertising method that is proven and effective.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured