The Foursquare Map Plugin

[box type=”note”]ALERT: As of August 1st 2011, Foursquare deprecated V1 of their API. Meanwhile, I am (slowly) working on a version compatible with V2 and will update this plugin shortly.[/box]

Description of this WordPress Plugin:

Foursquare is rising in popularity, and will continue to grow. This plugin makes it easy to share your last check-in location without needing to worry about giving away personal info, and you don’t need to be an expert in mapping APIs!

The plugin places a Google map in a widget area and lets users enter their preferences over what they show, be it just the map, or the name of the place too, or the comment they left while there. Simple, effective, and sociable.

Plugin features:

  • Offers an easy way to share your last check-in location with your blog’s readers.
  • Built on the Foursquare and Google Maps APIs, so expect blistering fast speeds.
  • Intuitive interface for editing options, with plenty more power under the hood.
  • Independent handling across multiple widget instances, using WordPress 2.8’s widget_class coolness.

Step-by-step installation instructions:

  1. Download the plugin from the WordPress Plugin Repository.
  2. Extract the files and place the entire ‘foursquare-map’ folder in your wp_content/plugins directory.
  3. Go to your ‘Installed Plugins’ panel and activate ‘Foursquare Map’.
  4. You are now ready to use the widget.

Usage instructions:

  1. Go to your ‘Appearance > Widgets’ panel and select the widget area you wish for the plugin to appear in.
  2. Enter the following details:
    • Widget Title
    • Foursquare Email Address *
    • Foursquare Password *
    • Map Size (squares only for now)
    • Map Zoom Level (zero is furthest, 21 is closest)
    • Indicate whether to show the venue name
    • Indicate whether to show your last comment
      * no trace of this info is discoverable – you’re in totally safe hands here.
  3. Hit ‘Done’ then ‘Save Changes’. Test the appearance and perhaps change the size of the map as necessary

The Widget Options Panel:

Version History:

V 0.1 the first iteration of what I hope will be a learning experience for everyone

Future Versions:

V 0.2 – allow map width and height to be adjusted independently
V 0.3 – allow easy switching between Foursquare and Google Maps markers
V 0.4 – allow users’ to place their Foursquare avatar on the map as a marker
V 0.4 –  pending user feedback!

Frequently Asked Questions:

Where do I put the widget?

You can place it wherever you like as long as it is within a pre-defined widget area. I haven’t worked out how to let people place the widget wherever they like. Let me know if you can help on my contact page though.

Can I style the widget in my own way?

Kind of. You can change the parts that are created by WordPress by using your stylesheet.css to override your theme’s default widget settings. I’ve added the below style classes for you to do so:

  • .four2map – the widget class
  • .widgettitle – the widget’s title (same as all widgets)
  • .venue – the div above the map containing the venue name
  • .label – the text within the .venue div
  • .map – the map itself
  • .comment – the text below the map

To make changes to what you see within the map, you might need to play around with the Google API code in bundled with the widget. I’m sure code snippets will start to appear in the comments right here to help you along.

Got any cool tweaks I can make to the code?

Yeah – in fact let’s start collecting them in the comments.

To add the city you’re in to the venue label, replace line 89 with this:

echo "".$fq->venueName.", ".$fq->city."";

To add the timestamp of your last checkin, add this just below line 94:

echo "".$fq->date.""; // show check-in time

Where can I find more help and support?

Just leave a comment below, or email me from my contact page. I’ll be happy to help where possible.

How can I support this plugin’s development?

Thank you so much for asking. Please click below to donate a small sum to this plugin’s developer: