web-dev-qa-db-ja.com

PinterestのPinItボタンを再レンダリングするにはどうすればよいですか？

ページの読み込み後に[ピン留め]ボタンを作成して操作しようとしています。 jsでボタンのプロパティを変更すると、動的に読み込まれた画像を固定する機能を取得するために再レンダリングする必要があります。では、PinterestにはFacebookのB.XFBML.parse（）関数のようなメソッドがありますか？

ありがとう...

javascriptajaxasynchronouspinterest
21
onur

data-pin-build属性をSCRIPTタグに追加するだけです。

<script defer
  src="//assets.pinterest.com/js/pinit.js"
  data-pin-build="parsePinBtns"></script>

これにより、pinit.jsはその内部build関数をグローバルwindowオブジェクトにparsePinBtns関数として公開します。

次に、これを使用して、暗黙的な要素内のリンクまたはページ上のすべてのリンクを解析できます。

// parse the whole page
window.parsePinBtns();

// parse links in #pin-it-buttons element only
window.parsePinBtns(document.getElementById('pin-it-buttons'));

ヒント： ゼロカウントを表示するには、data-pin-zero="1"をSCRIPTタグに追加するだけです。

45
Styx

これを行うための最良の方法：

  1. 操作するPinItボタンのiframeを削除します
  2. 必要に応じて操作する新しいボタンのhtmlを追加します

  3. スクリプトを再構築します-つまり、jQueryを使用します：

    $.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});
14
Carlo Mallone

ページの読み込み後にピン留めボタンをレンダリングするには、次のコマンドを使用できます。

<a href="..pin it link.." id="mybutton" class="pin-it-button" count-layout="none">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" width="43" height="21" title="Pin It" />
</a>
<script>
    var element = document.getElementById('mybutton');
    (function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element);
</script>

もちろん、assets.pinterest.com/js/pinit.jsがすでにページにロードされていると仮定します。レンダーオブジェクトには、buttonBookmark、buttonFollow、ebmedBoard、embedPin、embedUser）のような他の便利なメソッドがいくつかあります。。

9
Tsanyo Tsanev

私はDerrekのソリューション（および宣言されていない変数の問題を修正）に基づいて、ピンタレストボタンを動的にロードできるようにしました。これにより、ロード時間が遅くなる可能性はありません。元の質問に接線方向に関連しているだけですが、とにかく共有したいと思いました。

ドキュメントの終わりに：

<script type="text/javascript">
addPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    pinJs = '//assets.pinterest.com/js/pinit.js';
    //url = escape(url);
    url = encodeURIComponent(url);
    media = encodeURIComponent(media);
    description = encodeURIComponent(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="vertical"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('#pinterestOption').html(html);

    //add pinterest js
    js = document.createElement('script');
    js.src = pinJs;
    js.type = 'text/javascript';
    document.body.appendChild(js);
}
</script>

ドキュメント準備完了機能：

addPinterestButton('pageURL', 'img', 'description');//replace with actual data

pinterestボタンを表示するドキュメントで、IDがpinterestOptionの要素を追加するだけです。

<div id="pinterestOption"></div>

それが誰かを助けることを願っています！

4
Jay Paroline

AJAXコンテンツ、FB.XFBML.parse（）またはgapi.plusone.go（）と同様に、Pinterestタグの解析をサポートするようにPinterestボタンコードを書き直しました。ボーナスとして、プロジェクト内の代替JavaScriptファイルは、HTML5で有効な構文をサポートしています。

GitHubで PinterestPlusプロジェクトをチェックしてください。

3
Mike Kibbel

これが私がしたことです。

最初にpinit.jsを調べて、特別にマークされたアンカータグがIFRAMEに置き換えられることを確認しました。生成されたiframeのsrc属性で使用されるホスト名を取得するJavaScriptロジックを記述できると思いました。

そこで、pinterestによる通常の推奨に従ってマークアップを挿入しましたが、アンカータグを非表示のdivに配置しました。

<div id='dummy' style='display:none;'>
<a href="http://pinterest.com/pin/create/button/?
    url=http%3A%2F%2Fpage%2Furl
    &media=http%3A%2F%2Fimage%2Furl" 
   class="pin-it-button" count-layout="horizontal"></a>
</div>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>

次に、その直後に、挿入されたiframeからピンタレストCDNのホスト名を削除するスクリプトを挿入しました。

//
// pint-reverse.js
//
// logic to reverse-engineer pinterest buttons.
//
// The standard javascript module from pinterest replaces links to
// http://pinterest.com/create/button with links to some odd-looking
// url based at cloudfront.net. It also normalizes the URLs.
//
// Not sure why they went through all the trouble. It does not work for
// a dynamic page where new links get inserted.  The pint.js code
// assumes a static page, and is designed to run "once" at page creation
// time.
//
// This module spelunks the changes made by that script and
// attempts to replicate it for dynamically-generated buttons.
//

pinterestOptions = {};

(function(obj){

    function spelunkPinterestIframe() {
        var iframes = document.getElementsByTagName('iframe'),
            k = [], iframe, i, L1 = iframes.length, src, split, L2;

        for (i=0; i<L1; i++) {
            k.Push(iframes[i]);
        }
        do {
            iframe = k.pop();
            src = iframe.attributes.getNamedItem('src');
            if (src !== null) {
                split = src.value.split('/');
                L2 = split.length;
                obj.Host = split[L2 - 2];
                obj.script = split[L2 - 1].split('?')[0];
                //iframe.parentNode.removeChild(iframe);
            }
        } while (k.length>0);
    }

    spelunkPinterestIframe();

}(pinterestOptions));

次に、

function getPinMarkup(photoName, description) {
    var loc = document.location,
        pathParts = loc.pathname.split('/'),
        pageUri = loc.protocol + '//' + loc.hostname + loc.pathname,
        href = '/' + pathToImages + photoName,
        basePath = (pathParts.length == 3)?'/'+pathParts[1]:'',
        mediaUri = loc.protocol+'//'+loc.hostname+basePath+href,
        pinMarkup;

    description = description || null;

    pinMarkup = '<iframe class="pin-it-button" ' + 'scrolling="no" ' +
        'src="//' + pinterestOptions.Host + '/' + pinterestOptions.script +
        '?url=' + encodeURIComponent(pageUri) +
        '&media=' + encodeURIComponent(mediaUri);

    if (description === null) {
        description = 'Insert standard description here';
    }
    else {
        description = 'My site - ' + description;
    }

    pinMarkup += '&description=' + encodeURIComponent(description);
    pinMarkup += '&title=' + encodeURIComponent("Pin this " + tagType);
    pinMarkup += '&layout=horizontal&count=1">';
    pinMarkup += '</iframe>';
    return pinMarkup;
}

そして、次のようにjQueryから使用します。

    var pinMarkup = getPinMarkup("snap1.jpg", "Something clever here");
    $('#pagePin').empty(); // a div...
    $('#pagePin').append(pinMarkup);
3
Cheeso

これが私がしたことです.. AJAXリロード後、ページ上の複数のピンタレストボタンで機能するように@DerrickGriggを少し変更しました。

refreshPinterestButton = function () {
    var url, media, description, pinJs, href, html, newJS, js;
    var pin_url;
    var pin_buttons = $('div.pin-it a');
    pin_buttons.each(function( index ) {
        pin_url = index.attr('href');
        url = escape(getUrlVars(pin_URL)["url"]);
        media = escape(getUrlVars(pin_URL)["media"]);
        description = escape(getUrlVars(pin_URL)["description"]);
        href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
        html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
        index.parent().html(html);
    });

    //remove and add pinterest js
    pinJs = '//assets.pinterest.com/js/pinit.js';
    js = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    js.remove();
    js = document.createElement('script');
    js.src = pinJs;
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

});


function getUrlVars(pin_URL)
{
    var vars = [], hash;
    var hashes = pin_URL.slice(pin_URL.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.Push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
2
Sreejith Sreenivasan

この投稿を読んでみてください http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ 小さなjavascriptを使用して、pinterest iframeを新しいボタンに置​​き換えてから、リロードしますpinit.jsファイル。以下はトリックを行うためのJavaScriptです

refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('div.pin-it').html(html);

    //remove and add pinterest js
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    pinJs.remove();
    js = document.createElement('script');
    js.src = pinJs.attr('src');
    js.type = 'text/javascript';
    document.body.appendChild(js);
}
2
Derrick Grigg

これを行う公式の方法は、スクリプトをロードするときに「data-pin-build」属性を設定することです。

<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>

次に、次のようにボタンを動的にレンダリングできます。

// render buttons inside a scoped DOM element
window.parsePins(buttonDomElement);

// render the whole page
window.parsePins();

このサイトには、 スクリプトタグなしでJavaScriptでレンダリングする を可能にする別のメソッドもあります。

1
Kamo

"Pin it"ボタンのドキュメント で参照されている pinit.js ファイルは、グローバルを公開しません。一度実行すると、作成したiframe以外のトレースは残りません。

そのファイルを再度挿入して、新しいボタンを「解析」することができます。彼らのJSは、実行時にすべてのアンカータグを調べ、iframeされたボタンでclass="pin-it-button"に置き換えます。

1
Ross Allen

これは私にとっては問題なく動作します： http://www.mediadevelopment.no/projects/pinit/ クリックイベントですべてのデータを取得します

0
pete

私は彼らのコードを同じように機能するように適応させようとしました（立ち寄って、それを忘れてください）。さらに、Pinterest.init（）を呼び出して、ページに「新しい」ボタン（ajaxなど）を追加できます。 'd in、動的に作成など）が適切なボタンに変わりました。

プロジェクト： https://github.com/onassar/JS-Pinterest Raw： https://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js

0
onassar