Tag Archives: twitter

Journalism tool: Clammr, the Vine for audio

Clammr screenshot

Image: screenshot from Clammr

By Alex Iacovangelo

You probably already have your favourite audio recorder and editor but Clammr offers something new: a way to highlight the best bits of your podcast to help it stand out on social media.

Clammr allows you to select up to 24 seconds of a podcast or interview and post that clip on social media with a direct link to the original to attract listeners. Continue reading

How and why to save politicians’ (and your own) tweets before they are deleted

Headline: Twitter Shuts Down Services That Tracked Politicians’ Deleted Tweets In 30 Countries

In August 2015 Twitter shut down a number of ‘deleted tweets’ archives. Image: TechCrunch

If you rely on Twitter or other social media services to act as a record of history, a series of incidents over the past six months should make you think again – and take control. Continue reading

Twitter’s algorithm changes make it key that journalists take control

For some time now Twitter has been flirting with abandoning the reverse-chronological ordering that attracted so many journalists to the service.

Having already introduced “While you were away…” tweets a year ago, and the curated “Moments” storylines 4 months ago, the suggestion is that it may finally be ready to make the leap to a Facebook-style “what we think you’ll like” timeline.

This may be initially opt-in, but then so, once upon a time, was Facebook’s algorithm.

I’m not one of those old users who are inevitably crying about the death of Twitter. We all change as we get older, and Twitter is no exception: once an always-on special companion, now it is a more occasional big crowd encounter. 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.

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