एक गतिशील Pinterest बटन बनाएँ?

क्या गतिशील Pinterest बटन बनाने का कोई तरीका है? मैं उस साइट पर Pinterest समर्थन जोड़ने की कोशिश कर रहा हूं जहां मुख्य सामग्री गतिशील है, इसलिए मेरे पास केवल उस पृष्ठ स्रोत में एक पिन पिन बटन होगा जो वर्तमान सामग्री को पिन करता है।एक गतिशील Pinterest बटन बनाएँ?

मैं प्रीबिल्ट पिन इट बटन के साथ ऐसा करने का कोई तरीका नहीं समझ सकता, क्योंकि यह आवश्यक है कि आप समय से पहले एक हार्डकोड यूआरएल निर्दिष्ट करें।

हालांकि, यहां एक पिन इट बुकमार्लेट भी है जो मुझे प्राप्त होने वाले प्रभाव को प्राप्त करता है - लेकिन इसके लिए उपयोगकर्ता को मैन्युअल रूप से इसे अपने बुकमार्क बार में जोड़ने की आवश्यकता होती है।

क्या कोई तरीका है कि मैं या तो (ए) पिन इट बटन को संशोधित कर सकता हूं, या (बी) किसी भी तरह से बुकमार्क पेज को मेरे पृष्ठ में एकीकृत कर सकता है जैसे कि यह वर्तमान पृष्ठ की सामग्री को पिन करेगा?

स्रोत

2012-06-20 daGUY

जो कोई रुचि है के लिए, यहाँ मैं क्या किया है:

HTML:

<a href="#" id="pinit">Pin It</a>

जे एस:

$(document).ready(function(){ 
    $("#pinit").click(function(){ 
     $("#pinmarklet").remove(); 
     var e = document.createElement('script'); 
     e.setAttribute('type','text/javascript'); 
     e.setAttribute('charset','UTF-8'); 
     e.setAttribute('id','pinmarklet'); 
     e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e); 
    }); 
});

आम तौर पर, आप ब्राउज़र के बुकमार्क बार में पिन यह बुकमार्कलेट पर क्लिक करें जब , यह गतिशील रूप से एक स्क्रिप्ट (pinmarklet.js) डाला जाता है जो एक फ़ंक्शन को स्वत: निष्पादित करता है जो Pinterest UI को चुनता है कि आप कौन सी छवियों को पिन करना चाहते हैं।

मैंने इसे संशोधित किया ताकि स्क्रिप्ट तब डाली जा सके जब एक लिंक क्लिक किया जाता है (#pinit)। मैंने स्क्रिप्ट (#pinmarklet) में id भी जोड़ा है ताकि मैं इसे हटा सकूं ($("#pinmarklet").remove();) और प्रत्येक बार लिंक क्लिक होने पर इसे दोबारा जोड़ दें - अन्यथा, यदि आप लिंक पर क्लिक करते रहें तो उसी स्क्रिप्ट के डुप्लिकेट लिंक पिलिंग रखें।

वैसे भी, अंत प्रभाव यह है कि आप बुकमार्लेट के समान ही कर रहे हैं, बस पृष्ठ के भीतर से ही। तो यह वैसे ही काम करता है और जो भी वर्तमान पृष्ठ सामग्री है उसे खींचता है, जिसका अर्थ है कि आप अन्य सामग्री को गतिशील रूप से बदल सकते हैं और इसे उसी "पिन पिन" लिंक द्वारा उठाया जाएगा।

स्रोत

2012-06-21 13:50:47 daGUY

साझा करने के लिए धन्यवाद ढेर! : डी – Jess

यह बहुत अच्छा है। डेलोरियन अभी भी '12 के लिए सबसे अच्छा समाधान, किसी भी तरह से। – bplittle

मैंने improved Pinterest button that supports an HTML5-valid syntax on GitHub बनाया है।

जिस तरह से आप इस समाधान का उपयोग करेंगे, इस पर निर्भर करता है कि आपकी साइट सर्वर पक्ष (PHP या कुछ अन्य बैकएंड भाषा के साथ) या जावास्क्रिप्ट और AJAX विधियों के माध्यम से क्लाइंट साइड पर पृष्ठ को गतिशील रूप से पॉप्युलेट कर रही है या नहीं।

सर्वर साइड के लिए, आप अपने data-* टेम्पलेट में भरा विशेषताओं के साथ एचटीएमएल 5 <div> उत्पन्न होगा और उसके बाद <body> बंद होने से पहले एक <script> टैग के साथ pinterest-plus-html5.min.js फ़ाइल लोड।

क्लाइंट पक्ष के लिए, आप pinterest-plus-html5.min.js फ़ाइल को लोड करने,, दस्तावेज़ में वर्णित की आवश्यकता होगी या तो <head> में एक <script> टैग के साथ या अतुल्यकालिक लोड हो रहा है के माध्यम से। इसके बाद, आप जावास्क्रिप्ट के साथ HTML5 <div> उत्पन्न करेंगे, पृष्ठ पर Pinterest बटन टैग को गतिशील रूप से डालें या बदलें और फिर PinterestPlus.pinit() पर <div> को Pinterest बटन पर कनवर्ट करने के लिए कॉल करें।

मुझे आशा है कि इससे मदद मिलती है!

स्रोत

2012-06-26 16:32:20

क्लाइंट पक्ष की तुलना में एक साधारण सर्वर-साइड समाधान शायद बेहतर है। The code is here (PHP, वर्डप्रेस या एएसपी)

स्रोत

2013-01-17 11:57:28 user1987005

अपने उत्तर के साथ कुछ कोड जोड़ें। तो उपयोगकर्ता इसे संदर्भित कर सकते हैं। –

बटन के href में पैरामीटर द्वारा पिंट्रेस्ट बटन पिन को नियंत्रित किया जाता है।

स्रोत

2013-05-17 04:29:06 chuckles

गतिशील लिंक Pinterest

के लिए

कोड नीचे विभिन्न पृष्ठों के लिए डायनामिक Pinterest बटन उत्पन्न होगा।

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none"> 
<img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0"> 
</a>

स्रोत

2013-08-30 09:26:42 Cnab

Pinterest गतिशील बटन के निर्माण के लिए एक "का निर्माण" समारोह प्रदान करता है। इसका मतलब है कि आप अपने Pinterest एंकरों को गतिशील रूप से & उत्पन्न कर सकते हैं इस फ़ंक्शन का उपयोग इसे Pinterest बटन में परिवर्तित करने के लिए करें, वैसे ही pinit.js लोड होने पर करता है।

यहाँ बताते हैं कि कैसे आप समारोह का नाम निर्दिष्ट कर सकते हैं: पृष्ठ के तल पर केवल एक ही Pinterest बटन के साथ, http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

स्रोत

2013-11-11 12:27:29 phidias

मैं एक पूर्ण स्क्रीन गैलरी के साथ एक पृष्ठ है, मैं इस पेज में समाप्त हो गया एक समाधान की तलाश में कोई सफलता के साथ मैं इस के साथ आया था:

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1]; 
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

regex /$(.+)$/, पृष्ठभूमि विशेषता में छवि यूआरएल पार्स करने के लिए उपयोगी है, क्योंकि इसके प्रारूप url('image.jpg') है, इसलिए regex url('') दूर करता है और केवल पथ देता है।

फिर मैंने अपनी नई छवि के साथ विशेषता data-pin-href सेट की है, बहुत अच्छा काम करता है!

स्रोत

2014-09-11 15:43:44

उत्तर

संबंधित मुद्दे