How to create a clickable image for Wordpress dot com sidebars

Updated 9 July 2014 - now with instructions for Blogger / blogspot blogs

Sometimes campaigning or events-promoting websites include a call to "please add our button / widget to your website". There's a piece of code made available and if you put it in the right bit of your website's layout it will appear as a clickable image.

• But what if there isn't a widget available and you want to add one? 
• Also, what happens if you're using Wordpress dot com (not the self-hosted dot org version) and won't be able to add a bit of code anyway?

I have an answer... and it works. Of course I'm sure there are neater ways of doing it but my policy is that if I've found a workable fix then I pretty much forget about it (after carefully blog-documenting it of course). If you know of a better way that others might like to know about, please add it in the comments, thank you :)

You can see an example on the right hand side of this blog for the Open Air Cinema listings page on this site. The original one I made was for one of my work websites, see the Computing At School logo example I created for my work: Teaching London Computing).

What's the benefit of this? Why do it?

• Every time any page on your site loads the clickable image is available on the sidebar, meaning that more people might see it.
• If, as part of a promotional campaign, lots of people have the same image in their sidebars then this obviously increases the numbers of people that might see it (and some may click on it).
• The more links there are to a particular site the more this tells Google (which indexes all of the blogs and websites that are linking to it) that the target site is of value.  Apparently high-ranking blogs and websites will increase this further but you can never tell what algorithm Google is working with so I'd not rely on that.

You will need
A picture - I've generally assumed that if I'm advertising someone's event then it's probably OK to use their logo or a relevant advertise-y image from their website, but it's wise to check, please don't steal others' work.
A link - when people click on the picture what website do you want them to go to? Might be an Eventbrite page, or might be an event info landing page which then directs them to the Eventbrite page.
A wordpress.com website or Blogger blog

1. The process - for Wordpress.com blogs (where they call them widgets)

• Get your picture (see 'first catch your picture' below if you don't have one)
• Make a note of the web address you want visitors to go to (when they click the picture)
• Add the picture to the Media library of your Wordpress site - then Edit the picture (not really, you just want to open the editing window from which you can capture the media file's address - you'll need it in a moment)
• Now you have two addresses (one's a Wordpress Media file store address, one's the site you want visitors to go to)
• Open the Widget settings [just stick /wp-admin/widgets.php after your website's homepage name].
• The widget you want (see pic below) is called "Image: Display an image in your sidebar" - you'll need to click and drag it to the relevant sidebar (or footer) section before you can enter the picture and link. The sidebars are the blocks to the right of your website text and usually include things like recent posts (archives) - you can add all sorts of stuff to them.



• Once you've done that the Image widget will open and ask you for information - you only need to tell it two things. (1) Where to find the image (see pic below: into the box with the *green star paste in the file's address (the Media library address^) - this will make sure the widget displays your image). (2) The address that the image will point to (ie when visitors click on it, where they'll go). In the pic below put the website address in the box with the *blue star. Then click save and have a look at your homepage to see if it's there.

^Getting the media library address for your picture
Navigate to your Media Library or just stick /wp-admin/upload.php after the end of your blog's homepage address and that should take you there. I see a large grid of media that I've uploaded including documents, pictures etc. Click on any of them and it will open up within the screen (you can close it with the little X on the right hand side, don't use the back button or you may go somewhere else). Collect the relevant address from the field marked URL in the panel on the right hand side - that's what you'll put into the Image URL field starred in green below.

2. The process - for Blogger / blogspot blogs (where they call them gadgets)

• Get your picture (see 'first catch your picture' below if you don't have one)
• Make a note of the web address you want visitors to go to (when they click the picture)
• Visit your dashboard, in particular your layout, which looks like this, then click on 'Add a Gadget' (highlighted in green below).

• There's a wide range of available gadgets but the relevant one is 'Image' - click the white on blue plus symbol to select it.

• Doing that will bring up the 'edit gadget' options, it looks like this. On the left is the blank version and on the right is a completed example.

You'll need to give it a title (red star) and the web address you want visitors to land on when they click the picture goes in the Link bit (orange star). Up to you how you get the image in, you can upload it using the Browse button, but if it's on the internet you can link to it* (blue star). I recommend selecting the Shrink to fit button (yellow star) especially if it's a large file that will take up space.

*remember when linking to an image on the internet link to it directly, NOT the page on which it sits - ie the web address probably ends in .jpg rather than .html.

Afterwards you can decide the order (where abouts on the page the image will appear) in the layout. Then save your new arrangement and check how it looks on the live blog.



First catch your image
If you're on a website with an image you like (and be mindful of copyright and how you're using it) then right click / save as to capture a copy before uploading it to your Media library [add /wp-admin/media-new.php to the end of your website's homepage].

For previous ones (events now finished, pics removed) on this blog I used an event flyer PDF and reduced it in size so that I could take a screenshot of it, tidy it up a bit in Paint and save it as an image file which I then uploaded. I also used it on another blog (Sound stuff) along with two other music events, picture reproduced below.

Music from the films
For this one I took a screenshot of the page which had this as part of a larger image and cut it down in Paint. I copied the logo and used PowerPoint to reduce it in size - it's a better programme for resizing things because you can hold the shift key and maintain aspect ratio (keeps height and width in correct ratio to one another, it's possible to do this in Paint but I've found PowerPoint's better). I used Paint to paste the logo onto the image and arrange it as seen.



Delicious film
I found an image of Delicious on the film's Eventbrite page, along with the phrase "UK premiere" - took a screenshot of the whole page and edited it Paint so that the words sat at the bottom of the image.






David Arnold live in concert
This one comes from the official event flyer PDF - I just opened it, resized it to about 50% (really any size will do that makes it easy for you to take a screenshot), took a screenshot of the page and got rid of white space and grey background, neatened it up so that it had a black border and save it as an image file.

The picture will be resized the minute you put it into the Image widget anyway so best to start large so that when reduced the text isn't a complete blur. 








Troubleshooting
Depending on the theme you have it may not be possible or practical to have a sidebar or anywhere to put the image widget, I'm afraid I can't help with that.

Possible questions
Can I link it to a file, eg a Word document or PDF?
Yes - all you'll need then is the address of the file instead - since you can add documents to your media library on wordpress you might as well do that, but any link that opens the doc will do (eg if it's hosted somewhere else).

How to make it look like you've embedded a short Storify into a free Wordpress dot com blog post

I'm a little smugger than usual today because I worked out how to do a slightly clever thing. It's not difficult, though a little fiddly and requires patience but it worked well. I managed to create a blog post on Wordpress.com that looks as if I've managed to embed a Storify story in it.

Jump to '5. How I did it' to find out how I did it...

Also see useful comment from @krelnik below. As always I write these things only for someone to tell me of an easier way later :-)

---

1. Exciting background preamble
I recently had an interesting chat with a colleague on Twitter and realised in the middle of it that I should capture this and add it to the 'work Storify' for @chi_med (it lives at 'Using everyday errors to understand more serious ones').

2. You can't embed Storify stories in free Wordpress dot com
The work blog (http://chimedblog.wordpress.com) is hosted at the free version of Wordpress and the one thing you can't do is embed a Storify story there. This is because of the type of scripting that Storify uses (I think, it's a bit beyond my technical payscale) but it's well-known that it can't yet be done.

You can embed a Storify in blogger and it works really well, recreating itself each time the blog post is loaded. Here's an example.

I have made a bit of a study of things you can and can't embed in the free version of Wordpress at "Will it embed? How to embed all sorts of things on free Wordpress dot com blog posts"

3. You can embed individual tweets into free Wordpress dot com but...
However you can very very easily embed individual tweets, simply by pasting the tweet's URL into the Visual editing window (not the Text editing window). The tweets embed beautifully and the end-result is very pleasing (example - some tweets from the Symposium on Usable Privacy and Security).

3b. ...if they're part of a conversation you can't get rid of the preceding tweet
I tried recreating the Storify as a blog post by pasting in the text I'd written, then pasting in each tweet's link. When I came to preview it though a problem became clear - each tweet that my colleague had sent was a 'reply to' the one I'd sent. And each one showed up with my original one, every single time - it looked a repetitive mess.

4. I've no idea how to embed blog posts within a blog post (!)
One of the nice things about Storify is that you can add in more than just tweets. If you stick in a link to a blog post, or even another Storify story then the system will create a sort of thumbnail image, that's clickable and will take you to the original. Because I'd referenced a blog post and a Storify story I wanted to recreate that in my blog post but there's no obvious way to 'embed' within a post in this way...

5. How I did it
Here's the original Storify
Here's my 'faked' let's make it look like I've embedded that Storify in a blog post.

This is straightforward but would probably try your patience if you had more than 20 elements in your Storify story.

I took screenshots of the tweets, blog post and the embedded Storify story (from someone else) that I'd originally added to my own Storify story. Then I cropped them using the free MS Paint (variously called paintbrush.exe or paint.exe) that's bundled with Windows so that they were exactly the same size as they are on Storify.

Following the layout of my Storify I added in the images at the relevant points (there were 12 in total) and, for hyperlinked the tweet images to the original tweet and the blog post (and other Storify story) were hyperlinked to the relevant media.

On uploading an image to Wordpress you're given an option to change its URL. The default is the location on the Wordpress servers of your file but you can point it anywhere you like, so I did. The dialogue window looks like this (click to enlarge image). On the right hand side you can see, in the Attachment Display Settings' an option for Custom URL that lets you add in the address of your choice.

'Wrongfooted' is just a shorthand for one of the stories I embedded, about wrong-site surgery in the wrong foot - fortunately the patient was scheduled to have both feet operated on so the situation wasn't disastrous, but could have been!

6. How can you tell my version is faked?
None of the 'web intents' on the tweets work. These are the little things that, if you're logged in, let you favourite or retweet the tweet from the blog post. On mine you can only click on it to visit it in its original setting.

7. What happens if you've got hundreds of tweets in your Storify
If you have the patience to collect the URL of each tweet and embed, fine. If it's a hashtagged conversation then each tweet might not be in reply to another one so each tweet will probably show up as a single 'unit'. You can right-click on the tweet to copy its URL and stick that in the Wordpress editing window, copying and pasting any additional text that you've written in the Storify.

You do not need to have published your Storify to do this - you can create a draft copy specifically in order to generate thumbnails of blog posts, other Storify stories, websites etc - it's a pretty useful thing actually.

If you have a great long run of tweets with no text in between them then you might as well take a screenshot of five or six tweets at once, but remember you won't be able to hyperlink them individually.