2012-06-20 8 views
9

動的なPinterestボタンを作成する方法はありますか?私はメインのコンテンツが動的なサイトにPinterestのサポートを追加しようとしているので、現在のコンテンツが何であったとしても、ページソースにはPin Itボタンが1つしかありません。動的なPinterestボタンを作成しますか?

あらかじめハードコードされたURLを指定する必要があるため、あらかじめビルドされたピンインボタンでこれを行う方法はわかりません。

しかし、Pin Itブックマークレットもありますが、これはユーザーが手動でブックマークバーに追加する必要があります。

Pin Itボタンを修正する方法、または(b)ブックマークレットを現在のページコンテンツが何であれ固定するようにブックマークレットを統合する方法はありますか?興味を持っている人のため

答えて

17

は、ここで私がやったことだ:

HTML:

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

JS:

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

通常は、ブラウザのブックマークバーにピン留めするブックマークレットをクリックすると、 、ピンインする画像を選択するためのPinterest UIを表示する関数を自動実行するスクリプト(pinmarklet.js)を動的に挿入します。

代わりにリンク(#pinit)がクリックされたときにスクリプトが挿入されるように変更しました。また、idをスクリプト(#pinmarklet)に追加して、リンクをクリックするたびに削除($("#pinmarklet").remove();)することができます。そうしないと、リンクをクリックしたままで同じスクリプトへのリンクが重複することがあります。

とにかく、ページ内からブックマークレットと同じことをやっているというのが最終的な効果です。したがって、同じ方法で動作し、現在のページコンテンツが何であれ、それは他のコンテンツを動的に変更することができ、同じ1つの「Pin It」リンクによって取得されます。

+0

共有のおかげでヒープ! :D – Jess

+0

これは素晴らしいことです。何とか最高のソリューションであるために、Delorianは'12に戻ります。 – bplittle

0

私はimproved Pinterest button that supports an HTML5-valid syntax on GitHubを構築しました。

このソリューションを使用する方法は、サイトがサーバー側(PHPなどのバックエンド言語を使用)で動的にページを埋め込むか、クライアントサイドでJavaScriptとAJAXメソッドを使用してページを動的に埋め込むかによって異なります。サーバ側の場合

、あなたはテンプレートに記入し、そのdata-*属性でHTML5 <div>を生成し、その後<body>の近くに前<script>タグでpinterest-plus-html5.min.jsファイルをロードします。

クライアント側では、pinterest-plus-html5.min.jsファイルを<script>タグを<head>にロードするか、またはドキュメントに記載されているように非同期読み込みを使用してロードする必要があります。次に、JavaScriptでHTML5 <div>を生成し、ページにPinterestボタンタグを動的に挿入または置き換えてから、PinterestPlus.pinit()を呼び出して<div>をPinterestボタンに変換します。

こちらがお役に立てば幸いです。

0

単純なサーバー側の解決策はおそらくクライアント側よりも優れています。 The code is here(PHP、WordPressまたはASP)

+0

あなたの答えでいくつかのコードを追加してください。ユーザーはそれを参照することができます。 –

0

ボタンのhrefのパラメータによって制御されるピンストレストボタンのピン。コードの下

1

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

Pinterestのは、動的なボタンを構築するための "構築" 機能を提供します。つまり、動的にPinterestアンカーを生成することができます。&この関数をPinterestボタンに変換するには、pinit.jsと同じ方法でロードします。ここで

あなたは関数の名前を指定する方法について説明します。http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

0

私はフルスクリーンギャラリーのページを持って、ページの下部に1つだけPinterestのボタンで、私はこのページで終わりました解決策を探しています。その形式はurl('image.jpg')であるため、正規表現/\((.+)\)/は、バックグラウンド属性で画像のURLを解析便利ですので、正規表現はurl('')を削除し、パスだけを与える

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"); 

:なし成功で、私はこの思い付きました。

次に、私の新しい画像で属性data-pin-hrefを設定しました。素晴らしいです!

関連する問題