Niestandardowy przycisk Pinterest dla niestandardowego adresu URL (łącze tekstowe, obraz lub oba)

Question

Próbowałem znaleźć rozwiązanie, ale nie mogę. Potrzebuję niestandardowego obrazu dla Pinteresta (Przypnij go) i przypiąć niestandardowy obraz do adresu URL, ale nie do bieżącej strony.

Stworzyłem linka niestandardowe:

<a href="http://pinterest.com/pin/create/button/?url=http://inspired-ui.com&media={ImageURL}&description=DescriptionText" class="pinitbutton">Pin It</a> 

w stylu ustawić obraz tła ale widzę domyślnie tylko przycisk Pin It a nie mój własny przycisk

Istnieje kilka rozwiązań, w którym można ustawić niestandardowy Obraz przycisku dla przycisku Pin It, ale nie mogę zmienić nośnika = {ImageURL} w tych rozwiązaniach.

Popularna rozwiązaniem jest

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a> 

Ale to mi nie pomaga. Czy ktoś zna rozwiązanie?

Answer 1

Rzeczywiście popularnym rozwiązaniem przez Jeremy Mansfield na www.brandaiddesignco.com ma świetny sposób, aby dostosować przycisk Pinterest jakikolwiek sposób chcesz!

Zrobiłem trzy przykłady, w postaci jsFiddle na, dzięki czemu można zobaczyć, jak to zrobić za pomocą tej metody.

referencyjny:jsFiddle Text-Link method
referencyjny:jsFiddle Custom Logo method
referencyjny:jsFiddle Custom Logo and Image method

Więcej Pintereście informacji, zobacz moje inne SO Answer.

Answer 2

Ryzykując nadmiernego upraszczania rzeczy, używaj swojej ścieżki 'http://pinterest.com/pin/create/button/?url=', którą już masz, ustawiaj swoje zmienne i dołączaj je tak, jak to robisz, i po prostu nie włączaj żadnego JavaScriptu. Bez tego js nie znajdzie łącza i zastąpi go swoim własnym przyciskiem pinterest. Po prostu spersonalizuj swój link obrazem w środku (lub ustaw obraz tła lub cokolwiek innego) i wkręć pinterest js. Ustaw cel, aby otworzyć w nowym oknie.

Answer 3

Dodawanie zakodowany spacje przed ostatnim fragmentem URL uniemożliwi Pinterest JS z „porwania” link:

//pinterest.com/pin/create/%20button?url= 

Aktualizacja:

Wydaje się, że moje poprzednie rozwiązanie nie pracować już. Oto jeszcze jeden:

//pinterest.com/pin/create%2Fbutton/?url= 

Answer 4

niestandardowy link/przycisk wygląda tak:

<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt"> 
    Custom Pin it image or text here! 
</a> 

Uwaga: Nie sądzę atrybuty danych muszą być zakodowane (tak jak ja dla danych obrazów) ale wydaje się, że to nie szkodzi.

JQuery:

$('.btnPinIt').click(function() { 
    var url = $(this).attr('href'); 
    var media = $(this).attr('data-image'); 
    var desc = $(this).attr('data-desc'); 
    window.open("//www.pinterest.com/pin/create/button/"+ 
    "?url="+url+ 
    "&media="+media+ 
    "&description="+desc,"_blank"); 
    return false; 
}); 

Answer 5

Po trochę prób i błędów, poniżej jest co pracował dla mnie. Ta odpowiedź jest kombinacją wątku odpowiedzi @ rharvey i innego postu przepełnienia stosu. To rozwiązanie otwiera wyskakujące okienko do udostępniania treści za pośrednictwem Pinterest.

Uwaga: Aby zapobiec pojawieniu się dwóch okien, należy ustawić cel. Poniżej znajduje się pełne rozwiązanie:

<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt" target= "pinIt"> 
    Custom Pin it image or text here! 
</a> 

<script> 
$('.btnPinIt').click(function() { 
    var url = $(this).attr('href'); 
    var media = $(this).attr('data-image'); 
    var desc = $(this).attr('data-desc'); 
    window.open("//www.pinterest.com/pin/create/button/"+ 
    "?url="+url+ 
    "&media="+media+ 
    "&description="+desc,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320"); 
    return false; 
}); 
</script> 

Answer 6

Działa dla mnie idealnie. Skrypt

<script> 
    function pinIt() 
    { 
     var e = document.createElement('script'); 
     e.setAttribute('type','text/javascript'); 
     e.setAttribute('charset','UTF-8'); 
     e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999); 
     document.body.appendChild(e); 
    } 
    </script> 

nazywają go z

<a href="javascript:pinIt();">Pin</a> 

Answer 7

Oto co pracował dla mnie:

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-custom="true"><img src="../img/custompinint.png" /></a> 

atrybut data-pin-custom to co wziąłem z Pinterest documentation.

Mam nadzieję, że to pomoże.