Как сделать ссылку ВКонтакте в виде кнопки Просто Делай Так
Здравствуйте, друзья! Сегодня я вам расскажу, как сделать ссылку ВКонтакте в виде кликабельной кнопки. Для постов ВКонтакте я уже предлагал несколько решений здесь на блоге и на своём видеоканале в YouTube, и эта статья станет хорошим продолжением данной темы. А если Вы примените данный способ на практике, то по достоинству оцените его силу.
Все Вы знаете, что современного интернет-пользователя не так-то просто побудить что-то прочитать и тем более сделать переход по ссылке.
Если на принятие решения «читать или не читать» основную роль играют заголовок, первый абзац текста и сопровождающая картинка, то в деле перехода по предлагаемым ссылкам к этим основным элементам подключаются активные элементы в виде баннеров и кабельных кнопок.
В итоге прочтения данной статьи, Вы сможете без труда сделать вот такое оформление своего поста ВКонтакте:
Техническая составляющая данного приема основана на том, что, как только в тексте поста появляется ссылка, Контакт автоматически повторяет её под текстом содержания.
Одним из результатов такого алгоритма его работы является превью одной из картинок, размещенной на том веб-ресурсов, на который ведет ссылка.
Именно данное превью мы будем использовать. Если нажать на значок фотоаппарата, который появляется при наведении курсора мыши на превью, то Контакт предлагает заменить изображение на любое другое с размерами не меньше 537х240рх.
Создадим в Фотошопе файл белого цвета именно такого размера и сохраним его в виде картинки. Теперь в режиме добавления новостей на стену своего аккаунта или группы поставим любую ссылку, например, на статью своего блога, нажмем значок фотоаппарата на превью и предложим контакту загрузить наше белое изображение. Как только ВКонтакте сделает загрузку, Вы увидите вот такую картинку:
Далее, используя свой любимый скриншотер, Вам необходимо очень аккуратно сделать скриншот области, которую занимает серый фон по его внешней границе. Для этого можно использовать даже возможности Яндекс-диска делать скриншоты.
Если Вы делаете скриншот не всего экрана сразу, а это самый лучший вариант в данном случае, то контролируйте размеры будущего скриншота. Они должны быть 537х240рх.
Теперь в Фотошопе открываете данный скриншот, берете инструмент «Прямоугольник» и создаёте на месте белой части изображения прямоугольник-заготовку для будущей кнопки.
При этом цвет данного прямоугольника Вы можете выбрать сразу перед началом этой операции, а можете изменить его позже. Удалять серое изображение или обрезать его не нужно. И в этом есть особая хитрость.
Вам останется только дать создаваемой кнопке название, подобрать цвет надписи и уточнить её расположение. При этом вполне возможно, что потребуется перед набором текста, временно отключить слой созданного прямоугольника.
У Вас получится примерно вот такая красивая кнопочка или даже ещё лучше.
Кстати, можно сразу наделать несколько таких кнопок, чтобы иметь возможность оперативно выбирать кнопку, подходящую по цвету под картинку Вашего поста.
После создание такого набора сохраняем каждый вариант в специально созданную для кнопок папку.
Когда кнопки готовы, Вы в процессе работы загружаете нужную кнопку вместо созданного Контактом превью. При этом не нужно регулировать никаких размеров – смело после загрузки нажимаете кнопку «Сохранить изменения», а сам Контакт сделает всё остальное.
У Вас не останется даже намека на серую область, а будет именно кнопка.
Далее дополняете будущий пост необходимым содержанием и обязательно вставляете картинку, при необходимости уточняете надпись на ссылке и отправляете свой пост на суд читателей. Выглядеть он будет не хуже, чем показано выше на скриншоте поста по старту очередного набора в бесплатную онлайн школу «Я блогер».
В принципе работа несложная, но потребует от Вас определенный аккуратности в действиях. Добавлю, что кнопки можно делать со скругленными углами, можно делать их меньшего размера, а можно просто вставлять уже готовые.
Как это всё делается, Вы можете посмотреть в видео ниже. Первая его часть посвящена описанному выше способу, а вторая – всем остальным.
Если Вам понравилось создание таких кликабельных кнопок для постов ВКонтакте, дайте мне об этом знать в комментариях ниже. Естественно, если остались вопросы, то не стесняйтесь их задать там же. Желаю Вам разобраться во всём без проблем.
С уважением, Сергей Почечуев.
Виджет «Кнопки-ссылки на социальные сети»
Шаг 1. Установим виджет «Кнопки-ссылки на социальные сети» на страницу.
В настройках виджета можно добавлять, редактировать или удалять социальные сети.
По умолчанию добавлены 3 социальные сети: Twitter, ВКонтакте и Facebook.
Шаг 2. Откроем «Настройки» виджета, вкладку «Иконки» и нажмём кнопку редактирования «ВКонтакте».
Теперь кнопка в виджете с иконкой VK ведет на нашу группу. Так же добавляются другие социальные сети.
Соц. сети – список добавленных социальных сетей, иконки которых отображаются на вашем сайте.
В списке социальных сетей можно:
Изменять положение нужной социальной сети в списке и положение иконки на сайте.
Редактировать ссылку на социальную сеть.
Удалить социальную сеть.
Добавить социальную сеть
При нажатии на кнопку «Добавить соц. сеть», откроется список с доступными сервисами:
Можно выбрать нужную социальную сеть, создать кнопку, указать ссылку. При нажатии на кнопку клиент будет перенаправлен в вашу группу или канал.
Действие по клику:
Переходим во вкладку «Вид» – там можно выбрать один из предустановленных шаблонов иконки.
Если нужен уникальный стиль иконки, его можно настроить вручную.
Сделать это можно во вкладках: Размер, Цвета, Обводка, Углы, Эффекты и Тень.
Положение иконок в виджете предустановлено «По центру», но его можно изменить на «Слева» или «Справа»
Шаг 1. Создадим ссылку.
Заменим ВашНомер на номер телефона для связи, который вы хотите указать.
Телефон необходимо вводить в формате 71234567890, без пробелов.
Пример:
Возьмём номер 71234567890. Ссылка будет выглядеть так:
Шаг 2. Создадим новую социальную сеть WhatsApp и в поле «Ссылка на соц. сеть» укажем созданную ранее ссылку
Чтобы сразу добавить сообщение при переходе по ссылке, используйте такой формат:
В данном примере будет текст: «Я заинтересован в покупке вашего авто».
В ссылке «%20″ используется для формирования пробела.
Готово! Теперь при нажатии на иконку WhatsApp клиент сможет отправить вам сообщение на указанный номер.
Шаг 1. Создадим ссылку:
Замените UserName на ваше имя в Телеграме.
Если вы не знаете его, то ознакомьтесь с данной статьей.
Пример
Шаг 2. Создадим новую социальную сеть Telegram и в поле «Ссылка на соц. сеть» укажем созданную ранее ссылку https://telegram.im/@PLPbot
Готово! Теперь при нажатии на иконку Telegram клиент сможет отправить вам сообщение на указанный аккаунт.
Шаг 1. Создадим ссылку.
Ссылка: http://vk.com/writeВашID
Заменим ВашID на ваш id аккаунта ВКонтакте. ID профиля необходимо вводить в формате 1234567, без пробелов.
Пример
Шаг 2. Создадим новую социальную сеть ВКонтакте и в поле «Ссылка на соц. сеть» укажем созданную ранее ссылку http://vk.com/write1234567
Готово! 😊
Теперь при нажатии на иконку ВКонтакте клиент сможет отправить вам сообщение на указанный аккаунт.
Пополнить профиль Email для Вконтакте
lizaonair 1
Пытаюсь найти способ пополнить профиль электронной почтой для социальной сети Вконтакте. Проблема в том, что даже с областью электронной почты в профиле пользователя по умолчанию сейчас нет электронной почты на Auth0.
Вконтакте возвращает почту в том же массиве, в котором после авторизации возвращается access_token, и вы не можете получить его каким-либо другим способом (через API или что-то в этом роде).
Можно ли добиться этого с помощью правил или хуков, и если да, то как это сделать? Я пытался создать правило, чтобы получить дополнительный запрос к потоку oauth Вконтакте, но я не могу найти, как получить client_id, client_secret и CODE в контексте правила. Пожалуйста, порекомендуйте.
Спасибо!
Джеймс Моррисон 3
Привет, @lizaonair, я ищу решение для тебя, но я считаю, что правила должны быть правильным путем в твоем путешествии. Я связал приведенную ниже документацию по этому вопросу для контекстной ссылки для других, пока я изучаю это. Спасибо.
1 Нравится
4
Здравствуйте! Я пытался реализовать свое подключение к ВКонтакте через Custom Social Connections, но все равно не могу найти способ получить доступ к конфигурации подключения (идентификатор приложения, секрет и т. д.) и ответ конечной точки oauth access_token.
Джеймс Моррисон 5
В настоящее время я работаю над поиском решения вместе с нашей службой поддержки и расскажу, что они думают. Спасибо!
nicolas_sabena 6
Правила не позволят вам перехватить OAuth3-разговор между Auth0 и vK, поэтому вы не сможете исправить стандартное поведение соединения VK с помощью правил.
Я полагаю, что должно быть возможно получить электронное письмо, используя пользовательскую социальную связь, по:
- Запрос электронной почты
- В функции профиля пользователя используйте
ctx.email, чтобы получить адрес электронной почты из ответа токена.
Вы пробовали вышеперечисленное?
3 отметок «Нравится»
7
Спасибо! Похоже, я сделал опечатку с именем области и не проверил доступное поле электронной почты в ctx! Теперь он работает нормально!
1 Нравится
8
Единственный вопрос сейчас — как добавить пользовательское имя класса к кнопкам Custom Social Connections на экране блокировки?! Если у меня больше 1 — без 9 никак не стилизовать0042 :nth-child() селектора и мне это не нравится.
nicolas_sabena 9
На данный момент нет возможности указать класс CSS, но вы можете настроить другие параметры кнопки, включая цвета и значок кнопки. Взгляните на https://auth0.com/docs/libraries/lock/v11/configuration#authbuttons-object-.
Это сработает?
1 Нравится
10
Это работает еще лучше! Спасибо!
1 Нравится
система Закрыто
Эта тема была автоматически закрыта через 30 дней после последнего ответа.
Новые ответы больше не допускаются.
Джумла! Каталог расширений
Платная загрузка
AMPZ Социальный обмен
Автор: roosterz.nl
Социальный обмен
AMPZ | Social Sharing Like a BOSS — Лучший отзыв Отзывчивое многопозиционное чрезвычайно быстрое расширение для обмена в социальных сетях в JED! Кнопки социальных сетей AMPZ увеличат ваши продажи и привлекут больше трафика на ваш веб-сайт Joomla! 100% рейтинг и используется более чем 2000 веб-сайтов. Что насчет твоего? AMPZ может отображать кнопки социальных сетей в любом месте вашего веб-сайта (!), а также несколько статических…
Бесплатно
Social 2s
Автор: anton
Social Share
Social 2s is a J! 3.x плагин для отображения кнопок самых популярных социальных сетей. Он ориентирован на скорость.
Есть много плагинов Joomla, которые делают это. Так почему же Social 2s особенный?
Social 2s не загружает внешний javascript, если он не нужен, а загружает только необходимый javascript.
Попрощайтесь с загрузкой сотен ненужных скриптов и поздоровайтесь с более быстрым Интернетом.
Поддерживает
Статья и категория…
Бесплатно
Nice Social Bookmark
By Nikola Biskup
Social Share
Этот модуль показывает значки из 12 наиболее известных социальных сайтов (delicious, digg, facebook, google bookmarks, linkedin, myspace, newsvine, reddit, stumbleupon, twitter, pinterest и rss). feed) есть 4 разных размера иконок на выбор (24,32,48,64) и 6 различных наборов иконок (водные, оранжевые круглые, белые круглые, логораннер, стекло и iPhone). Он проверяется с помощью W3C HTML5. НОВИНКА: сортировка перетаскиванием…
Бесплатно
By J!Extensions Store
Social Share
Встраивайте кнопки социальных сетей, не влияя на производительность сайта! Делитесь статьями в популярных социальных сетях на одном дыхании. Автоматически управляйте тегами Open Graph, используя текст статей!
Fast Social Share Buttons — это мощный плагин для социальных сетей, который позволяет отображать кнопки социальных сетей для большинства распространенных социальных сетей, таких как Twitter, Facebook, Whatsapp, Pinterest, Linkedin, Xing, без замедления.
Платная загрузка
Обратные ссылки в социальных сетях
By JoomUnited
Обратные ссылки в социальных сетях
Обратные ссылки в социальных сетях автоматически публикуют выбранный вами контент Joomla, K2, ZOO, Hikashop, RedSHOP и Virtuemart в Facebook, Twitter, LinkedIn и Vkontakte. Это расширение грамотно наполняет все социальные сети вашим контентом. Social Backlinks — единственный компонент, использующий автоматическую настройку для публикации в социальных сетях. Больше не нужно создавать новую социальную учетную запись, приложение,… просто…
Бесплатно
By AddToAny
Social Share
Это расширение для обмена файлами Joomla помогает людям делиться, сохранять и отправлять по электронной почте ваши сообщения и страницы с помощью любых служб, таких как Facebook, Twitter, Pinterest, Google, Reddit, Tumblr, LinkedIn, WhatsApp. и еще более 100 сайтов для обмена и социальных сетей.
Настраиваемая платформа AddToAny и значки социальных сетей позволяют оптимизировать сообщения и страницы блога вашего сайта для лучшего взаимодействия с социальными сетями.
Бесплатно
AutoTweet NG
By Extly Tech
Поделиться в социальных сетях
✔ Автопостинг в социальных сетях. Инструмент управления контентом в социальных сетях. Проще говоря, AutoTweet NG автоматически публикует ваш контент в социальных сетях. AutoTweet NG эффективно решает интеграцию социальных сетей в Joomla с минимальными усилиями. === НОВИНКА: Facebook — упрощение проверки приложений для бизнес-приложений с уровнями доступа к данным === ✔ AutoTweet NG — это Joomla! расширение для автоматизации публикации постов в Facebook…
Платная загрузка
Ochjssocials
Автор Ruud van Lent
Поделиться в социальных сетях
Joomla 4.2 готова!
Платформы социальных сетей (Twitter, Linkedin, Pinterest, Facebook, Whatsapp, Mix, LINE, Telegram, Viber, Pocket, Facebook Messenger, vKontakte, SMS, Reddit, Diaspora, Xing, Wykop.pl, Mastodon, Clipboard) являются растущим драйвером для трафик на ваш блог, а встроенные кнопки быстрого доступа к социальным сетям облегчают взаимодействие с сообществом и его продвижение.
Но часто интегрируя соц…
Платная загрузка
JO Social Networks Tabs
By Joomcore
Social Share
JO Social Networks Tabs Модуль позволяет отображать социальные сети в виде скользящих вкладок, чтобы пользователи могли просматривать свою активность в них. Просто установите свое имя пользователя в конфигурации модуля для каждой социальной сети. Он очень прост в использовании и адаптируется к любому веб-сайту Joomla 2.5, 3.x, 4.x. Социальные сети — Twitter – последние твиты – либо профиль, либо списки Twitter. — Facebook – Нравится…
Платная загрузка
By Joomcore
K2 extensions
JO K2 Social Share Plugin — это плагин k2, который отображает Facebook Like, Facebook Share, Twitter, Google 1, Linkedin, Pin It, Mix, Addthis Share, Vkontakte Like, Кнопки поделиться Вконтакте. Каждая кнопка в этом плагине супер настраивается с отличными параметрами на выбор!
Плагин JO K2 Social Sharer помогает веб-сайту оставаться на связи со своими посетителями, позволяя им быстро распространять информацию, тем самым увеличивая.
..
Платная загрузка
Perfect Publisher
By Extly Tech
Поделиться в социальных сетях
✔ Автоматическая публикация в социальных сетях. Perfect Publisher — это единственное в своем роде инновационное решение для социальных сетей, позволяющее автоматически публиковать ваш контент на таких платформах, как Facebook, Instagram, Twitter и LinkedIn. Perfect Publisher решает интеграцию социальных сетей с обширным набором функций для расширения возможностей экосистемы Joomla! расширения. Делитесь своим контентом и привлекайте клиентов Идеальный издатель…
Платная загрузка
Кнопка Ultimate Facebook Like Content
By Web-expert.gr
Social Share
Joomla 1.5/2.5/3.x
ТЕПЕРЬ ВЫ МОЖЕТЕ ОТОБРАЖАТЬ КНОПКИ ВЕЗДЕ НА ВАШЕМ САЙТЕ JOOMLA, просто добавив тег!!!!
Также вы можете перемещать кнопки внутри шаблона статьи/предмета/продукта. Доступные руководства с примерами.
8 действий в 1 плагине!
1) НРАВИТСЯ или РЕКОМЕНДУЕМ (Facebook)
2) ОТПРАВИТЬ (Фейсбук)
3) ПОДЕЛИТЬСЯ (Facebook)
4) Гугл +1
5) Кнопка Twitter + короткий URL (bit.
ly)
6) Кнопка Pinterest (закрепить)
7) Линкедин
8) Тапить…
Платная загрузка
JUX Social Tabs
By JoomlaUX
Social Display
JUX Social Tab — это модуль, разработанный командой JoomlaUX, который сочетает в себе 16 профилей социальных сетей и неограниченное количество каналов, отображаемых в плавном слайде или статической вкладке с обновлениями непосредственно в режиме реального времени на вашем сайте. . Поддержка 16 страниц социальных сетей. JUX Social Tab включает в себя 16 известных социальных сетей, таких как Facebook, Twitter, Google Plus, Pinterest и т. д. Для каждого социального канала вы можете ограничить количество…
Бесплатно
JoomLine Like
By Joomline
Social Share
JL Like — плагин популярных кнопок социальных сетей.
Плагин основан на доле технологий социальных сетей: Facebook, Вконтакте, Twitter, Ok.ru, Мой Мир, Linkedin, Pinteres, LiveJournal, Blogger, Weibo, Telegram, WhatsApp, Viber.
Особенности JL
Поддержка Джумла 3.
Отображение социальных кнопок в K2 v2.6 или новее.
Отображение социальных кнопок в VirtueMart v2/v3.
Отображение социальной кнопки…
Платная загрузка
JUX Social Popup
By JoomlaUX
Social Share
JUX Social Popup — один из самых эффективных модулей, который поможет вам увеличить количество подписчиков на ваших сайтах социальных сетей. Социальное всплывающее окно отображает многочисленные кнопки социальных сетей «Нравится», «Поделиться», «Подписаться», чтобы произвести впечатление на вашего посетителя и заставить его взаимодействовать с вами через разные каналы, такие как Facebook, Twitter, Google Plus и другие 7 страниц социальных сетей. Это социальная мульти-рассылка Joomla…
Платная загрузка
JO VM Auto Facebook для Virtuemart
By Joomcore
Расширения VirtueMart
JO Auto Facebook для Virtuemart — это расширение, позволяющее автоматически публиковать ваш продукт на вашей странице в Facebook.
Компонент позволяет вам управлять учетными записями facebook и менеджером сообщений на facebook.
Плагин позволяет автоматически размещать ваш продукт на личной странице Facebook, фан-странице Facebook и странице группы Facebook.
Как администратору, вам не нужно заходить на F…
Платная загрузка
Chat Factory
By thePHPfactory
Chat
Расширение онлайн-чата (управляемое Ajax) для Joomla, позволяющее пользователям общаться в чате независимо от того, на какой странице они находятся, где окно чата сопровождает их на каждой странице, которую они просматривают, и они могут оставаться на связи друг с другом. Макет и темы Различные темы (Blitzer, Flick, Le-frog, Smoothness, Ui-lightness) Отображение компактного или подробного списка Полностью настраиваемый CSS Монетизировать Реклама…
Платная загрузка
By Joomcore
Расширения VirtueMart
JO Virtuemart Social Share — это плагин Virtuemart, реализующий Facebook Like, Facebook Share, Twitter, Google +1, Linkedin, Pin It, Mix, Addthis Share, Vkontakte Like, Кнопки Вконтакте Поделиться внутри продуктов Virtuemart.