如何构建Flickr Feed的Pin-It按钮？

我在我的网站上有一个flickr供稿，并且我想在每张图片下添加一个Pinterest“Pin-it”按钮。如何构建Flickr Feed的Pin-It按钮？

这里的饲料脚本：

<script> 
    $.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&[email protected]&lang=en-us&format=json&jsoncallback=?', function(data) { 
    $.each(data.items, function(i,item) { 
    var large = (item.media.m).replace('_m.jpg', '_b.jpg'); 

    if(i <= 20){ 
    $('#list').append('<li class="picture"><a class="slide-img" data-lightbox="engagement" href="' + large + '"><img src="' + large + '"/></a></li>'); 

    } 
    }); 
    }); 
    </script>

我想将

<a href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.pushpinevents.com&media=http%3A%2F%2Ffarm4.staticflickr.com%2F3838%2F15273469932_0c3ceaeb96_b.jpg&description=%40PushPin%20Events" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

代码添加到.append方法并替换URL字符串与图像链接。

我最好的猜测是我需要从flickr网址定义一个变量，并用％2F等替换％3F'：'。

因此，像：

var link = (large).replace('/', '%3F');

问题1 - 我怎样才能更换一个.replace方法多个字符？

说的已定义后，我的代码下挥杆看起来像：

<script> 
     $.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&[email protected]&lang=en-us&format=json&jsoncallback=?', function(data) { 
     $.each(data.items, function(i,item) { 
     var large = (item.media.m).replace('_m.jpg', '_b.jpg'); 

     if(i <= 20){ 
     $('#list').append('<li class="picture"><a class="slide-img" data-lightbox="engagement" href="' + large + '"><img src="' + large + '"/></a></li><br><a href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.pushpinevents.com&media='+link+'" data-pin-do="buttonPin" data-pin-config="beside">Pin It!</a>'); 

     } 
     }); 
     }); 
     </script>

问题2 - 这是做到这一点的最有效方法是什么？

来源

2014-10-02 Aaron Benjamin

我结束了使用var encodedUrl = encodeURIComponent(large);哪些技巧。

这给我留下了

$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&[email protected]&lang=en-us&format=json&jsoncallback=?', function(data) { 
    $.each(data.items, function(i,item) { 
    var large = (item.media.m).replace('_m.jpg', '_b.jpg'); 
    var encodedUrl = encodeURIComponent(large); 
    console.log(encodedUrl); 


    if(i <= 20){ 


    }$('#list').append('<li class="picture"><span class="round"><a data-lightbox="engagement" href="' + large + '"><img src="' + large + '"/></a><br><a class="pinit round" target="_blank" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.pushpinevents.com&media='+encodedUrl+'&description=%40PushPin%20Events" data-pin-do="buttonPin" data-pin-config="beside"><i class="fa fa-pinterest"></i> Pin it</a></span></li>'); 
    }); 
    });

干杯！

来源

2014-10-02 01:13:02

如何构建Flickr Feed的Pin-It按钮？

回答

相关问题