एक बटन उत्पन्न करने के बिना pinterest पर "इसे पिन" करने के लिए लिंक


116

मेरे पास एक पृष्ठ है जिसमें दसियों या सैकड़ों पोस्ट हैं, हर एक सामाजिक बटन के साथ है। मैं सिर्फ प्रत्येक url के लिए सभी बटन उत्पन्न नहीं कर सकता: यह बहुत धीमा है (फेसबुक, जी +, ट्विटर, Pinterest ... सैकड़ों लिंक के लिए)। इसलिए, फ़्लाई पर उत्पन्न होने वाले फ़ेसबुक शेयर बटन के बजाय, मैं एक साधारण आईएमजी इंगित करता हूं

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

जब उपयोगकर्ता उस पर क्लिक करता है, तो फेसबुक द्वारा उत्पन्न सामग्री के साथ एक पॉपअप विंडो खुलती है।

मैं इसे Pinterest के लिए कैसे कर सकता हूं? मैं केवल बटन उत्पन्न करने के लिए कोड के आसपास खोज करता हूं, लेकिन यदि संभव हो तो मैं js से बचना चाहूंगा। क्या निम्नलिखित में से कुछ ऐसा है?

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

कृपया मुझे js बटन का उपयोग करने की कोशिश न करें, धन्यवाद।

जवाबों:


183

मानक Pinterest बटन कोड (जो आप यहां उत्पन्न कर सकते हैं ), एक <a>टैग <img>है जो Pinterest बटन को लपेटता है ।

यदि आप pinit.jsअपने पृष्ठ पर स्क्रिप्ट शामिल नहीं करते हैं , तो यह <a>टैग "जैसा है" काम करेगा। आप इन टैगों पर अपने स्वयं के क्लिक हैंडलर को पंजीकृत करके अनुभव को बेहतर बना सकते हैं जो उचित आयामों के साथ एक नई विंडो खोलता है, या कम से कम target="_blank"टैग को जोड़कर इसे एक नई विंडो में खुले क्लिक बनाने के लिए।

टैग सिंटैक्स इस तरह दिखेगा:

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

यदि साझाकरण बटन के जावास्क्रिप्ट संस्करणों का उपयोग करना आपके पृष्ठ लोड समय को बर्बाद कर रहा है, तो आप अतुल्यकालिक लोडिंग विधियों का उपयोग करके अपनी साइट में सुधार कर सकते हैं। Pinterest बटन के साथ ऐसा करने के उदाहरण के लिए, एक बेहतर HTML5 सिंटैक्स के साथ मेरे GitHub Pinterest बटन प्रोजेक्ट को देखें


3
शानदार जवाब, धन्यवाद! इसके अलावा, कृपया हमारे पेज developer.pinterest.com पर यहां देखें: Developers.pinterest.com/pin_it
Kent Brewster

पिन इट विजेट बिल्डर business.pinterest.com/widget-builder/#do_pin_it_button कुछ नमूना कोड प्राप्त करने के लिए भी उपयोगी है जिन्हें आप तब प्रोग्राम के अनुसार अनुकूलित कर सकते हैं।
विलियम डेनिस

6
@KentBrewster - इसके लायक क्या है, मैं आपके पेज पर जाने के बाद उसी सवाल के साथ यहां समाप्त हुआ। यह जो जानकारी है वह सभी बहुत अच्छी है, लेकिन यह URL मापदंडों के बारे में बात नहीं करता है या यह कि फ़ेसबुक या ट्विटर के समकक्ष पृष्ठों की तरह जावास्क्रिप्ट (फ़्लाई पर बटन बनाने के संदर्भ में) के बिना जावास्क्रिप्ट का उपयोग किया जा सकता है।
xr280xr

विवरण पर मेरा urlencode थोड़ा सा जानदार है। कोई विचार क्यों? उदाहरण: "इस बिंदु पर, मैं & amp; # 8217; मी बस कॉपी करने जा रहा हूं & amp; एक और पेस्ट कर दूं क्योंकि & amp; # 8230; समय।" - जाहिर है आदर्श से कम।
इंपीरियल

2
उपर्युक्त उत्तर ठीक काम करता है यदि उपयोगकर्ता पहले से लॉग-इन Pinterest में है अन्यथा यह सफल लॉगिन के बाद भी केवल pinterest होम पेज में रहता है। कोई उपाय?
उदय

69

यदि आप पिन बटन के बजाय एक साधारण हाइपरलिंक बनाना चाहते हैं,

इसे बदलो:

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

इसके लिए:

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

तो, एक पूर्ण URL बस इस तरह दिख सकता है:

<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
मैं अपने खुद के लिंक बनाना पसंद करता हूं। क्या यह अभी भी काम कर रहा है, या उन्होंने इसे बदल दिया है?
नोव्यू

6
यदि आपके पास एक और Pinterest बटन है (और pinit.js स्क्रिप्ट भरी हुई है) तो स्वीकृत उत्तर एक बटन उत्पन्न करेगा। Url को 'बटन' के बजाय 'लिंक' में बदलने से आपको अपने फ़ूटर में एक pinterest बटन और अपने पेज पर कहीं एक कस्टम pinterest लिंक मिल सकेगा। यह स्वीकृत उत्तर होना चाहिए।
शाम

1
आपके उत्तर के लिए धन्यवाद, वास्तव में मैं क्या देख रहा था। मेरी राय में यह सही जवाब होना चाहिए :)
पेट्रीसिया

3
मैंने इस उत्तर को उकेरा, लेकिन बाद में पाया कि पिन्टरेस्ट पिन करने की कोशिश में एक त्रुटि फेंकता है 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.:। समाधान के रूप में url रखना है buttonलेकिन pinterest स्क्रिप्ट को अनदेखा करें। देखें stackoverflow.com/a/15035520/440646
आराम

1
अब तक कोई त्रुटि नहीं करता है: P एक संपत्ति लिस्टिंग शेयर लिंक के रूप में उपयोग कर रहा है:http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS
जेनी

6

मेरा भी यही सवाल था। यह Wordpress में बहुत अच्छा काम करता है!

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


2

मुझे वर्डप्रेस के लिए कुछ कोड मिला:

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

तो आप अपने 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>

2

तो आप बटन को स्थापित किए बिना कोड को पिन करना चाहते हैं? यदि हां, तो इस कोड को उस पृष्ठ के url के स्थान पर चिपकाएँ, जिससे आप पिन कर रहे हैं। यह बटन के बिना पिन इट बटन के रूप में कार्य करना चाहिए।

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
यह मेरे लिए काम किया, लेकिन 2 सवाल। आप पॉपअप को कैसे बनाए रख सकते हैं? इसके अलावा, यादृच्छिक गणित क्या करता है?
पैट

यह उनके 'बुकमार्कलेट' से Pinterest का आधिकारिक कोड है। यह आमतौर पर आपके द्वारा अपने बुकमार्क में सेव किए गए लिंक के रूप में उपयोग किया जाता है और Pinterest डायलॉग को लाने के लिए आपके द्वारा देखी जाने वाली किसी भी वेबसाइट पर क्लिक कर सकता है, लेकिन यह इस तरह से भी ठीक काम करता है, और इसे लागू करना आसान है।
कॉनरोड्डी

1
वे विशेष रूप से आपको एपीआई डॉक्स में ऐसा नहीं करने के लिए कहते हैं। सिर्फ इसलिए कि आप कर सकते हैं, इसका मतलब यह नहीं है कि आपको चाहिए।
इंपीरियल

0

आप वर्णित के रूप में एक कस्टम लिंक बना सकते हैं एक छोटी सी 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; 
});

यह कक्षा के साथ सभी लिंक के लिए काम करेगा linkPinItजिसमें छवि और HTML 5 डेटा विशेषताओं में संग्रहीत विवरण हैdata-image औरdata-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> 

इस jfiddle उदाहरण देखें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.