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 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!