Howto: Google Talk badge on WordPress.com

Chat with Me via Google Talk

What you are seeing above is a link that allows you to initiate a chat that directly connects to my Instant Messaging client. A lot of Users on the WordPress.com support forums wished to be able to do this. Staying in contact with your readers is crucial for any blogger.

But this used to be next to impossible to implement for WordPress.com users because it could only be done via iframes. iFrames are disabled by the WordPress.com team due to security considerations. Worry no longer. Google added some options to the badge creator that don’t require iframes and announced them recently in a post on the Talkabout blog.

The Badge Creator can be found here. When you go there you will see a page like this.

Make sure that you click “Edit” (marked red in the screenshot) to access the options that work with WordPress.com in the dropdown menu. The options with the text (no frame) will work with WordPress.com.

As long as you stick to one of the three last options you will be able to create a Google Talk chat badge for your WordPress.com Blog by following the instructions on that page.

Now you can drop the HTML code into a sidebar widget, into your contact page or a post (if appropriate).

Enjoy!

Howto: Google Maps on WordPress.com

Update: WordPress.com started to offer a method to embed dynamic Google Maps. For the life of me I don’t get it working so I still believe this may be useful for some.

I think there’s a good reason for this one:

We all struggle from time to time with WordPress.com very strict Policy on JavaScript, iframes and the like. For example grabbing the embedding code from Google Maps won’t work. But in February Google announced an API that allows you to embed a map as an image without JavaScript. This works just fine with WP.com’s security policy.

Read this carefully (I said CAREFULLY), or you may end up with no map. And I won’t help you. You need to have a basic understanding of HTML, specifically of <img src="" />. Just skip over the following paragraph if you don’t want to be bothered with too much technical stuff.

You can read Google’s documentation on the Static Maps API (that’s what they call it) if you want to understand exactly what’s happening here and do a little more. However I’ll try to introduce you to this without too much techno babble. API (Application Programming Interface) means in this case that the Google Maps servers will render a picture from their maps database based on the parameters you specify. You do that by embedding an image. The URI of this image contains the parameters such as latitude, zoom, image size, API-key… you name it.

1. First and foremost you need to signup for an API-key to use this. One API-key allows you to embed static maps on one domain. Multiple API-keys for different domains are possible. You can get your API-key here. You need to have a Google account for this. The API-key will be associated with your blog domain such as example.wordpress.com so images cannot embedded anywhere but at this domain (users with custom domains: read the note at the bottom of the post, please). Luckily you don’t need to keep your API-key ready, as long as you remember your domain name.
2. When you have your API-key(s) you’re ready to do the magic. You can go to the static map wizard. There you search for the location, define width and height for the map and fill in the domain associated with your API-key. You will receive a URI like this:

http://maps.google.com/staticmap?center=52.51447,13.349024&markers=52.51447,13.349024,red&zoom=13&size=425x300&key=HERE_GOES_THE_API_KEY

1. Use this as the Image URI in a post or sidebar widget and you have embedded a Google Map. Cool people may wanna link the image to a Google Maps search that returns the location displayed. It’s not as bright and shiny as a dynamic map, but far easier than doing screenshots all the time.

Here’s my map:

Here’s the exact code, I’m using to embed it:

<a href="http://maps.google.de/maps?f=q&hl=de&geocode=&q=Berlin,+Gro%C3%9Fer+Stern&sll=52.502382,13.395077&sspn=0.006988,0.015943&ie=UTF8&t=h&z=16&iwloc=addr" title="Berlin Grosser Stern"><img src="http://maps.google.com/staticmap?center=52.51447,13.349024&markers=52.51447,13.349024,red&zoom=13&size=425x300&key=ABQIAAAAUhopkvHuigV8XNrMTyyP9xRPYRQpHV3vyegops1UsckCZXJ5HxQeZ-y5Vct1BnNnd_FB2A_CBuCl9Q" alt="Map of Berlin" height="300" width="425" /></a>

Custom Domain Users: If you’re on a custom domain (as I am) the map won’t display in the Rich-Text Editor. On the Blog however it will appear just fine. That is because your Google allows the image to be loaded only from the domain associated with the API-key. I suggest you define height and width for the image, so you see at least it’s outline in the Visual Editor.

Social Bookmarks: