Lesson 9

Social sharing with Twitter

Giving your app scope to go viral

First, we're going to let users of our app share their score using Facebook or Twitter. At the moment, the final screen of our quiz app is relatively boring. But what if our users could share their scores on their favourite social network once they had completed the quiz?

Using the power of APIs, we can tap into a company's services and embed their content in our site. The first step is to go to the documentation about the service that we want to add. Let's try Twitter first.

A quick search for "twitter API" leads us to the developer section of Twitter's site:

http://dev.twitter.com

If you navigate to this website, you should see a number of options: Twitter cards, Embedded Timelines and more. We're interested in the "Tweet button" as this will allow our users to Tweet about their score.

If you click on "Tweet button" this will take you to some instructions about how to integrate a Twitter button into our app. We're already using JavaScript, so the easiest way to add a Twitter button is to copy the JavaScript code, about a quarter of the way down the page - it should look something like this:

If you copy and paste this code from Twitter between the following tags in your HTML, it will mean that the share button will only appear once the user has completed the quiz. (Whatever you do don't type out the code above - you need to go and find the button yourself!)

So that we can hide the Twitter button, we need to change our final screen from a paragraph to a section, and then hide it in our stylesheet. This will ensure that our final screen stays hidden until the quiz is over. Change your paragraph with an id of final to a section like this:

And then right at the bottom of your style.css, hide the section with an id of final:

At the moment this will just share the link, but we want to have some more descriptive text when a user Tweets about our quiz! What about a message saying that they just finished the quiz? To do this, we can add a parameter called "text" that will customise the message we suggest that our user Tweets. The parameter will go after the share link, and will look like this:

There are lots of other ways to customise your Tweet - just have a look further down the developers page to see how to do it!

API

An API is a way for a company to open up an area of their technology or data to developers. API stands for "application programming interface" which is a rather useless acronym!

One of the best examples of an API is Transport for London (TFL's) open data API. If you are a developer you can access things like live train and bus arrival times.

As a result of TFL releasing their data, apps like Citymapper have been created, combining Google Maps, taxi data and more for a simple and immersive experience. Freelance developers have also used this data to create amazing visualisations - have a look at one here: http://decd.co/transportforlondon

Documentation

Developers spend a lot of time reading documentation about APIs and other web services. As well as being able to code, being a good developer is a lot like being a good researcher - deciding whether to trust a source, and looking for a piece of code that might already exist on the web.

Copying and Pasting

In web development you’ll often hear the phrase “standing on the shoulders of giants.” Rather than redoing work that has been done by others, copying and pasting open code can really speed up a project. Just make sure that the person who wrote the code has said that it can be copied and built upon!

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson