Здравствуйте, друзья! Мы с Вами уже рассматривали, как сделать ссылку словом Вконтакте, но если Вы хотите, чтобы пользователи обратили внимание на добавленную Вами публикацию, тогда давайте разбираться, как сделать ссылку из изображения или фотографии. Такая заметка с большей вероятностью привлечет внимание людей, соответственно, по ней кликнет больше пользователей.
Запись с ссылкой можно сделать отдельно в своем профиле, отдельно в группе. Если Вы хотите, можно добавить запись к себе на страницу, а потом поделиться ей с подписчиками своей группы, также можете отправить запись личным сообщением выбранному пользователю.
Давайте рассматривать все подробнее.
Как сделать картинку ссылкой в HTML
Для формирования ссылок в HTML используется простой механизм. Существует специальный тег , обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести. Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега с атрибутом src, указывающим путь к изображению.
Результирующий код для вставки изображения-ссылки выглядит вот так:
По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.
Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.
Для тега
часто применяется атрибут target=”_blank”, открывающий ссылку в новой вкладке.
А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, width=”указывается ширина в пикселях”.
Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):
А вот так он работает:
Добавление фотографии ссылкой в публикации
Вставить ссылку, как картинку можно в любой публикации на стене профиля или группы. Делается это следующим образом:
- Скопировать адрес страницы, на которую требуется сослаться. Это может быть внутренняя публикация социальной сети или внешний ресурс.
- Перейти в профиль или группу, где планируется размещение новости.
- Вставить ссылку в поле, предназначенное для создания публикации.
- Дождаться пока система обработает предоставленный адрес. Внизу появится полоска с заголовком страницы и картинка, выставленная по умолчанию.
- Нажать на полупрозрачный значок фотоаппарата.
- Кликнуть по кнопке «Выбрать файл». Изображение должно быть больше 537х240 px, а также иметь формат jpg, png, gif.
- Отобразится окно проводника Windows, где нужно перейти в папку с картинкой.
- Дважды кликнуть по снимку и дождаться его загрузки на сервер соцсети.
- Выбрать область отображения. В большинстве случаев отобразить полностью всю картинку не получится, это происходит из-за разницы в соотношении сторон.
- Кликнуть «Сохранить изменения».
- Осталось опубликовать запись. По желанию можно добавить описание в верхней части.
Задача выполнена. В публикации будет отображаться картинка, после клика на которую, произойдет открытие ссылки.
Картинка-ссылка на CSS
Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.
Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:
1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).
Общий код выглядит вот так:
#link-img { display: block; width: 323px; height: 232px; background:url(https://gde-lezhit-kartinka/kartinka.png) no-repeat; }
В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).
2. Вставляем в нужное место сайта html ссылку с атрибутом, указывающим, что она относится к классу link-img. Для этого используется тот же тег , что и в предыдущем варианте. Код выглядит вот так: id=”link-img” показывает, что ссылка не обычная, а принадлежит к данному классу, в результате чего, объект принимает свойства этого класса (высоту, ширину и фон). Обратите внимание, что внутри открывающего и закрывающего тега пусто. Мы не прописывали ничего, так как все необходимое уже содержится в свойствах класса и требуемое изображение задано фоном объекта.
Как вставить ссылку в текст ВКонтакте: на профиль, сообщество, сайт
Всем привет, уважаемые читатели блога AFlife.ru! ВКонтакте – один из самых популярных ресурсов в России и отличная площадка для развития бизнеса. Продвигая свое дело, начинающие предприниматели часто размещают переход на рабочую группу на личной странице или в других сообществах. Поэтому сегодня мы расскажем, как вставить ссылку в текст ВКонтакте грамотно и красиво.
Как сделать ссылку на профиль
Кроме большой аудитории ВК дает возможность использовать различные инструменты для привлечения пользователей в сообщества и на сторонние ресурсы. Грамотный продающий текст, содержащий в себе переход в профиль человека, группу или внешний сайт, позволит увеличить количество потенциальных клиентов или подписчиков. А вместе с тем добиться успеха в своем деле.
Как картинку сделать ссылкой Вконтакте
В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.
Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.
Шаг 1. Готовим картинку
В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.
Поддерживаемые форматы – jpg, gif и png.
Шаг 2. Вставляем ссылку в ВК
Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье как сделать гиперссылку в ВК), небольшое описание и предварительное изображение (если оно есть).
Шаг 3. Вставляем изображение
Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.
Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).
Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.
После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».
После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.
Ссылка на меню группы (вики-страницы)
Начну я со сложного, так как мне необходимо завершить цикл своих статей про оформление группы. Можете сразу перейти к следующему разделу, так как тут информация будет касаться вики-страничек.
С постоянными читателями мы уже создали все необходимые составляющие, чтобы на стене под картинкой сообщества Вконтакте появилась вот такая красивая ссылка.
При нажатии на нее нас должно переносить вот в это меню. Оно тоже уже существует.
Связать стену с этим постом очень просто. Достаточно вставить ссылку на вики-страницу в текст записи, как ее узнать я уже рассказывал в первом уроке. Сделать это можно через приложение Vkopt, которое позволяет работать Вконтакте в разы быстрее и не путаться в созданных страницах.
Приучите себя удалять ссылку сразу после того как основная картинка отразится чуть ниже. Вы почти справились. Добавьте фотографию.
Осталось только «Отправить».
В группе он будет выглядеть иначе, чем при предварительном просмотре в окне редактора. Чтобы закрепить пост в описании нажмите на дату публикации.
В открывшемся меню выберите «Закрепить».
Готово, можете посмотреть.
Ну вот и все, вы справились с оформлением группы! Ну а теперь я расскажу как оформлять в группе другие ссылки или иным образом. Оставайтесь с нами или возвращайтесь после короткого перерыва на приготовление чая. В интернете очень мало информации о работе с социальными сетями, а я вот-вот научу вас самостоятельно создавать описание и заголовки любой ссылки Вконтакте.
Как сделать картинку ссылкой на форуме
В большинстве случаев, при создании сообщений на форумах используются визуальные редакторы, через которые можно вставить изображение одной кнопкой и превратить его в ссылку другой.
Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.
Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.
Изображение в BB-коде указывается вот так:
Указывается ссылка на картинку.
А ссылки формируются тегами . И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:
Само собой, все это проделывается в текстовом режиме редактора, а не в визуальном. Вот и весь секрет.
Просто ссылка под фото
Сперва о простом. Самый элементарный и быстрый вариант поставить ссылку под фотографию, сделав при этом ее кликабельной, вставить в текст записи нужный URL, а затем нажать на иконку фотоаппарата.
Повторюсь, удаляйте url иначе не в лучшем свете выставите себя. Оставлять их – не профессионально. Теперь добавьте фотографию через стандартную форму и выберите область, которая будет использована.
Готово, осталось только отправить.
Вот и все, теперь картинка кликабельна.
