Link zu "Pin it" auf pinterest, ohne eine Schaltfläche zu generieren


116

Ich habe eine Seite mit zehn oder Hunderten von Beiträgen, jeder mit sozialen Schaltflächen. Ich kann einfach nicht alle Schaltflächen für jede URL generieren: Es ist zu langsam (Facebook, G +, Twitter, Pinterest ... für Hunderte von Links). Anstelle des Facebook-Share-Buttons, der im laufenden Betrieb generiert werden soll, verwende ich ein einfaches Bild, auf das ich verweise

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

Wenn der Benutzer darauf klickt, wird ein Popup-Fenster mit Inhalten geöffnet, die von Facebook generiert wurden.

Wie kann ich das für Pinterest machen? Ich finde nur Code, um die Schaltfläche zu generieren, aber ich möchte js nach Möglichkeit überhaupt vermeiden. Gibt es so etwas wie das Folgende?

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

Bitte versuchen Sie nicht, mich dazu zu bringen, den js-Button zu benutzen, danke.

Antworten:


183

Der Standard-Pinterest-Schaltflächencode (den Sie hier generieren können ) ist ein <a>Tag, das einen <img>der Pinterest-Schaltflächen umschließt.

Wenn Sie das pinit.jsSkript nicht in Ihre Seite aufnehmen, <a>funktioniert dieses Tag "wie es ist". Sie können die Benutzererfahrung verbessern, indem Sie Ihren eigenen Klick-Handler für diese Tags registrieren, die ein neues Fenster mit den entsprechenden Abmessungen target="_blank"öffnen , oder zumindest das Tag erweitern, um Klicks in einem neuen Fenster zu öffnen.

Die Tag-Syntax würde folgendermaßen aussehen:

<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>

Wenn die Verwendung der JavaScript-Versionen von Freigabeschaltflächen die Ladezeiten Ihrer Seite beeinträchtigt, können Sie Ihre Website mithilfe asynchroner Lademethoden verbessern. Ein Beispiel dafür finden Sie in meinem GitHub Pinterest-Schaltflächenprojekt mit einer verbesserten HTML5-Syntax .


3
Tolle Antwort, danke! Besuchen Sie auch unsere Seite auf developer.pinterest.com, hier: developer.pinterest.com/pin_it
Kent Brewster

Der Pin It Widget Builder business.pinterest.com/widget-builder/#do_pin_it_button ist auch nützlich, um Beispielcode zu erhalten, den Sie dann programmgesteuert anpassen können.
William Denniss

6
@ KentBrewster - Für das, was es wert ist, bin ich hier mit der gleichen Frage gelandet, nachdem ich Ihre Seite besucht habe. Die Informationen, die es enthält, sind alle großartig, aber es geht nicht um die URL-Parameter oder darum, dass die URL ohne Javascript (im Zusammenhang mit dem Erstellen von Schaltflächen im laufenden Betrieb) verwendet werden kann, wie dies bei Facebook- und Twitter-entsprechenden Seiten der Fall ist.
xr280xr

Mein Urlencode in der Beschreibung ist etwas ruckelig. Irgendeine Idee warum? Beispiel: "Zu diesem Zeitpunkt werde ich nur & amp; # 8217; kopieren & amp; Einfügen aus einem anderen Beitrag, weil & amp; # 8230; Zeit." - offensichtlich weniger als ideal.
Imperativ

2
Die obige Antwort funktioniert einwandfrei, wenn der Benutzer bereits bei pinterest angemeldet ist. Andernfalls bleibt sie auch nach erfolgreicher Anmeldung auf der pinterest-Startseite. Irgendwelche Lösungen?
Uday

69

Wenn Sie einen einfachen Hyperlink anstelle der Pin-It-Schaltfläche erstellen möchten,

Ändere das:

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

Dazu:

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

Eine vollständige URL könnte also einfach so aussehen:

<a href="https://stackoverflow.com//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>


2
Ich ziehe es vor, meine eigenen Links zu erstellen. Funktioniert das noch oder haben sie es geändert?
Jugendstil

6
Die akzeptierte Antwort generiert eine Schaltfläche, wenn Sie eine andere pinterest-Schaltfläche haben (und das Skript pinit.js geladen ist). Wenn Sie die URL so ändern, dass "Link" anstelle von "Schaltfläche" angezeigt wird, können Sie eine pinterest-Schaltfläche in Ihrer Fußzeile und einen benutzerdefinierten pinterest-Link irgendwo auf Ihrer Seite haben. Dies sollte die akzeptierte Antwort sein.
Ashack

1
Vielen Dank für Ihre Antwort, genau das, wonach ich gesucht habe. Dies sollte meiner Meinung nach die richtige Antwort sein :)
Patricia

3
Ich habe diese Antwort positiv bewertet, aber später festgestellt, dass pinterest beim Versuch, Folgendes anzuheften, einen Fehler auslöst : 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.. Die Lösung besteht darin, die URL buttonbeizubehalten, das pinterest-Skript jedoch zu ignorieren. siehe stackoverflow.com/a/15035520/440646
Ruhe

1
wirft ab sofort keinen Fehler: P als Eigenschaftsliste verwenden Share-Link:http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS
Jeannie

6

Ich hatte die gleiche Frage. Dies funktioniert hervorragend in Wordpress!

<a href="https://stackoverflow.com//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>


2

Ich habe einen Code für WordPress gefunden:

 <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>

Dann fügen Sie Folgendes in Ihr PHP ein:

<?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>

2

Sie möchten also, dass der Code auf die Pin-It-Schaltfläche gesetzt wird, ohne die Schaltfläche zu installieren? Wenn ja, fügen Sie diesen Code einfach anstelle der URL der Seite ein, von der aus Sie anheften. Es sollte als Pin-It-Taste ohne Taste fungieren.

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)})());


1
Das hat bei mir geklappt, aber 2 Fragen. Wie können Sie das Popup pflegen? Was macht die Zufallsmathematik?
Pat

Es ist der offizielle Code von Pinterest aus dem "Lesezeichen". Es wird normalerweise als Link verwendet, den Sie in Ihren Lesezeichen speichern, und kann auf jede Website klicken, die Sie besuchen, um einen Pinterest-Dialog aufzurufen. Es funktioniert jedoch auch auf diese Weise und ist einfach zu implementieren.
ConorLuddy

1
Sie weisen Sie ausdrücklich darauf hin, dies in den API-Dokumenten nicht zu tun. Nur weil du kannst, heißt das nicht, dass du es solltest.
Imperativ

0

Sie können einen benutzerdefinierten Link wie hier beschrieben mit einem kleinen jQuery-Skript erstellen

$('.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; 
});

Dies funktioniert für alle Links mit Klassen, bei linkPinItdenen das Bild und die Beschreibung in den HTML 5-Datenattributen data-imageund gespeichert sinddata-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> 

siehe dieses Beispiel

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.