9

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

ハードコーディングされた URL を事前に指定する必要があるため、事前に作成された Pin It ボタンを使用してこれを行う方法がわかりません。

ただし、私が望む効果を実現する Pin It ブックマークレットもありますが、ユーザーが手動でブックマーク バーに追加する必要があります。

(a) [Pin It] ボタンを変更するか、(b) ブックマークレットをページに統合して、現在のページのコンテンツが何であれピン留めする方法はありますか?

4

7 に答える 7

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

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

これを変更して、代わりにリンクがクリックされたときにスクリプトが挿入されるようにしました ( #pinit)。またid、スクリプト ( )に を追加して、リンクがクリックされるたびにスクリプト#pinmarkletを削除 ( ) し、再度追加できるようにしました。$("#pinmarklet").remove();

とにかく、最終的な結果として、ブックマークレットと同じことを、代わりにページ内から実行しているということになります。したがって、同じように機能し、現在のページ コンテンツが何であれ取得します。つまり、他のコンテンツを動的に変更でき、同じ「Pin It」リンクで取得できます。

于 2012-06-21T13:50:47.403 に答える
1

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-30T09:26:42.417 に答える
0

Pinterest は、動的ボタンを作成するための「ビルド」機能を提供します。つまり、Pinterest アンカーを動的に生成し、この関数を使用して Pinterest ボタンに変換できます。これは、pinit.js が読み込まれるときと同じ方法です。

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

于 2013-11-11T12:27:29.833 に答える
0

シンプルなサーバー側のソリューションは、おそらくクライアント側よりも優れています。 コードはこちら(PHP、WordPress または ASP)

于 2013-01-17T11:57:28.983 に答える
0

ページの下部にピンタレストボタンが1 つしかないフルスクリーン ギャラリーのページがあり、解決策を探してこのページにたどり着きました。成功しなかったので、私はこれを思いつきました：

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

正規表現/\((.+)\)/は、バックグラウンド属性の画像 URL を解析するのに役立ちます。その形式はurl('image.jpg')であるため、正規表現は を削除しurl('')てパスのみを提供します。

次にdata-pin-href、新しい画像で属性を設定するだけで、うまく機能します!

于 2014-09-11T15:43:44.463 に答える
0

GitHub で HTML5 有効な構文をサポートする改善された Pinterest ボタンを作成しました。

このソリューションの使用方法は、サイトがサーバー側 (PHP またはその他のバックエンド言語を使用) で動的にページを作成するか、JavaScript および AJAX メソッドを介してクライアント側でページを作成するかによって異なります。

サーバー側では、属性がテンプレートに入力された HTML5<div>を生成し、.data-*pinterest-plus-html5.min.js<script><body>

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

これが役立つことを願っています！

于 2012-06-26T16:32:20.137 に答える