Как я могу привести кнопку Pinterest's Pin It It?
https://stackoverflow.com/questions/9352021
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я пытаюсь создать и манипулировать кнопкой Pin It после загрузки страницы. Когда я меняю свойства кнопок с помощью JS, его следует зазойти, чтобы получить функциональность прикрепления динамически загруженных изображений. Итак, есть ли у Pinterest какой -либо метод, такой как функция Facebook B.xfbml.parse ()?
Спасибо...
Решение
Просто добавь 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 ярлык.
Другие советы
Лучший способ сделать это:
- Удалите iframe кнопки Pin It, которую хотите манипулировать
- Добавьте HTML для новой кнопки, манипулируя ее по мере желания
Realod их сценарий - т.е. с помощью jQuery:
$.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});
Чтобы отобразить кнопку 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 уже загружен на странице. Объект рендеринга имеет некоторые другие полезные методы, такие как ButterBookmark, Buttonfollow, Ebmedboard, внедрение, эльмистратор.
Я построил решение Derrek (и фиксированная не обнаруженная проблема переменной), чтобы сделать возможным динамическую загрузку кнопки Pinterest, поэтому она не может замедлить время нагрузки. Только касательно связан с первоначальным вопросом, но я подумал, что все равно поделюсь.
в конце документа:
<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, просто добавьте элемент с идентификатором Pinterestoption, т.е.
<div id="pinterestOption"></div>
Надеюсь, это кому -то поможет!
Вот что я сделал.
Сначала я посмотрел на Pinit.js и определил, что он заменяет специально маркированные якорь-якоря на iFrames. Я подумал, что могу написать логику JavaScript, чтобы получить имя хоста, используемое атрибутом SRC на сгенерированных iframes.
Итак, я вставил наценку в соответствии с обычными рекомендациями 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>
Затем, сразу после этого, я вставил сценарий, чтобы выдержать имя хоста для Pinterest CDN, из инъецированного iframe.
//
// 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);
Я переписал код кнопки Pinterest, чтобы поддержать анализ тегов Pinterest после загрузки содержания AJAX, аналогично FB.xfbml.parse () или Gapi.plusone.go (). В качестве бонуса альтернативный файл JavaScript в проекте поддерживает синтаксис HTML5-Valid.
Проверьте Pinterestplus Project в GitHub.
Вот что я сделал. Небольшая модификация @derrick Grigg, чтобы он работал на нескольких кнопках Pinterest на странице после перезагрузки Ajax.
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;
}
Попробуйте прочитать этот пост 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);
}
Их pinit.js Файл, ссылается в их «Прикрепите его» документы кнопки, не подвергает никаких глобалов. Он работает один раз и не оставляет след, кроме iframe, который он создает.
Вы можете снова ввести этот файл в новые кнопки «разобрать». Их JS смотрит на все якорные теги, когда он запускается, и заменяет их class="pin-it-button" с их кнопкой iframe'd.
Официальный способ сделать это-установить атрибут «Пин-контакт» при загрузке сценария:
<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 без тега скрипта.
Это прекрасно работает для меня: http://www.mediadevelopment.no/projects/pinit/ Он поднимает все данные на событии Click
Я попытался адаптировать их код для работы так же (запустите и забыл об этом), с добавлением, что вы можете сделать вызов pinterest.init (), чтобы иметь какие -либо «новые» кнопки на странице (например, Ajax. 'D In, созданный динамически и т. Д.) Включите в правильную кнопку.
Проект: https://github.com/onassar/js-pinterestСырой: https://raw.github.com/onassar/js-pinterest/master/pinterest.js
