বোতাম তৈরি না করেই পিন্টারেস্টে "এটি পিন করুন" এর লিঙ্ক


116

আমার দশ বা শত শত পোস্ট সহ একটি পৃষ্ঠা রয়েছে, প্রতিটি সামাজিক বোতাম সহ। আমি প্রতিটি url- এর জন্য সমস্ত বোতাম তৈরি করতে পারি না: এটি খুব ধীর (ফেসবুক, জি +, টুইটার, পিনটারেস্ট ... শত শত লিঙ্কের জন্য)। সুতরাং, ফ্লাইয়ে উত্পন্ন করার জন্য ফেসবুক শেয়ার বোতামটির পরিবর্তে, আমি নির্দেশিত একটি সাধারণ img ব্যবহার করি

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

যখন ব্যবহারকারী এটিতে ক্লিক করেন, ফেসবুকের মাধ্যমে উত্পন্ন সামগ্রী সহ একটি পপআপ উইন্ডো খোলে।

আমি কীভাবে এটি পিন্টারেস্টের জন্য করতে পারি? আমি কেবল বোতামটি তৈরি করতে কোডের চারপাশে খুঁজে পেয়েছি তবে সম্ভব হলে আমি জেএস এড়াতে চাই। নীচের মত কিছু আছে?

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

ধন্যবাদ, আমাকে জেএস বোতামটি ব্যবহার করার চেষ্টা করবেন না, ধন্যবাদ।

উত্তর:


183

স্ট্যান্ডার্ড Pinterest বোতাম কোড (যা আপনি এখানে তৈরি করতে পারেন ), এটি পিন্টেস্ট বোতামটি <a>মোড়ানো একটি ট্যাগ <img>

আপনি যদি 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 সিনট্যাক্স সহ আমার গিটহাব Pinterest বোতাম প্রকল্পটি দেখুন


3
দুর্দান্ত উত্তর, ধন্যবাদ! এছাড়াও অনুগ্রহ করে আমাদের পৃষ্ঠাটি বিকাশকারী.পিনট্রেস্ট.কম এ দেখুন: বিকাশকারী.পিনট্রেস্ট.
কেন্ট ব্রুস্টার

পিন ইট উইজেট বিল্ডার Business.pinterest.com/widget-builder/#do_pin_it_button এমন কিছু নমুনা কোড পাওয়ার জন্যও কার্যকর যা আপনি পরে প্রোগ্রামক্রমে কাস্টমাইজ করতে পারবেন।
উইলিয়াম ডেনিস

6
@ কেন্টব্রেউস্টার - এটির মূল্যের জন্য, আমি আপনার পৃষ্ঠাটি দেখার পরে একই প্রশ্নটি দিয়ে এখানে এসেছি। এটির তথ্যটি দুর্দান্ত, তবে এটি ইউআরএল প্যারামিটারগুলির বিষয়ে কথা বলে না বা ফেসবুক এবং টুইটার সমতুল্য পৃষ্ঠাগুলির মতো জাভাস্ক্রিপ্ট ছাড়াই (ফ্লাইতে বোতামগুলি তৈরি করার প্রসঙ্গে) ব্যবহার করা যেতে পারে।
xr280xr

বিবরণে আমার ইউরেলকোডটি কিছুটা জাঙ্কি। কোন ধারণা কেন? উদাহরণ: "এই মুহুর্তে, আমি & # 8217; আমি কেবল & পোস্ট; অনুলিপি করতে চলেছি অন্য পোস্ট থেকে পেস্ট করুন কারণ & amp; # 8230; সময়" " - অবশ্যই আদর্শের চেয়ে কম।
ইমপ্রেশনাল

2
উপরের উত্তরটি সূক্ষ্মভাবে কাজ করে যদি ব্যবহারকারী ইতিমধ্যে পিনটেস্টে লগ ইন থাকে তবে তা সফল লগইন হওয়ার পরেও এটি কেবল পিনারেস্টের হোম পেজেই থাকে। কোন সমাধান?
উদয়

69

আপনি যদি পিন এটি বোতামের পরিবর্তে একটি সাধারণ হাইপারলিংক তৈরি করতে চান,

এই পরিবর্তন:

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

এটি:

http://pinterest.com/pin/create/link/?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
আপনার যদি অন্য একটি পিনটেস্ট বোতাম আছে (এবং pinit.js স্ক্রিপ্ট লোড হয়েছে) তবে স্বীকৃত উত্তরটি একটি বোতাম উত্পন্ন করবে। 'বোতাম'-এর পরিবর্তে' লিঙ্ক 'রাখতে url পরিবর্তন করা আপনাকে আপনার পাদলেখতে একটি পিন্টারেস্ট বোতাম এবং নিজের পৃষ্ঠায় কোথাও একটি কাস্টম পিন্টারেস্ট লিঙ্ক রাখতে দেয়। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।
ashack

1
আপনার উত্তরের জন্য আপনাকে ধন্যবাদ, আমি ঠিক যা খুঁজছিলাম। এটি আমার মতে সঠিক উত্তর হওয়া উচিত :)
প্যাট্রিসিয়া

3
আমি এই উত্তর upvoted, কিন্তু পরে পাওয়া যখন পিন বের করার চেষ্টা করে Pinterest একটি ত্রুটি ছোঁড়া: 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.। সমাধানটি হ'ল ইউআরএলটিকে পাশাপাশি রাখুন buttonতবে পিন্টারেস্ট স্ক্রিপ্টটি উপেক্ষা করুন। দেখতে stackoverflow.com/a/15035520/440646
ঘুমানো

1
এখনও হিসাবে ত্রুটি ছুঁড়ে না: পি একটি সম্পত্তি তালিকা শেয়ার লিঙ্ক হিসাবে ব্যবহার করে:http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS
জ্যানি

6

আমিও একই প্রশ্ন করেছিলাম. এটি ওয়ার্ডপ্রেসে দুর্দান্ত কাজ করে!

<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 $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যা ইমেজ এবং বর্ণনা এইচটিএমএল 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> 

এই jifiddle উদাহরণ দেখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.