Twitter Facebook Email Subscribe

How to make a custom iphone button

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.

ANY CHARA CTER HERE

ANY CHARA CTER HERE

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):

To this:

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


Knock, knock.

Who’s there?

Button.

Button who?

Button your lip.  No one can combine humour with explaining computer crap.

© an original knock knock joke, by Karen.


Related Posts Plugin for WordPress, Blogger...
27 Comments | Filed Under: Everything Else | Tags: , ,

27 Responses to How to make a custom iphone button

  1. Helen says:

    I am amazed that no matter what you’re writing about, I still find it interesting!

    Enjoyed the picture of the doll with braids by the way.

  2. Sigh, sadly I do not own an iphone. I may be the only one left on the planet. Thank you for the picture of the girl with the pretty braids :)

  3. Now, can you do that for an Android phone??

    • Karen says:

      I’ve searched a little but come up empty for the Android in terms of a plugin. They’re sometimes hard to find though so I’ll keep looking and let you know! If anyone else knows of a plugin for creating an Android icon, feel free to speak up! ~ karen

  4. Brittany says:

    Very helpful, thanks Karen!

  5. Wendi says:

    Iphone? I just got one of those thingies called a microwave…is that the same thing?

  6. Paulina J! says:

    So I don’t have a blog or an iPhone or iPad, but I truly enjoyed this post. I love all techie stuff specially when it makes people think I’m smarter than I am. Thanks Karen now I feel an urgent need to start a blog and get an iPad.

  7. Okay, first of all, thanks! I now have my blog on my iPhone Home Screen! Saweeeeet!

    Also, you’re awesome. Because that doll thing was freaking hilarious.

    -Alexandra Dare
    http://lafemmenotoire.com

  8. Annie says:

    I don’t have an iPhone or an iPad, but I DO have a rockin’ assortment of cast iron skillets…..

    Thanks for the weird picture of the doll with braids–it literally made my day!

  9. Natalie says:

    Ha! I like that you copyrighted your knock knock joke :)

  10. Thanks. I love my iPhone. I love tweaking my iPhone. And my blog.
    I am a nerd.

  11. TR says:

    YES! I’ve been wondering what else you could do with that pesky little plus besides make bookmarks. I would have tried it a long time ago… but, you know, I was afraid of scrambling my phones’ memory– because that WOULD happen to me.

  12. Anemone says:

    I wish i knew how to do it on Android…cause i check your blog soo often and it would look great as a shortcut.

  13. escapade says:

    Karen you’re such a little genius!
    Thanks for the tip ;)

  14. Bev says:

    I just did this on my iPod touch, but I didn’t need a plugin, the minute I added your site it automatically used the meat-cleaver image?! New software release perhaps? Or you did something smart at your end?

    (I’m going with you doing something smart – cause you seem to do smart things with such ease, its bound to have been you.)

    • Karen says:

      LOL. Yes, I did something on my end. The post is really for the benefit of people who run websites. Like me! I have a website and therefore, created a cute little icon that could be viewed by everyone when they add my page to their iPhones, or iPod Touch. The average reader/viewer only benefits from this post by getting to look at the cute icons we website owners have created! :) ~ karen

  15. Laura says:

    Smart!! Not just the knock knock joke!

  16. Rachel San Diego says:

    Oh. My. God.

    I’ve been reading your archives, cracking up all along the way, just got to this post and actually did what you said and am IN AWE. It actually worked. Of course it did, Karen said it would.

    Next… guess since you’re right about everything and show us how to do everything, I’ll just have to go build my own cob oven! :)

    Love your blog. :)

    • Karen says:

      Thanks Rachel! Yeah, I try to make sure everything I show will work for pretty much everyone. “Try” being the operative word. Good luck with the oven. ;) ~ karen!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>