Click here to Skip to main content
14,984,043 members
Articles / Web Development / HTML
Posted 24 Jun 2013


14 bookmarked

Introducing BuildButtons

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
24 Jun 2013CPOL5 min read
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.


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

Image 1

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':

Image 2

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':

Image 3

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:

Image 4

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.


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


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


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.


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).


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.


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).


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.


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


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


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


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


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


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


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!


  • 25th June, 2013: Initial version


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


About the Author

Dave Kerr
Software Developer
United Kingdom United Kingdom
Follow my blog at and find out about my charity at

Comments and Discussions

SuggestionVery good Article Pin
Paulo Augusto Kunzel25-Oct-13 5:19
professionalPaulo Augusto Kunzel25-Oct-13 5:19 
QuestionNice Pin
R. Giskard Reventlov14-Sep-13 7:22
MemberR. Giskard Reventlov14-Sep-13 7:22 
AnswerRe: Nice Pin
Dave Kerr14-Sep-13 21:22
mentorDave Kerr14-Sep-13 21:22 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun25-Jun-13 1:23
MemberHumayun Kabir Mamun25-Jun-13 1:23 
GeneralRe: My vote of 5 Pin
Dave Kerr25-Jun-13 1:53
mentorDave Kerr25-Jun-13 1:53 

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

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