In today’s post I’m going to show you how to make a custom iPhone “button” for your Wordpress website.
This post will be of absolutely no interest to you if you do not have a blog or website.
So for those of you who do not have a website, I have for you a picture of a girl with pretty braids.
Now … onto the iPhone button for everyone else.
If you, like me, have a website or blog you may know about the “add to homepage” function on iPhones. iPhones have buttons on their home screens that make access to applications and websites easier.
When you’re on your iPhone, surfing the Internet and find yourself on one of your favourite websites, all you have to do is click on the plus sign you see at the bottom of your iPhone screen.
Once you do this, you’ll be given the option of “Add to Home Screen”.
Click on that and you’ll see the name of the website come up, along with a small button icon.
Click on “Add” and the website’s button will automatically be added to your iPhone’s home screen.
As you can see the button that’s automatically assigned to my website is just a screenshot of my home page. Not bad, but kindda messy and garbled looking. No pizzaz.
With a couple of easy steps and a GREAT WordPress Plugin you can custom make your own iphone button. I swear it’s easy. That’s why I used a plugin.
The first thing you need to do is download the WordPress Plugin “Blog Icon“. Either download it from the original site, or search for it in your WordPress plugins and install it.
The second thing you need to do is create a 57 X 57 pixel picture.
Choose a picture that you think represents your site. It could be a picture of you, or your site logo or even just a letter or shape. If your site is about cupcakes … use the very best cupcake picture you have as your photo. Most importantly, make sure the image is clear and simple. Once it’s shrunk down to iPhone button size anything other than clear and simple will be indecipherable.
Have you noticed how serious I get when discussing “computer stuff”. It’s ’cause I’m not all that great with computer stuff and it takes all the concentration I have just to discuss it. Maybe I’ll try and slip in a knock-knock joke somewhere.
Since my site doesn’t have a logo, I decided to use a combination of the clever and the gold picture frame from my homepage.
If you have a PC you should be able to edit and resize your picture in “Paint”.
If you have a Mac you can use the incredibly underutilized “Preview”. Just save the picture(s) you want to use in iPhoto. Then drag the picture from IPhoto into Preview. Once it’s in Preview you can add text (annotate), cut and paste portions out of the photo AND resize it to whatever size you want. In this case, 57 X 57 pixels.
Once you’ve resized the picture in Preview (or Paint) save the photo as a .PNG, .GIF or .JPEG file. There’s no need to round the corners or anything else. Iphone does the rest all by itself. Remember where you saved your picture because you’re going to need it later.
Now that the hard part is done, go to the Blog Icon plugin you installed. You can find it under the “Appearance” section on your sidebar.
Under the ipod touch/iphone icon & Boot images section, upload your photo to the Web Clip Icon. That’s why you need to remember where you saved it. I usually save photos I need to use immediately to my desktop.
Click on “Update your Blog Icons” … and you’re done!
The Art of Doing Stuff’s iphone button went from this (bottom right corner):
I also shortened the name of the site from “The Art of Doing Stuff” to “STUFF” so it fits better on the screen. You’re given the option to change the name of a site when you add the button to your homepage on the iphone.
There are other more technical ways of doing this without the use of a plugin. To do it you need to have access to your blog’s root directory on the server. Once you’ve configured your picture, just upload the photo into the root directory. It MUST be saved as apple-touch-icon.png
Button your lip. No one can combine humour with explaining computer crap.
© an original knock knock joke, by Karen.