The Foursquare Map Plugin

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.

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:

  • Just a quick note – this project is now listed under the official Foursquare Apps directory right here: http://foursquare.com/app/foursquare_map_for_wo….

  • Hi Tom, it works fine, thanks!
    It looks a lot nicer with WordPress widget 🙂

  • Thanks Anka,

    Glad you like it. Let me know of any new features you'd be interested in.

    Tom

  • EagerExistence

    How about extending it to access the check-in time?

  • That's a good idea. I guess users would want to control whether and how the
    time is displayed?

  • EagerExistence

    Yeah, I am just finishing up modifying the plugin now to test it out. Didn't realise you'd respond so fast.

    Other options would be to display city & state information alongside the venue title.

    (for example: instead of venue being just “McDonalds”, it could say “McDonalds, Perth, Western Australia”).

    • EagerExistence, I’m going to email you with a code tweak – can you let me know your feedback?

  • Great feedback.

    Thanks for taking the time to think about the potential for this widget. I'll look into extending the info currently made available in the code.

    Stick around, ok?

  • EagerExistence, you'll find the code you need to add the city name above, in a brand new section of the FAQ. I'll endeavour to include an official option in the next release.

  • EagerExistence

    Yeah, I saw that bit of code. $fq.city, $fq.state, and $fq.date. But when I tried to expose it, everything on the site died. I dont have a local test environment, but a hosted one.

    I will try again as soon as I get a minute.

    Cheers for the help.

  • love the plugin, but it doesn't consistently display my location. Sometimes everything shows up – other times I get just get a blank google map. See screenshot below:

    http://img413.imageshack.us/img413/852/71720101

    any ideas?

  • Hello h8torade!

    I've had that issue too. From my studies I've reached the conclusion that
    since this bug is not consistently reproducible, then it must be a speed
    issue at Foursquare's end. The Google map frame always loads, and once
    created it goes off to fetch the last check-in address and details. If it
    gets a response *after* the page loads, nothing will appear as in your
    image. However, if I were to make the plugin 'wait' for a response, the rest
    of your blog would be left hanging, and that would make for a bad plugin.

    I'm sorry I can't be more help on this one, but since very little actually
    happens in WordPress here, there's little I can do. I expect that Foursquare
    will get a lot better at handling API requests as demand grows, so please
    stick with me and let's ride it out together!

    Yours.
    Tom

  • sounds good – thanks for the quick response!

  • Is it possible to use OAuth support for authorization ?
    I don't like to share passwords in every DB

    MvG,
    Alexander

  • Thanks for information, I'll always keep updated here!

  • Hi BAB2501, is OAuth a feature that would encourage you to use this plugin?
    I can implement it if others wish for the same thing – so let me know, people!

  • Instead of showing my last checkin … is it possible to show other peoples checkins and badges.. with a link back to that 4sq page.

  • Hi Naweed,

    Your request won't be possible with this plugin, no.
    I've chosen to go with accessing logged-in info, rather than parsing that
    info via an RSS feed, because Foursquare stated that their feed system is
    liable to change with some frequency, as they continue to develop as a
    platform.

    For now, logged-in info is the best way to tell the widget what to do. As
    such, unless you use someone else's login details, you won't be able to show
    someone else's location I'm afraid.

    As for showing off badges, I'd like to develop this further, but I wanted to
    keep this plugin really simple, just the basics required for communicating
    with your readers. So I *might* look into this, but I'd release it as a
    separate plugin. Just an idea, but you could add some text below your
    Foursquare map saying “click above to see all my badges!” or something?

    Yours,
    Tom

  • Hi Tom,

    Yesterday i noticed that when i did a private check-in [off the grid] it shows on FS as [off the grid], but on my blog you can see my check-in as normal!

    Not a big problem for me, i don't use that offen, but just that you and others know that if you really don't want people to know about where you are… be careful then 😀

  • Ok – thank you. I'll look into a way to fix this in the next release. Thanks
    Anka!

  • Awesome, thanks

  • Hi Tom,Real nice plugin. Love the fact that it’s plain and simple and only shares 1 (last) location. I have a feature request though. (to make it less plain & simple. 😉 )I would love to add multiple users. I run a blog with 4 others and we would like to share the last location of every blog editor. There is one plugin that’s able to do this (more or less) but it’s way to powerfull / complicated / heavy coded / etc. (gPress) And shares our whole history. Besides, as I said, I like you’re approach.It’s just an idea. Understand that it will probably wrack the architecture of you’re plugin somewhat apart but I hope you’ll think about it. Thanx for your time and plugin anyway. Vince

    • Hi Vincent,

      Thanks for the great feedback on the plugin, and glad you like it’s simplicity (me too).

      The plugin does in fact allow multiple users: it’s a multi-instance widget!
      Just drag another instance of the widget over to your sidebar for each additional user you’d like to feature, and have them type in their details (remember that passwords are tototally concealed). You can change the title of each widget independently to showcase each of your users, and WordPress will add a different ‘class’ to each instance for you to style each one independently.

      I’d love to see what you come up with, so let us know by way of reply!

      Yours,
      Tom

      • Hi Tom,

        Thanks for the quick reply!
        I didn’t realize it was a multi-instance widget so you’re comment was indeed helpful. I’ll test it as soon as I have time and let you know my experience (if relevant).

        Thanks again.

        Best, Vincent

  • Hi,

    nice widget but I would like to see two adjustments:

    1. how can I indent it a bit. In my template the map is stuck on the left side of the sidebar (which looks a bit weired)

    2. I added the time stamp addition but the ckeck in is shown as UTC … any way to adjust for a certain time zone?

    http://blog.fifthstreet.biz/

    Thanks
    Harald

  • Thanks for the great plug-in! I use it on my blog – with the timestamp. On my latest check-in it shows:

    Sun, 29 May 11 09:56:02 +0000

    It should show it like this since I live in the Berlin timezone:
    Sun, 29 May 11 11:56:02 +0200

    How can I modify the source code so that it shows the time correctly for my timezone?

    Thanks!

  • Damien

    It looks as though the plugin stopped working… I just checked a few users below and it’s not working for them either.

    • Hey Damien, have you tried the latest version? 0.8.9? Hundreds of happy users since the upgrade went out. Yours, Tom

      • Tony Fleming

        Where can one get version 0.8.9? The WP repository still provides only version 0.1.5.

        Thanks!

        • Sorry, I was using the Disqus Mobile app to moderate, and didn’t see this comment was related to this page, and not my other WordPress plugin (which really is at version 0.8.9).

          Apologies for the confusion.

  • Angelica R.

    This plugin is great! I’m still waiting for the new version to re-enable it on my blog… any idea of the release date?

  • This plugin has been dead for a long time. Any idea when we might see the update?

    • So, is this plugin officially dead? Any word from the developers? Any at all?

      • I’m having some difficulty pulling OAuth codes from Foursquare and re-presenting them here for use in the new widget. In the meantime, here are the instructions for creating your own widget with the new Foursquare API.

  • It’s showing a blank map on my site. Correct to assume this app is dead and will be updated at some point? Any ETA?

    • Hi Monica, that’s correct, yes. I’m (slowly) working on a solution now. In the meantime, you can roll your own with these instructions.

    • Hi Monica, that’s correct, yes. I’m (slowly) working on a solution now. In the meantime, you can roll your own with these instructions.