Question

我正在尝试替换可在此处设置的通用“保存到foursquare”按钮：https://foursquare.com/buttons/savetofoursquare

我想用我自己的自定义foursquare按钮替换它（来自Fairhead Creative的.svg版本，由Zurb Foundation在这里分发：http://zurb.com/playground/social-webicons），并且不会让脚本自动消除并用我的自定义按钮替换预包装的foursquare保存按钮。

我很确定我只需要编写自己的解决方案，使用此处的文档：https://developer.foursquare.com/overview/widgets - 但我有点困惑。希望那里有例子。

我还在一个页面上有几个按钮，引用各种vcards（多个博物馆位置）。为此，我使用了答案中的数据上下文属性：Multiple Foursquare 'save' buttons on one page。这一切都在发挥作用。

我正在使用自己的html：

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

稍后在页面上：

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

怎么做？

Answer 1

好的，我知道在发布这个问题之前我应该继续搜索和修补。：）

感谢vnads here，我看到了如何设置全局onReady功能。我将其设置为使用jQuery each（），遍历跨度，获取数据上下文值，然后将功能附加到我的DOM元素。这里的关键位来自vnads在（当前）接受的解决方案结束时的评论：foursquare正在寻找一个DOM元素，而不是一个jQuery对象。

哦，widget.attach（）而不是widget.replace（）使自定义图形不会被重建。

<!-- 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>

用自定义按钮替换“保存到Foursquare”按钮

1 个答案: