Как сделать картинку ссылкой в контакте
Как сделать картинку ссылкой в вк
Приветствую читателей. В этой статье информация, как в ВК сделать картинку ссылкой на внешний сайт. Работа с кликабельными фото ВКонтакте несколько отличается от работы с изображениями на сайте WordPress.
Картинка ссылкой Вконтакте
В этой соцсети можно прикрепить одну картинку со ссылкой на стене личной страницы, в группе, на специальных вики-страницах при создании новой записи, при комментировании.
Зайдите на свою личную страницу или в сообщество.
На стене группы
Напишите ПОСТ СО ССЫЛКОЙ на внешний сайт, на статью Вконтакте. Лучше всего это делать в Ворде или в Блокноте (в вк проблема с форматированием).
Как только вы вставите пост в окошко из буфера обмена, ниже появится блок с ГИПЕРССЫЛКОЙ и автоматически подобранным изображением.
Многие блок удаляют, нажимают на крестик. Мы оставим. Понажимайте на привязанную фотку, выберите подходящую.
Если вк выводит не то, что требуется, прикрепите к записи нужную картинку. Загрузите ее в ВК с компьютера (формат png, gif, jpeg, размер 537х240 пикселей).
Если размер иллюстрации больше, не страшно, можете выбрать область просмотра.
Опубликуйте запись.
Теперь к тестовому блоку прикреплено фото и привязана гиперссылка.
Публикуйте в ленте вк кликабельные картинки без текста. Яркие иллюстрации в постах помогут раскрутить сообщество.
Но если в записи есть призыв к действию, он увеличит вероятность кликов по фото-ссылке.
На вики странице Вк
Второй способ использовать фото в качестве ссылки – размещать изображения на ВИКИ-СТРАНИЦАХ.
Создайте внутреннюю вики-страницу. Для этого:
Откройте в браузере новую вкладку;
В верхнюю строчку браузера вставьте шаблон
Первые 3 звездочки замените id своего сообщества, вместо второй группы звезд вставьте название новой вики страницы.
Показываю наглядно. Напишите нужный текст, вставьте фотографию из альбома сообщества или с компьютера.
Фото можете вставить в вики режиме, прописав следующую конструкцию [[photo169726997_391114603|537x240px|http://ВАША ССЫЛКА ]].
Чтобы удалить неправильно загруженную информацию (текст, фото), в режиме wiki редактирования ее просто сотрите.
В визуальном режиме нажмите на привязанное изображение. Отредактируйте: его размеры, сделайте описание с ключевыми словами и ПРОПИШИТЕ ССЫЛКУ.
Прикрепить ссылку к фото вк можно в вики режиме, вставить между разделителем после px и двумя квадратными скобками.
После редактирования посмотрите получившийся пост в ПРЕДПРОСМОТРЕ, а затем СОХРАНИТЕ. Картинка стала гиперссылкой.
Заключение
Привлекайте на wiki страничку посетителей из записей в сообществе, с помощью рекламных объявлений Вконтакте (таргет).
Как сделать картинку ссылкой Вконтакте
Многие пользователи интересуются, как сделать картинку ссылкой Вконтакте. Зачем это нужно? Хотя бы для того, чтобы рекламировать свой ресурс (внешний сайт) или сообщество.
Выглядит это так: в группе опубликована запись, в которой прикреплена картинка, при нажатии на которую пользователь попадает на другую страницу.
Как сделать картинку ссылкой Вконтакте
1. Переходим на сервис bitly.com, где вставляем ссылку на внешний сайт/внутреннюю страницу Вконтакте и копируем сокращённую ссылку:
2. Создаём запись на странице/в группе и вставляем в неё сокращённую ссылку.
4. Загружаем изображение размером больше, чем 537×240:
5. Выбираем область, которая будет использована в качестве иллюстрации ссылки и сохраняем изменения:
6. Вносим свои коррективы в запись и отправляем её:
Теперь, если кто-то кликнет по картинке, то его перенесёт на указанную страницу:
Вот такой интересный секрет Вконтакте, о существовании которого Вы могли не знать.
Так как в личном сообщении так сделать не получится, Вы можете опубликовать такую запись у себя на стене, а затем поделиться ею с другом:
Кстати, не забывайте, что можно сделать ссылку Вконтакте текстом или смайликом на сообщество или личную страницу (или ссылку на внешний сайт).
Как быстро сделать картинку Вконтакте ссылкой на внешний сайт
Доброго времени суток, уважаемые читатели моего блога. Ну вот мы и дошли до завершающего этапа оформления красивой группы Вконтакте. Мы с вами уже научились делать меню, потом создали очаровательный единый стиль-картинку и теперь готовы зассылить фото в закрепленном посте.
Если эта первая статья, которую вы читаете, то я бы порекомендовал вам отправиться к первому уроку и постичь много нового и интересного, что выведет ваш паблик на новый уровень развития и привлечет множество новых подписчиков. Однако, если ваше единственное желание, это узнать как сделать картинку ссылкой Вконтакте, просто дочитайте эту публикацию до конца.
Ссылка на меню группы (вики-страницы)
Начну я со сложного, так как мне необходимо завершить цикл своих статей про оформление группы. Можете сразу перейти к следующему разделу, так как тут информация будет касаться вики-страничек.
С постоянными читателями мы уже создали все необходимые составляющие, чтобы на стене под картинкой сообщества Вконтакте появилась вот такая красивая ссылка.
При нажатии на нее нас должно переносить вот в это меню. Оно тоже уже существует.
Приучите себя удалять ссылку сразу после того как основная картинка отразится чуть ниже. Вы почти справились. Добавьте фотографию.
Осталось только «Отправить».
В группе он будет выглядеть иначе, чем при предварительном просмотре в окне редактора. Чтобы закрепить пост в описании нажмите на дату публикации.
В открывшемся меню выберите «Закрепить».
Готово, можете посмотреть.
Ну вот и все, вы справились с оформлением группы! Ну а теперь я расскажу как оформлять в группе другие ссылки или иным образом. Оставайтесь с нами или возвращайтесь после короткого перерыва на приготовление чая. В интернете очень мало информации о работе с социальными сетями, а я вот-вот научу вас самостоятельно создавать описание и заголовки любой ссылки Вконтакте.
Просто ссылка под фото
Сперва о простом. Самый элементарный и быстрый вариант поставить ссылку под фотографию, сделав при этом ее кликабельной, вставить в текст записи нужный URL, а затем нажать на иконку фотоаппарата.
Повторюсь, удаляйте url иначе не в лучшем свете выставите себя. Оставлять их – не профессионально. Теперь добавьте фотографию через стандартную форму и выберите область, которая будет использована.
Готово, осталось только отправить.
Вот и все, теперь картинка кликабельна.
Свой заголовок и описание к любому изображению
При помощи официального сервиса Вконтакте вы можете вставлять любые изображения в ссылки, а главное редактировать заголовки и описание. Сделать это не сложно. Вам понадобится вот такая заготовка. Сюда останется только добавить свои значения.
Чуть ниже будет видео, в котором почти та же информация, за исключением некоторых специфических секретов. Тема довольно сложная и без ролика многие могут не разобраться, как и без текстового материала.
Итак, смотрите, для начала вы берете ссылку на свой ресурс и вставляете ее вместо слов «Ссылка_на ресурс». Если она слишком длинная, то воспользуйтесь сервисом сокращений: https://vk.com/cc . Сверху вставляете свой URL, кликаете «Получить короткий вариант» и копируете появившуюся ссылку из третьей ячейки.
Вставляете так, чтобы нигде не было никаких дополнительных пробелов. Строка должны быть единой. Я минуты три ковырялся в первый раз, чтобы все отобразилось верно и в строчке не было ни единого лишнего пробела.
После того как закончите, строчку нужно вставить в адресную строку браузера и подождать пока все загрузится.
Выбираем с кем нужно поделиться этой картинкой. Нажмете на «С друзьями и подписчиками» и она появится на вашей стене, «В сообществе» и она отобразится на стене выбранной группы, личное сообщение отправится определенному человеку в переписке.
Выбор сделан? Жмем на отправить.
Картинка с вашим заголовком и описанием готова.
Вот только видите, заголовок продублирован в тексте сообщения.
Избавиться от этой надписи не проблема. Жмете на «Редактирование».
Удаляете ненужный текст.
Между прочим, за все чему вы сейчас учитесь платят не плохие деньги. Особенно если вы умеете создавать рекламный контент, который пользуется спросом среди аудитории. Существует миф, что в социальных сетях контент делится на рекламный и развлекательный.
Все это фигня. Каждый пост должен быть продающим. Я имею в виду не агрессивную рекламу, а ту, которая заставит человека возвращаться в паблик.
Когда я консультирую начинающих администраторов, в первую очередь, я всегда говорю о том, что они должны помнить, что каждый пост должен быть полезен. Не все это понимают.
Недавно общался с молодым человеком, который занимается фотографией: «Ну другие же так шутят!», — утверждал он. Этот парень выкладывал стеб над «девушками-утками», которые любят делать селфи, вытягивая губы. Он не мог понять, что именно эти барышни в основном и заказывают у него профессиональные фотосессии. Шутить над ними, лично ему, не выгодно, ведь это его клиенты.
Существуют и более печальные случаи. Расистские шутки приводят к отписке большой доли адекватных людей и привлечению агрессивной аудитории, которая идет на конфликт с платежеспособными подписчиками. Естественно, это сказывается на прибыли и заказах. Вы должны это понимать.
Пост – это малая рекламная текстовая форма, поэтому научившись писать привлекательные заголовки вы справитесь и с вовлечением читателей в диалог, набором лайков и даже с подпиской. Стратегия мало чем отличается. Какая разница что продавать: себя, группу или шампунь от перхоти.
Вы не будете тратить время на постижение двух наук и сразу разберетесь и с рекламой, и с контент-менеджментом в целом благодаря этому курсу.
Ну вот и все. Подписывайтесь на рассылку моего блога и учитесь зарабатывать в интернете разными методами. Я начну присылать прямо на вашу почту самые свежие и актуальные статьи. Вы ничего не пропустите.
Я искренне желаю вам удачи в начинаниях. Будьте настойчивы в своих мечтах.
Как сделать картинку ссылкой в HTML, Вконтакте, на форуме и с помощью CSS
Сегодня мы займемся превращением изображений в активные ссылки. Вы знаете, что интернет полностью основан на гиперссылках, позволяющих кликом мыши перемещаться с одних страниц на другие. В этом плане, использование в качестве ссылок картинок имеет преимущество перед обычными текстовыми линками, так как дает возможность красиво и органично вписать всё в дизайн сайта.
Содержание
Изображения часто применяются в качестве кнопок заказа на коммерческих ресурсах, эта же модель применена в рекламных баннерах, другие примеры вы встречали в интернете сами множество раз.
Я расскажу о том, как сделать изображение ссылкой на основе традиционного HTML кода и альтернативной CSS вариации. Также, мы коснемся превращения картинки в ссылку для социальной сети Вконтакте (там все не так просто). И в завершающей части статьи я расскажу о форумах, там нередко используется кодировка отличная от HTML и вставка изображений и ссылок там происходит иначе.
Как сделать картинку ссылкой в HTML
Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега с атрибутом src, указывающим путь к изображению.
Результирующий код для вставки изображения-ссылки выглядит вот так:
По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.
Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.
А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, width=”указывается ширина в пикселях”.
Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):
А вот так он работает:
Картинка-ссылка на CSS
Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.
Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:
1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).
Общий код выглядит вот так:
В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).
Как картинку сделать ссылкой Вконтакте
В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.
Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.
Шаг 1. Готовим картинку
В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.
Поддерживаемые форматы – jpg, gif и png.
Шаг 2. Вставляем ссылку в ВК
Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье как сделать гиперссылку в ВК), небольшое описание и предварительное изображение (если оно есть).
Шаг 3. Вставляем изображение
Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.
Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).
Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.
После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».
После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.
Как сделать картинку ссылкой на форуме
В большинстве случаев, при создании сообщений на форумах используются визуальные редакторы, через которые можно вставить изображение одной кнопкой и превратить его в ссылку другой.
Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.
Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.
Изображение в BB-коде указывается вот так:
Указывается ссылка на картинку.
А ссылки формируются тегами [url] [/url]. И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:
Само собой, все это проделывается в текстовом режиме редактора, а не в визуальном. Вот и весь секрет.
Визуальные редакторы
Используя различные графические конструкторы сайтов и страниц реализовать все, что описано выше, проще и быстрее, достаточно нажать пару кнопок. И в WordPress, и в HTML редакторах, и на форумах принцип действие одинаков, схожи и кнопки.
Для того, чтобы сделать изображение ссылкой в графическом интерфейсе необходимо выполнить 2 действия:
1. Вставить изображение, вот такими кнопками (пример с форумом был выше, тут я показываю WordPress):
Там надо будет либо добавить ссылку на картинку в интернете или загрузить с компьютера (возможность загрузки есть не всегда).
2. Выделить вставленное изображение мышью (кликнуть на него), после чего нажать кнопку похожую на цепочку и вставить адрес страницы, на которую должна ссылаться картинка.
На этом все. Желаю удачи. Не забывайте оформить подписку на новые статьи.