如何構建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按鈕？

回答

相關問題