Replace "Save To Foursquare" button with custom button

Question

I am trying to replace the generic "Save to foursquare" button that can be set up here: https://foursquare.com/buttons/savetofoursquare

I want to replace it with my own custom foursquare button (.svg versions from Fairhead Creative, distributed by Zurb Foundation here: http://zurb.com/playground/social-webicons), and not have the script automatically wipe out and replace my custom button with the pre-packaged foursquare save button.

I am pretty sure I just need to script my own solution, using the documentation here: https://developer.foursquare.com/overview/widgets -- but I'm a bit confused. Wish there were examples there.

I also have several buttons on one page referencing various vcards (multiple museum locations). To do that, I used the data-context attribute from the answer here: Multiple Foursquare 'save' buttons on one page. That is all working.

I'm using my own html:

 <span id="venue1-foursquare" class="fc-webicon foursquare" data-context="venue1_vcard">save Venue 1 to foursquare</span>

And later on the page:

 <span id="venue2-foursquare" class="fc-webicon foursquare" data-context="venue2_vcard">save Venue 2 to foursquare</span>

How to do this?

Answer 1

OK, I knew I should keep searching and tinkering before posting this question. :)

Thanks to vnads here, I saw how to set up the global onReady functionality. I set it up to use a jQuery each(), loop through the spans, grab the data-context values, and then attach the functionality to my DOM element. The critical bit here came from vnads' comment at the end of the (currently) accepted solution: foursquare is looking for a DOM element, not a jQuery object.

Oh, and the widget.attach() instead of widget.replace() keeps the custom graphic from getting run-over.

<!-- 4Square js: -->
<script type='text/javascript'>
(function() {
    window.___fourSq = {
        "explicit": false,
        "onReady": function () {
            $('.fc-webicon.foursquare').each(function() {
                var this_widget = $(this);
                var this_context = this_widget.data("context");
                var widget = new fourSq.widget.SaveTo({
                    "context": this_context
                });
                widget.attach(this_widget[0]);
            });
        }
    };
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://platform.foursquare.com/js/widgets.js';
    s.async = true;
    var ph = document.getElementsByTagName('script')[0];
    ph.parentNode.insertBefore(s, ph);
})();
</script>