Search code examples
foursquaremicroformats

Multiple Foursquare 'save' buttons on one page


I am working on a site that displays a list of venues and would like to add a Foursquare 'save' button for each venue in the list. Is it possible to show multiple Foursquare 'save' buttons on a single page? I've tried creating multiple vCard blocks (one for each venue) and inserting a 'save' button in each block but the locations are not being picked up.


Solution

  • After inspecting the source of the widgets.js and widgets.asyncbundle.js I discovered that setting thedata-context atribute of the 'Save to Foursquare' button to the ID of the VCard will link these two. Like so:

    <div id="hcard-Station-Amsterdam-Centraal" class="vcard">
        <span class="fn">
            <span class="given-name">Station Amsterdam Centraal</span>
        </span>
        <div class="adr">
            <div class="street-address">stationsplein 15</div>
            <span class="locality">Amsterdam</span>, 
            <span class="region">Amsterdam</span> , 
            <span class="postal-code">1012AB</span>
        </div>
    </div>
    <div id="hcard-Jaarbeursplein" class="vcard">
        <span class="fn">
            <span class="given-name">Jaarbeursplein</span>
        </span>
        <div class="adr">
            <div class="street-address">Jaarbeursplein</div>
            <span class="locality">Utrecht</span>, 
            <span class="region">Utrecht</span>, 
            <span class="postal-code">3521AL</span>
        </div>
    </div>
    
    <a href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-context="hcard-Station-Amsterdam-Centraal" data-variant="wide">Save to foursquare</a>
    <a href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-context="hcard-Jaarbeursplein" data-variant="wide">Save to foursquare</a>
    

    But for the fact that this isn't documented, it may be changed in the near future.