ページの読み込み後に Pin It ボタンを作成して操作しようとしています。ボタンのプロパティをjsで変更すると、動的にロードされた画像を固定する機能を得るために再レンダリングする必要があります。では、Pinterest には Facebook の B.XFBML.parse() 関数のようなメソッドがありますか?
ありがとう...
19218 次
13 に答える
47
タグに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
于 2014-01-06T13:37:00.757 に答える
14
これを行う最良の方法は次のとおりです。
- 操作したい Pin It ボタンの iframe を削除します
- 必要に応じて操作する新しいボタンの html を追加します
スクリプトを再ロードします - つまり、jQuery を使用します。
$.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});
于 2012-02-23T18:03:13.263 に答える
9
ページがロードされた後に pin-it ボタンをレンダリングするには、以下を使用できます。
<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が既にページに読み込まれていると仮定します。render オブジェクトには他にも、buttonBookmark、buttonFollow、ebmedBoard、embedPin、embedUser などの便利なメソッドがいくつかあります。
于 2012-11-17T20:38:48.163 に答える
4
ピンタレストボタンを動的にロードできるようにするために、デレクのソリューション（および宣言されていない変数の問題を修正）を基に構築したため、ロード時間が遅くなることはありません。元の質問に接線的にのみ関連していますが、とにかく共有したいと思いました。
ドキュメントの最後に:
<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
ピンタレスト ボタンを表示するドキュメントで、id pinterestOption を持つ要素を追加するだけです。
<div id="pinterestOption"></div>
それが誰かを助けることを願っています!
于 2012-05-14T08:58:45.180 に答える
3
FB.XFBML.parse（）やgapi.plusone.go（）と同様に、AJAXコンテンツの読み込み後にPinterestタグの解析をサポートするようにPinterestボタンコードを書き直しました。ボーナスとして、プロジェクト内の代替JavaScriptファイルはHTML5有効な構文をサポートします。
GitHubでPinterestPlusプロジェクトをチェックしてください。
于 2012-06-21T19:03:42.210 に答える
3
これが私がしたことです。
最初に 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 から pinterest 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);
于 2012-03-21T17:31:41.530 に答える
2
この投稿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);
}
于 2012-04-04T20:28:14.000 に答える
2
これを行う公式の方法は、スクリプトをロードするときに「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 でレンダリングできる別の方法もあります。
于 2014-03-17T00:01:43.757 に答える
1
「Pin it」ボタンのドキュメントで参照されている pinit.jsファイルは、グローバルを公開していません。1 回実行され、作成した iframe 以外のトレースは残りません。
そのファイルを再度挿入して、新しいボタンを「解析」することができます。彼らの JS は、実行時にすべてのアンカー タグをclass="pin-it-button"調べ、それらを iframe 化されたボタンに置き換えます。
于 2012-02-21T05:15:23.890 に答える
0
これは私にとっては問題なく機能します：http ：//www.mediadevelopment.no/projects/pinit/クリックイベントですべてのデータを取得します
于 2012-03-07T20:00:56.830 に答える
0
Pinterest.init() を呼び出して、ページに「新しい」ボタンを表示できるように (例: ajax 'd in、動的に作成など) が適切なボタンに変わりました。
プロジェクト: https://github.com/onassar/JS-Pinterest Raw: https://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js
于 2012-10-12T20:54:14.147 に答える