Link do „przypięcia” na Pintereście bez generowania przycisku

116

Mam stronę z dziesiątkami lub setkami postów, każdy z przyciskami społecznościowymi. Po prostu nie mogę wygenerować wszystkich przycisków dla każdego adresu URL: jest zbyt wolny (facebook, g +, twitter, pinterest ... dla setek linków). Tak więc zamiast przycisku udostępniania na Facebooku, który ma być generowany w locie, używam prostego obrazu wskazującego na

https://www.facebook.com/sharer.php?u=${url_of_current_post}&t=

Po kliknięciu przez użytkownika otwiera się wyskakujące okienko z treścią wygenerowaną przez Facebooka.

Jak mogę to zrobić na Pinterest? Znajduję tylko kod do wygenerowania przycisku, ale chciałbym w ogóle uniknąć js, jeśli to możliwe. Czy jest coś takiego jak poniżej?

http://pinterest.com/pinthis?url=${url_of_current_post}

Nie próbuj zmuszać mnie do używania przycisku js, dzięki.

Narcolessico
źródło

Odpowiedzi:

183

Standardowy kod przycisku Pinterest (który możesz wygenerować tutaj ) to <a>tag opakowujący <img>przycisk Pinterest.

Jeśli nie umieścisz pinit.jsskryptu na swojej stronie, ten <a>tag będzie działał „tak jak jest”. Możesz poprawić to działanie, rejestrując własny moduł obsługi kliknięć w tych tagach, które otwierają nowe okno o odpowiednich wymiarach, lub przynajmniej dodając target="_blank"do tagu, aby otwierał kliknięcia w nowym oknie.

Składnia tagu wyglądałaby następująco:

<a href="http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

Jeśli korzystanie z JavaScript w wersjach przycisków udostępniania psuje czas wczytywania strony, możesz ulepszyć witrynę, stosując metody ładowania asynchronicznego. Aby zobaczyć przykład zrobienia tego za pomocą przycisku Pinterest, sprawdź mój projekt przycisku GitHub Pinterest z ulepszoną składnią HTML5 .

Mike Kibbel
źródło
3
Świetna odpowiedź, dzięki! Zapraszamy również na naszą stronę pod adresem developer.pinterest.com, tutaj: developers.pinterest.com/pin_it
Kent Brewster,
Kreator widgetów Pin It business.pinterest.com/widget-builder/#do_pin_it_button jest również przydatny do pobierania przykładowego kodu, który można następnie programowo dostosować.
William Denniss,
6
@KentBrewster - Na ile to jest warte, po odwiedzeniu twojej strony skończyłem z tym samym pytaniem. Informacje, które ma, są świetne, ale nie mówią o parametrach adresu URL ani o tym, że adres URL może być używany bez javascript (w kontekście tworzenia przycisków w locie), tak jak robią to odpowiedniki na Facebooku i Twitterze.
xr280xr
Mój kod urlen w opisie jest trochę dziwny. Każdy pomysł, dlaczego? Przykład: „W tym momencie zamierzam po prostu skopiować i wkleić z innego postu, ponieważ & amp; # 8230; czas”. - oczywiście mniej niż idealny.
Imperatywny
2
Powyższa odpowiedź działa dobrze, jeśli użytkownik jest już zalogowany na pinterest, w przeciwnym razie pozostanie na stronie głównej pinterest nawet po pomyślnym zalogowaniu. Jakieś rozwiązania?
Uday
69

Jeśli chcesz utworzyć proste hiperłącze zamiast przycisku przypnij to,

Zmień to:

http://pinterest.com/pin/create/button/?url=

Do tego:

http://pinterest.com/pin/create/link/?url=

Tak więc pełny adres URL może po prostu wyglądać tak:

<a href="https://pinterest.com/pin/create/link/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Pin it</a>

Joe Fletcher
źródło
2
Wolę tworzyć własne linki. Czy to nadal działa, czy też go zmienili?
nouveau
6
Zaakceptowana odpowiedź wygeneruje przycisk, jeśli masz inny przycisk Pinterest (i załadowany skrypt pinit.js). Zmiana adresu URL tak, aby zawierał „link” zamiast „przycisku”, umożliwi umieszczenie w stopce przycisku Pinterest i niestandardowego linku do strony internetowej w dowolnym miejscu na stronie. To powinna być akceptowana odpowiedź.
ashack
1
Dziękuję za odpowiedź, dokładnie to, czego szukałem. Moim zdaniem to powinna być właściwa odpowiedź :)
patricia
3
I upvoted tę odpowiedź, ale później okazało się, że Pinterest zgłasza błąd podczas próby pin: Parameter 'method' (value link) is not one of unknown, uploaded, scraped, bookmarklet, email, iphone, button, ipad, android, android_tablet, api_sdk, extension, api_other, bad.. Rozwiązaniem jest zachowanie adresu URL jako, buttonale zignorowanie skryptu pinterest. patrz stackoverflow.com/a/15035520/440646
odpoczynek
1
na razie nie zgłasza błędu: P użycie jako aukcji nieruchomości link do udostępnienia:http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS
Jeannie
6

Miałem to samo pytanie. To działa świetnie w Wordpress!

<a href="https://pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>
hawkdown14
źródło
4

W takich przypadkach bardzo przydatny okazał się generator linków udostępniania , który pomaga w tworzeniu przycisków udostępniania na Facebooku, Google+, Twitterze, Pinterest, LinkedIn.

bencergazda
źródło
2

Znalazłem kod do wordpressa:

 <script type="text/javascript">

    function insert_pinterest($content) {
        global $post;
        $posturl = urlencode(get_permalink()); //Get the post URL
        $pinspan = '<span class="pinterest-button">';
     $pinurl = '';
     $pinend = '</span>';
        $pattern = '//i';
        $replacement = $pinspan.$pinurl.'$2.$3'.$pindescription.$pinfinish.''.$pinend;
        $content = preg_replace( $pattern, $replacement, $content );
        //Fix the link problem
        $newpattern = '/<span class="pinterest-button"><\/a><\/span><\/a>/i';
     $replacement = '';
     $content = preg_replace( $newpattern, $replacement, $content );
     return $content;
    }
    add_filter( 'the_content', 'insert_pinterest' );

    </script>

Następnie umieść w swoim PHP:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>
isabela rodrigues
źródło
2

Więc chcesz, aby kod do przycisku przypiąć go bez instalowania przycisku? Jeśli tak, po prostu wklej ten kod w miejscu adresu URL strony, z której przypinasz. Powinien działać jako przypnij przycisk bez przycisku.

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

mng
źródło
1
To zadziałało dla mnie, ale 2 pytania. Jak możesz utrzymywać wyskakujące okienko? Co robi losowa matematyka?
Pat,
To oficjalny kod Pinteresta z ich „bookmarkletu”. Zwykle jest używany jako łącze, które zapisujesz w zakładkach i możesz kliknąć dowolną odwiedzaną witrynę, aby wyświetlić okno dialogowe Pinteresta, ale w ten sposób również działa dobrze i jest łatwe do wdrożenia.
ConorLuddy
1
Dość konkretnie mówią ci, abyś tego nie robił w dokumentacji API. To, że możesz, nie oznacza, że ​​powinieneś.
Imperatywny
0

Możesz utworzyć niestandardowy link zgodnie z opisem tutaj, używając małego skryptu jQuery

$('.linkPinIt').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","top=0,right=0,width=750,height=320");
    return false; 
});

będzie to działać dla wszystkich linków z klasą, linkPinItktóre mają obraz i opis przechowywane w atrybutach danych HTML 5 data-imageidata-desc

<a href="https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F" 
   data-image="https%3A%2F%2Fc4.staticflickr.com%2F8%2F7027%2F6851755809_df5b2051c9_b.jpg" 
   data-desc="Title for Pinterest Photo" class="linkPinIt">
    Pin it!
</a> 

zobacz ten przykład jfiddle

0x4a6f4672
źródło