2013-12-23

Кнопка Pinterest на изображениях блога

Кнопка Pinterest на изображениях блога
Pinterest – очень популярная зарубежная социальная сеть изображений. Здесь пользователи делятся интересными картинками, ссылки с которых ведут на сайты-источники. С этой сети можно получить хороший трафик. Я хочу поделиться с вами скриптами, которые добавят на ваши изображения вашего блога кнопки pinterest.
1 способ добавления кнопки Pinterest (pin in) на изображения:
Для Blogger – добавьте код перед тегом </body> в редакторе html кода Шаблона блога.
Для wordress – можете добавить виджет Текст и добавить в него скрипт:
<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Теперь при наведении курсора на картинку в левом верхнем углу будет всплывать кнопка pinterest:
Кнопка Pinterest на изображениях блога
2 способ
Скрипт добавляем также, как и в первом способе (в тело шаблона блога). Только код скрипта другой:
/*
<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
</script>
Этот код добавляет кнопку Pin it в центральную часть каждого изображения. Возможно другое размещение кнопки. Для этого замените значение var bs_pinButtonPos = "center"; на:
  • topleft – сверху слева,
  • topright – сверху справа,
  • bottomleft – снизу слева,
  • bottomright – снизу справа.
Вы можете поменять кнопку Pinterest на собственную. Для этого измените прямую ссылку на изображение-кнопку (выделена в желтым) на другую.
Если вы хотите указать более точное значение расположение кнопки, то в шаблоне блога blogger добавьте код .pinit-wrapper {margin:-10px;} перед тегом ]]</b:skin>
pinterest-blogger
Заключение. Не зависимо от того, каким способом вы добавили кнопку pinterest на изображение, вы можете удалить кнопки с картинок, на которых не хотите видеть этой кнопки. Например, изображение профиля, ваши личные фото и пр.
Для этого в редакторе html отдельного сообщения добавьте к коду изображения nopin=”nopin”:
Кнопка Pinterest на изображениях блога
скриншот кликабелен

11 комментариев :

тамара лисица комментирует...

Спасибо, у меня есть страничка в Pinterest и в Blogger, очень интересно и полезно для чайников)))

Mycrib комментирует...

Пожалуйста;)

Светлана Богачук комментирует...

а как вообще удалить эту кнопку, которая сейчас стоит на всех фотографиях, которые я смотрю ? мне не нужна эта функция

Иванова Наталья комментирует...

Светлана, объясните подробнее - кнопка пинтерест стоит на всех фотографиях вашего блога, то нужно удалить один из кодов (как в статье).
Если кнопка pinterest стоит вообще на всех фотографиях на всех просматриваемых вами сайиах, тогда нужно удалить специальное расширение вашего браузера:
1. Если вы пользуетесь Опрерой, то нажмите сочетание клавиш CTRL + SHIFT + E, и отключите расширение "Pinterextension - Pinterest "Pin It" Button" или "Easypinner for Pinterest" или другое расширение с кнопками социальных сетей.
2. Если вы пользуетесь Google Chrome, то выберите Дополнительные настройки -> Расширения и отключите расширение, ответственное за добавление кнопки pin it.
3. Отключаем плагин в Mosilla Firefox - "Инструменты" -> "Основные" -> "Настроить Дополнения" -> "Плагины"
4. В IE - нажмите на шестеренку -> настроить надстройки -> панели инструментов и расширения -> выбор нужного расширения -> кнопка отключить

Ольга АрхиПушкина комментирует...

Отличный пост, нужная информация!!! Спасибо, все получилось!

Ru$$ell комментирует...

Долго искал как удалить из Mozilla Firefox, итак:
Пенель меню - Инструменты - Дополнения - Расширения - Pin it button нажимаем удалить. Вуаля)

Анастасия Анисимова комментирует...

Очень и очень странно... Удалила кнопку из расширений, но она всё равно меня преследует =D По прежнему появляется на каждом изображении -___- От этой... "штуки" вообще реально избавиться >_<

Иванова Наталья комментирует...

Анастасия, а вы точно удалили кнопку, а не просто скрыли ее? Посмотрите еще раз в дополнениях.

MariSvit комментирует...

Спасибо огромное:)) Все получилось , ура...!!!

Tania Close комментирует...

как сделать кнопку pin it на всех изображениях на всех сайтах сех сайтов

Иванова Наталья комментирует...

Таня, для этого нужно установить кнопку Pinterest в ваш браузер. В Pinterest нажмите на кнопку добавления поста ("+" внизу справа) и во всплывающем окне вам будет предложено установить эту кнопку.
Для Оперы установите расширение - https://addons.opera.com/ru/extensions/details/shareaholic-for-pinterest/?display=en.
Для Mozilla Firefox можете установить панель, которая поможет вам быстро делиться картинками с любой страницы в интернете.
Если будут вопросы - пишите.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML