Create your own Instagram/Facebook/Twitter API with Google Drive and IFTTT

Skateboarding images

My Birmingham City University colleague Nick Moreton has a neat little hack for connecting a JavaScript app to social media accounts by combining the automation tool IFTTT, and Google Drive. As he explains:

“Most of the big web apps provide their API in JSON format (Facebook, Twitter, Instagram) however, as you may know if you’ve ever tried to use these, they often require an OAuth login in order to access the API.”

Continue reading

The newfound power of the social media editor

Mark Zuckerberg

Mark Zuckerberg is the editor controlling most people’s front page. Image by Niall Kennedy

The New York Times is “retiring” the traditional practice of pitching stories for the newspaper’s front page, reports Poynter’s MediaWire:

“Under the new system, each desk at The New York Times will pitch stories to be considered for “Dean’s list,” a list of stories that get “the very best play on all our digital platforms,” including Web, mobile and social platforms.”

And they are not alone.

As news organisations have moved from print-first to web-first to mobile-first the changing role of the social media editor has been fascinating to watch. Continue reading

How to: learn about CSS by creating a ‘tweetable quote’

This is the fourth in a series of posts introducing HTML. The first part tackled making a ‘Tweet this’ link in a blog post, and the second introduced Twitter’s Web Intents sort-of-API. The third post outlined a little hack for embedding images in those tweets.

If you haven’t read those, you might find it easier to start there.

You can also get all four tutorials in a small ebook.

Sharelines

Stage 4: Styling your ‘Tweet this’ quotes with CSS

At the top of every post in this series has been a ‘Sharelines’ section with quotes in white text against a blue background, each one preceded by a Twitter icon bullet point.

All of those stylistic elements are created with CSS: Cascading Style Sheets. And this post will explain how to learn more about CSS by using them to style your ‘tweet this’ links.

In order to do that I need to explain how CSS works alongside HTML, and why we need both. Continue reading

How to: embed images in ‘tweet this’ links

This is the third in a series of posts introducing HTML. The first part tackled making a ‘Tweet this’ link in a blog post, and the second introduced Twitter’s Web Intents sort-of-API. If you haven’t read those, you might find it easier to start there.

You can also get all four tutorials in a small ebook.

Sharelines

Stage 3: Adding an embedded image to a ‘Tweet this’ tweet

It’s widely known in the news industry that adding an image to a tweet can make a big difference in terms of how many times that tweet is retweeted. In fact, Twitter say it’s the single biggest factor.

Chart: tweets with images are 27 percent more likely to be retweeted

Chart: tweets with images are 27 percent more likely to be retweeted. Tweet this image

But adding an image to a ‘tweet this’ link isn’t as easy as you might expect.

The obvious way to do this, for example, would be to add an image link to your tweet – but Twitter will show that as a link, not an image.

Unless you use a particular type of image URL.

Finding the right Twitter image URL

This particular image URL is one generated by Twitter itself, after someone has tweeted the image.

Assuming no one has already done so, then, you’ll need to start by tweeting the image yourself.

Once you’ve done that, open the tweet. You can normally do this by clicking on the date or time next to it (for example “Jan 27″ or “1d” or “2h”).

The tweet URL will look something like https://twitter.com/paulbradshaw/status/560171610309926913.

It is important to note that this image has two URLs. One begins with pbs.twimg.com and another begins with pic.twitter.com. Only the second will be embedded when tweeted – this is the one you need.

If you right-click on the image, for example, to ‘Copy image URL’ you will get the wrong type of URL – the one beginning with pbs.twimg.com. Do not copy that link

Instead, while still on the tweet page, you need to click again on the image. This should bring up the tweet once more – only this time with the pic.twitter.com URL visible. Copy this link to use later.

If you cannot see the pic.twitter URL then try right-clicking on the tweet and selecting View source (or similar). Use CTRL+F to search for pic.twitter and you should be able to find the URL there.

Adding your image URL to the ‘tweet this’ link

From this point you can just follow the steps in the first post in this series only making sure to add the pic.twitter URL in the text= parameter along with any quote – and a space of course.

But I’ll recap them quickly here:
1. Create a URL beginning https://twitter.com/intent/tweet?text= and add whatever text you want to appear in the tweet at the end of this URL. Then include a space and the link to the image that you copied.
2. Press Enter. A Twitter box should appear in the browser with the text you specified, and the link too. (Make sure you’re logged in)
3. The URL will have changed slightly, to replace spaces and other awkward characters. Copy that URL.
4. In your post, switch to HTML (Text) view and link a relevant phrase (like ‘Tweet this image’) by putting <a href="` - then your URL - then `" target="_blank"> before it, and </a> after it.
5. Preview the post and test the new link.

If you have any problems go back through the previous post’s more detailed instructions.

A good place to put your ‘Tweet this image’ link is in the caption to the image itself. You can see an example of this above, or on this post.

In the final part of this series of tutorials I’ll be covering how to style your ‘tweet this’ links so they stand out more – and learn about CSS in the process.

Newsquest charging students for a byline? They could at least sell it properly

spaceman

What value do you put on space?

Newsquest are charging students £120 for a byline. The NUJ is appalled. Universities are angry. Journalists are outraged.

And no one is surprised.

What is perhaps most telling about the move is what it says about Newsquest’s commercial nous.  Continue reading

How-to: learn about APIs while making tweetable quotes

This is the second in a series of tutorials introducing HTML, CSS and APIs. You should probably start with the first one, here.

You can also get all four tutorials in a small ebook.

Sharelines

In the previous post I outlined how to create a ‘Tweet this’ link using HTML to open a new Twitter window containing any text you liked. In this post I’ll outline how to add links, hashtags and @names to that tweet – and along the way find out a bit about APIs. Continue reading