Я попытался найти решение, но не могу. Мне нужно настраиваемое изображение для кнопки Pinterest (Pin It) и вывести какое-то пользовательское изображение по URL-адресу, но не на текущую страницу.
Я создал пользовательскую ссылку:
<a href="#" onclick="location.href='http://pinterest.com/pin/create/button/?url=http://inspired-ui.com&media={ImageURL}&description=DescriptionText'; return false;" class="pinitbutton">Pin It</a>
в стиле Я установил фоновое изображение, но я вижу только кнопку Pin It по умолчанию, а не мою пользовательскую кнопку
Есть несколько решений, в которых вы можете установить собственное изображение кнопки для кнопки Pin It, но я не могу изменить медиа = {ImageURL} в этих решениях.
Популярным решением является
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>
Но это мне не помогает. Кто-нибудь знает решение?
Действительно, популярное решение Джереми Мэнсфилда в www.brandaiddesignco.com имеет отличный способ настроить кнопку Pinterest любым способом, который вы хотите
Я сделал три примера в форме jsFiddle, поэтому вы можете увидеть, как это делается с помощью этого метода.
Ссылка: Метод jsFiddle Text-Link
Ссылка: jsFiddle Пользовательский метод логотипа
Ссылка: jsFiddle Пользовательский логотип и метод изображения
Подробнее о Pinterest Info, см. мой другой SO-ответ.
Добавление закодированного пробела перед тем, как последний фрагмент URL-адреса помешает Pinterest JS "захватить" ссылку:
//pinterest.com/pin/create/%20button?url=
Update:
Кажется, что мое предыдущее решение больше не работает. Вот еще один:
//pinterest.com/pin/create%2Fbutton/?url=
Рискуя упростить вещи, используйте свой путь 'http://pinterest.com/pin/create/button/?url=', который у вас уже есть, настройте свои переменные и добавьте их так же, как и вы, и просто не включайте javascript в pinterest. Без этого js он не найдет ссылку и не заменит ее собственной кнопкой pinterest. Просто настройте свою ссылку с изображением внутри нее (или установите фоновое изображение или что-то еще) и закрутите pinterest js. Установите цель для открытия в новом окне.
Пользовательская ссылка/кнопка выглядит следующим образом:
<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt">
Custom Pin it image or text here!
</a>
Примечание. Я не думаю, что атрибуты данных должны быть закодированы (например, я сделал это для изображения данных), но, похоже, это не повредило его.
JQuery
$('.btnPinIt').click(function() {
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"_blank");
return false;
});
Вот что сработало для меня:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-custom="true"><img src="../img/custompinint.png" /></a>
Атрибут data-pin-custom - это то, что я взял из документация Pinterest.
Надеюсь, что это поможет.
После нескольких проб и ошибок, ниже работает то, что сработало для меня. Этот ответ представляет собой комбинацию потока ответов @rharvey и другого столбца. Это решение открывает всплывающее окно для совместного использования контента через pinterest.
Примечание. Чтобы предотвратить появление 2 окон, вам нужно установить цель. Ниже приведено полное решение:
<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt" target= "pinIt">
Custom Pin it image or text here!
</a>
<script>
$('.btnPinIt').click(function() {
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320");
return false;
});
</script>
Работает для меня отлично. Ваш script
<script>
function pinIt()
{
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script>
Назовите его
<a href="javascript:pinIt();">Pin</a>