Click here to Skip to main content
Click here to Skip to main content

Introducing BuildButtons

, 24 Jun 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
In this article we'll look at how you can add social networking buttons to your website to connect it to other networks. We'll use BuildButtons for the heavy lifting.

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 the CodeProject 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.

Asides from 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 pace 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

Let's 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! 

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dave Kerr
Software Developer
United Kingdom United Kingdom
Follow my blog at www.dwmkerr.com and find out about my charity at www.childrenshomesnepal.org.
Follow on   Twitter

Comments and Discussions

 
SuggestionVery good Article PinprofessionalPaulo Augusto Künzel25-Oct-13 6:19 
QuestionNice Pinmembermark merrens14-Sep-13 8:22 
AnswerRe: Nice PinmvpDave Kerr14-Sep-13 22:22 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun25-Jun-13 2:23 
GeneralRe: My vote of 5 PinmvpDave Kerr25-Jun-13 2:53 
Thanks Smile | :)

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411023.1 | Last Updated 25 Jun 2013
Article Copyright 2013 by Dave Kerr
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid