Как создать кнопку Pin-It для ленты flickr?

Question

У меня есть поток flickr на моем сайте, и я хотел бы добавить кнопку Pinterest «Pin-it» под каждым изображением.

Вот сценарий подачи:

<script> 
    $.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&nsid=127682596@N07&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-адрес со ссылкой изображения.

Мое лучшее предположение заключается в том, что мне нужно определить переменную из URL-адреса flickr и заменить «/» на% 3F: «% 2A и тому подобное.

Так что-то вроде:

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

Вопрос 1 - Как я могу заменить несколько символов в одном .replace методе?

После того, который определен, мой следующий свинг в код будет выглядеть так:

<script> 
     $.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&nsid=127682596@N07&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 - Является ли это самый эффективный способ сделать это?

Answer 1

В итоге я использовал var encodedUrl = encodeURIComponent(large);, который сделал трюк.

Это оставило меня с

$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647581330595&nsid=127682596@N07&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>'); 
    }); 
    }); 

Ура!