I get attached to the darnedest of things. Design–preferably good design–is one of them.

Over the past year, my tastes have shifted definitively towards minimalist looks with strong typography and content-focused design. Spending all your time living, thinking, breathing, and doing digital marketing + web development + copywriting is clearly a quick way to disabuse yourself of any fondness for websites that refuse to believe they’re actually just bits and bytes zipping around over the Internet. With glorious inky serifs on lined paper, Runo Lite is a great-looking theme–one I’ve bookmarked for use in other projects, other times–but I’m no longer okay with shoving a bunch of pretend pages in my readers’ faces.

The Barefoot Bookworm RunoLite Theme
Screenshot edited so it would not actually be website-length long. Last seen on: August 3, 2015.

Goodbye Runo, you will be missed. But hopefully not too much.

Advertisements

Cuter Tweeter: Add Tweetable Image Links to Your Posts

Noticed how many news websites and blogs let you tweet something right from within the post?

You can get that too. No plugin required. (No rocket science either.)

But isn’t there a plugin for that?

Sure there is. If you use WordPress, you know there’s no shortage of plugins for everything under the sun and then some. There are some things to keep in mind though:

  • Each plugin you add is another potential security vulnerability. (Just ask the folks using MailPoet: back in July, a lot of them woke up to find their entire sites–maybe even servers–hacked. Years of hardwork=poof. Gone.)
  • Each plugin you add is also an additional demand on resources. It may slow down your website speed, insist on adding scripts where no script has gone before, unnecessarily bloat your file directory, or simply refuse to play nice with the other plugins you’ve got installed.
  • Each plugin typically adds functionality that is only functional so long as the plugin is. A great example of this are shortcodes. I love shortcodes. They make WordPress sites super-awesome and super-easy. Little known fact: bye-bye plugin, bye-bye whatever shortcode it added. You end up with an embarrassing little reminder of the Little Code That Was: [INeverThoughtAnyoneWouldSeeIt height=bigpx width=widepx]
    (And no notifications. As far as WordPress and browsers are concerned, you were struck by an inexplicable urge to write gibberish bound by square brackets but hey, that’s humans for you.)

In short: mo’ plugins, mo’ problems.

I get it. But I don’t get code, y’ know?

Have no fear, copy-paste is here. Delia from Blogformatting.com wrote a neat little tutorial on tweetable links and kindly included the source code for such links. Here’s the part that really makes the code work:

<a href="http://twitter.com/home/?status=Your Text Here">[Tweet this!]</a>

This code will produce something that looks like this: [Tweet this!]

Does that get your clicking finger itchy? Not mine. (I know, I’m a bit spoiled. I prefer clicking on links that also look like they promise value.)

Now, you may or may not know this, but links don’t always need to be text and there’s no special magic involved in making them different. It all comes down to structure: the part that makes a link behave as a link is <a href> (wondering what those letters mean?); the part that tells it where to point and/or what function to perform is =”URL/?dynamic action/function if needed ; and the part that tells it what to display is whatever comes between the opening (<a href>) and closing (</a>) tags.

This flexibility in its basic architecture dramatically increases the ways you can use a link. Such as: using graphics instead of text.

And WordPress makes it real easy.

Enough already! Show me how!

There are two methods you can use.

Home Free, Code-free

    1. Assuming you’re logged into your WordPress dashboard and have written the post you want, click “Add Media”.

      ImageLinks_Step1_Add Media
      Step 1: Add Media
    2. Upload or select the image you want to use.
    3. Edit image properties.
      ImageLinks_Step3_Edit Image
      Step 3: Edit Image

      This is where it all happens:
      ->Make sure you add

      http://twitter.com/home/?status=Your Text Here

      as the custom URL your image points to. Everything after status= will be included in the tweet.
      ->Want those tweets to mention you? Add @YourUsername in the text. Want your post link shared with the quote? Add the (shortened) url. Just remember, there’s a 140 character limit.
      ->Do not include double quotes (“) in to wrap your quoted text. They will break the link. If you care about grammar (like I do), then use single quotes.
      ->Add a Call-to-Action as a caption: it encourages people to tweet something; it also lets your readers know the image is clickable. This is especially important if you’re using a non-standard image as your tweet button.
      ->You can specify image dimensions at two points: either before you upload the image (use an image editor to resize it) or selecting a size from the display settings. Use vector graphics for best results, and PNG files for transparent backgrounds.
      ->Don’t forget the quote! Your audience can’t read text included in a hyperlinked URL so you’ve also got to write out the quote as regular text. I would recommend highlighting it in some way, not just to draw attention to it but also to give your readers a visual cue as to what text the tweet button will quote.
      ->You don’t have to add alternate text to your images (readers generally only see it if the image doesn’t load) but I like to give search engine bots a little something too.

Click “Update” and voila!

Copy-Paste Code Ninja

This should work for every type of website that uses HTML–not just WordPress. Copy and paste this in your text editor, modifying as necessary:

<a href="http://twitter.com/home/?status=''Your Text Here"><img src="http://your.image.source/file.png" alt="What is Your Image" width="#" height="#" />Your Caption.</a>

HTML5

I haven’t tried it, but this should work:

<a href="http://twitter.com/home/?status=Your Text Here"><figure><img src="http://your.image.source/file.png" alt="What is Your Image" width="#" height="#" /><figcaption>Your Caption</figcaption></figure></a>

And that’s a wrap!

You can test out graphical tweet links right now:

Go Beyond Text! Images are attractive, attention-grabbing, and give you an opportunity to brand your tweetable links.

Tweetable Image Links
Tweet This!

Limitations and Further Reading

  • This tutorial teaches you how to use images to let your readers tweet text quotes from your posts without the use of plugins or extensive coding. It does not teach you how to let readers tweet images from your posts.
  • I think it should (in theory) be possible to use a similar approach to allow readers to directly tweet your images and video content–but that is beyond the scope of this tutorial and not something I am looking into, now or in the near future.
  • Are you wondering how to embed tweets in your posts, not how to let users embed your text in their tweets? That’s a whole other ball game.
  • Want that nifty “highlighter” effect as readers scroll to through the tweetable text? If you use WordPress, there’s a plugin for that released by coders with a solid reputation. Don’t use WordPress? There’s something for you too.

Credits

The birdie image used in this post was created by the brilliant Mirjami Manninen, and can be downloaded for free from Smashing Magazine.

Parting Words

Did this post help you? Did you use the code shared here? I don’t have a coding background (all jiggery-pokery is self-taught in my case, learned while I was supposed to be working to get into med school/become a doctor) so I’m intensely shy about sharing anything about it, including my opinion. So do let me know what you think of it.