Flector

Cool Image Share

Cool Image Share

Cool Image Share это плагин, который выводит на изображениях в записях панель с иконками социальных сетей. При клике на такую иконку посетителю будет предложено расшарить запись с указанной картинкой (если социальная сеть это позволяет). Этот плагин я написал потому, что не смог найти адекватный аналог, поддерживающий шаринг в российские социальные сети.

В репозитории плагинов есть только 2 плагина, которые выводят панель с кнопками шаринга на изображениях. К сожалению, оба они глючные до безобразия – даже если добавить туда вручную поддержку российских социальных сетей, то от багов отображения избавиться будет нельзя. Среди платных плагинов я нашел парочку вполне приличных, но опять же – без поддержки российских социальных сетей.

Вот и получилось, что при отсутствии нормального выбора мне пришлось написать свой собственный плагин, который содержит все необходимые мне функции. Спустя полгода активного тестирования я наконец-то могу написать о нем здесь. Надеюсь, что вам плагин понравится и вы будете его использовать.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1 Распаковываем архив.

2 Копируем папку cool-image-share в /wp-content/plugins/.

3 Заходим в админку сайта на вкладку "Плагины" и активируем плагин.

Настройки плагина вы найдете на странице "Настройки\Cool Image Share". Первое, что вы там увидите это область предпросмотра:

Предпросмотр

Любые изменения настроек плагина можно сразу же оценить здесь, не покидая страницу настроек плагина. Помните, что панель с иконками выводится только при наведении на изображение курсора мышки! Это сделано специально, так как при большом количестве картинок эта панель будет слишком мозолить глаза посетителям. Да и рассматривать изображения будет сложно.

Плагин, естественно, переведен на русский язык, поэтому сложностей с его настройкой у вас возникнуть не должно. Сама панель настраивается так:

Настройка панели иконок

Здесь я реализовал абсолютно все функции, которые мне пришли в голову. Панель с иконками можно вывести на изображении как угодно – в любом углу, с любыми отступами, любого размера иконок и в любой ориентации. Я долго думал, какие еще настройки сюда можно добавить, но ничего больше не пришло в голову. Если у вас есть какие-то пожелания – пишите в комментариях.

Следующая настройка это "Эффекты и анимации":

Эффекты и анимации

На скриншотах этого не показать, но поверьте на слово – анимации появления и исчезновения панели с иконками выглядят очень здорово. И тем самым они привлекают внимание ваших посетителей. Здесь я задействовал всю функциональность библиотеки Animate.css (ее же я использовал в другом своем плагине - Easy Textillate). При желании, конечно, анимации можно отключить, но делать это не рекомендую – смотреться это будет скучновато.

С эффектом наведения на изображение ситуация другая – не каждому нравится, что при наведении курсора мышки на изображение появляется не только панель с иконками, но и само изображение меняется в соответствии с выбранным эффектом. Мне лично эффекты наведения нравятся (как минимум эффекты  "Сепия", "Чернобелое" и "Тинт"), но у вас может быть другое мнение на этот счет, поэтому можете смело отключать эту функцию в плагине.

Выбор социальных сетей:

Выбор социальных сетей

Первоначально список был короче, но иностранные пользователи попросили меня добавить в него Linkedin, Tumblr и другие сети. Я же изначально ориентировался на российские социальные сети. Я не стал сюда добавлять что-то уж совсем бесполезное вроде Mail.ru, но все крупные российские сети вроде Вконтакте и Одноклассников тут есть. И даже ЖЖ для комплекта.

Вид социальных иконок можно поменять:

Наборы иконок

Выбор не самый впечатляющий, но все-таки подобрать подходящую вашему сайту тему иконок вполне возможно. Тем более, что набор иконок по умолчанию (Default) подойдет к дизайну практически любого сайта.

В плагине есть продвинутые настройки:

Продвинутые настройки

По умолчанию вывод панели с иконками на миниатюрах записей отключен. Почему? Потому что в некоторых темах миниатюры записей вставляются нестандартно и тогда плагин не может корректно вывести панель с иконками. К сожалению, это я исправить в плагине не могу – регулярные выражения просто не позволяют предусмотреть всю фантазию авторов тем. Скажу только, что во всех дефолтных темах движка плагин с миниатюрами работает правильно.

Если для вас вывод панели с иконками на миниатюрах записей критичен, то пишите в комментариях – я вам подскажу, как исправить код темы, чтобы плагин мог корректно работать с миниатюрами записей.

Как вообще выглядит шаринг с выбранной картинкой? Покажу на примере VK:

ПШаринг Вконтакте с выбранной картинкой

Хотите посмотреть "вживую"? Прошу посетить мою тестовую страничку. Учтите только, что заголовок и описание берутся социальными сетями из мета-тегов страницы (либо из Open Graph - разметки), поэтому на моей тестовой странице вы описание при шаринге не увидите (SEO-плагинов на этом сайте нет).

Важное замечание – SEO-плагины могут прописывать Open Graph разметку для страницы, указывая там картинку записи (как правило, миниатюру записи). В этом случае социальные сети будут использовать именно эту картинку, а не ту, которую выбрал пользователь для шаринга. Этим, например, абсолютно точно страдает Facebook – неважно какая картинка указана в ссылке на шаринг, он все равно возьмет картинку из Open Graph разметки.

На этом, собственно, все. Настроить плагин, переведенный на русский язык сможет даже ребенок, так как в нем абсолютно все просто и понятно. Приведу несколько примеров картинок с разными настройками плагина:

1 Позиция: Снизу справа, Ориентация: Вертикальная, Эффект наведения: Сепия, Тема: Default.

Пример 1

2 Позиция: Снизу слева, Ориентация: Горизонтальная, Эффект наведения: Чернобелое, Смещение: 5px, Тема: Purple.

Пример 2

3 Позиция: Сверху справа, Ориентация: Вертикальная, Эффект наведения: Замыливание, Тема: Flat 3D.

Пример 3

4 Позиция: По центру, Ориентация: Горизонтальная, Эффект наведения: Изменение оттенка, Тема: Volumetric.

Пример 4

5 Позиция: Сверху слева, Ориентация: Вертикальная, Смещение: 5px, Эффект наведения: Выключено, Тема: Stamp.

Пример 5

На этом, наверное, хватит. Устанавливайте плагин и играйтесь сами с его настройками, благо, что настроить вывод панели можно как угодно. 

По моему скромному мнению, этот плагин обязателен для установки на любом развлекательном сайте, чей контент содержит много картинок. Различных плагинов шаринга сейчас навалом, поэтому у людей уже выработался иммунитет против иконок социальных сетей – они их просто не замечают. Плагин же выводит эти иконки так заметно, что проигнорировать их сложно. А чем больше будут расшаривать ваши записи в социальных сетях – тем больше у вас будет посетителей. Вы же не откажитесь от лишнего трафика на ваш сайт?

Если есть вопросы – пишите в комментариях, я вам обязательно отвечу.

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Срочная доставка грузов по россии по минимальным ценам

срочная доставка грузов по россии по минимальным ценам

www.cityexpress.ru

Комментарии (всего 28 комментариев)
Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.