Introducing BuildButtons

• Try BuildButtons out

Introduction

For many websites, it is extremely beneficial to connect to social networks. Buttons like the Facebook 'Like' and Twitter 'Tweet' buttons are becoming almost ubiquitous. In this article, we'll identify whether we should include buttons like this on our websites, and then how to actually do it.

The vast majority of my articles on Code Project focus entirely on a technical topic. In this article, I'm going to be looking more at concepts that are related to strategy and marketing rather than technology itself. I'll also show how to use a tool that I've written to add content to websites.

Why Bother?

Put simple, social media buttons can help drive traffic. In almost all circumstances, traffic is good for your website. More people see your content, your product or service, you're generating leads and possibly even increasing revenue from your advertising programs.

Besides driving traffic, many search engines (such as Google) will rank web sites in search results based on their 'connectedness' - how many other sites link to them. This means that the more people who are linking to your site from other places, the higher up it'll be in the search results.

Back That Up

The easiest way to back up what has been said so far is simply to show examples. And in fact, showing examples is so straightforward that the point can be made even better by issuing a challenge like this:

Find a newspaper website that doesn't allow you to share its articles via Facebook or Twitter.

My own search here has been by no means exhaustive, but it seems that the vast majority of newspapers encourage users to share their content. Again, this is because:

1. It drives traffic, in theory making the newspaper more popular
2. More traffic means more revenue from their advertisers
3. More traffic means when you search for an article on Google, you're more likely to find their page

Let's Get Started

Creating these social media or share buttons is generally pretty trivial, you search for something like 'create facebook like button' and find an API or developer page from the website, fill in a form and the button is generated. However, to try and make this easier, I've created a website called BuildButtons that gathers all of this functionality into one place for you.

First, go to www.buildbuttons.com:

It's a pretty simple site, essentially there's just a brief description of what the site is all about, followed by links to different categories of buttons.

As an example, we'll build some typical social media buttons. Choose 'Social':

In every category like this, we get a set of buttons to build. The social media buttons category has only one option - the share button set. Click 'Build It':

To actually build the buttons, you just fill in the details on the form and choose 'Build It'. Your results are shown to the right of the form:

Now all you need to do is copy and paste the HTML from the text box into your site.

I've made sure in all cases that you can just copy and paste - there's never any need to include JavaScript files, style sheets or images.

What's Available?

There are so far a few different types of buttons available, here's the list:

Social Media

The Social Media category contains only one set of buttons so far, and that's the Share buttons we've just seen above.

Facebook

For Facebook, you can build 'Like' or 'Follow' buttons.

Like

The 'Like' button can be clicked by a visitor to allow them to quickly share that they 'like' some content on their Facebook timeline.

Follow

The 'Follow' buttons works differently, it allows a user to click to follow a profile. This means when posts are published by that profile, the user will be notified. Profiles can be for people, but they can also be for businesses and so on.

Twitter

There are four buttons available for Twitter.

Tweet a link

This button lets the user quickly create a tweet to a specific URL.

Tweet a hashtag

This button lets the user quickly create a tweet that contains a specific hashtag (maybe something like #somebuzzword).

Follow

Quite a useful one for social media types, this button lets the user click and then follow the tweets of a specific user, which for most sites will be the twitter user of the site.

Mention

With this button, the user clicks and a new tweet window comes up, with the text containing the string @someprofile (with someprofile specified in the settings). This allows a user to send a tweet to someone (this is called a mention).

Google

There isn't a huge amount of choice in the Google buttons so far, but for the sake of completeness, I'm keeping everything on this index.

+1

The +1 button is used to share content on Google Plus. When a user +1s your content, it appears on their Google Plus page.

LinkedIn

For many, this is one of the most important networks as it deals with users in professional and business related networks.

Share

Super simple, the LinkedIn Share button allows a user to share content via their LinkedIn profile page.

GitHub

GitHub is extremely popular for sharing code and hosting projects, if you have a project on GitHub, these buttons will be useful.

Star

Lets a user star your project. They're saying they like it and will probably follow it with interest.

Fork

The Fork button lets a user create a fork from your project and start working on it independently.

Follow

Follow is for GitHub users, not repositories. It lets people follow a specific user and their activity.

Star Fork Follow

I tend to use these buttons rather often, and actually like to have all three together, so this builder will create all three side-by-side.

Help Me Make BuildButtons Better

So far, I'm finding BuildButtons useful in my own projects, but I'd love to hear from you if you have any suggestions for improvements - maybe new or different types of buttons.

I hope this article may be of some use to some people, as always, comment if there are any questions, ideas or problems!

History

• 25^th June, 2013: Initial version