Пользовательская кнопка Pinterest для пользовательского URL (текстовая ссылка, изображение или и то, и другое)

Я попытался найти решение, но не могу. Мне нужно настраиваемое изображение для кнопки 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(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>

Но это мне не помогает. Кто-нибудь знает решение?

Ответ 1

Действительно, популярное решение Джереми Мэнсфилда в www.brandaiddesignco.com имеет отличный способ настроить кнопку Pinterest любым способом, который вы хотите

Я сделал три примера в форме jsFiddle, поэтому вы можете увидеть, как это делается с помощью этого метода.

Ссылка: Метод jsFiddle Text-Link
Ссылка: jsFiddle Пользовательский метод логотипа
Ссылка: jsFiddle Пользовательский логотип и метод изображения

Подробнее о Pinterest Info, см. мой другой SO-ответ.

Ответ 2

Добавление закодированного пробела перед тем, как последний фрагмент URL-адреса помешает Pinterest JS "захватить" ссылку:

//pinterest.com/pin/create/%20button?url=

Update:

Кажется, что мое предыдущее решение больше не работает. Вот еще один:

//pinterest.com/pin/create%2Fbutton/?url=

Ответ 3

Рискуя упростить вещи, используйте свой путь 'http://pinterest.com/pin/create/button/?url=', который у вас уже есть, настройте свои переменные и добавьте их так же, как и вы, и просто не включайте javascript в pinterest. Без этого js он не найдет ссылку и не заменит ее собственной кнопкой pinterest. Просто настройте свою ссылку с изображением внутри нее (или установите фоновое изображение или что-то еще) и закрутите pinterest js. Установите цель для открытия в новом окне.

Ответ 4

Пользовательская ссылка/кнопка выглядит следующим образом:

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

Ответ 5

Вот что сработало для меня:

<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.

Надеюсь, что это поможет.

Ответ 6

После нескольких проб и ошибок, ниже работает то, что сработало для меня. Этот ответ представляет собой комбинацию потока ответов @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>

Ответ 7

Работает для меня отлично. Ваш 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>