Как кастомизировать блок ссылок в группе в VKontakte / Хабр

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

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

Как сделать картинку ссылкой в HTML

Для формирования ссылок в HTML используется простой механизм. Существует специальный тег , обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести. Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега с атрибутом src, указывающим путь к изображению.
Результирующий код для вставки изображения-ссылки выглядит вот так:

По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.

Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.

Для тега
часто применяется атрибут target=”_blank”, открывающий ссылку в новой вкладке.

А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, width=”указывается ширина в пикселях”.

Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):

А вот так он работает:

Картинка-ссылка на 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” показывает, что ссылка не обычная, а принадлежит к данному классу, в результате чего, объект принимает свойства этого класса (высоту, ширину и фон). Обратите внимание, что внутри открывающего и закрывающего тега пусто. Мы не прописывали ничего, так как все необходимое уже содержится в свойствах класса и требуемое изображение задано фоном объекта.

Как картинку сделать ссылкой Вконтакте

В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.

Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.

Шаг 1. Готовим картинку

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

Поддерживаемые форматы – jpg, gif и png.

Шаг 2. Вставляем ссылку в ВК

Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье как сделать гиперссылку в ВК), небольшое описание и предварительное изображение (если оно есть).

Шаг 3. Вставляем изображение

Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.

Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).

Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.

После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».

После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.

Добавление фотографии ссылкой на wiki-странице

При формировании wiki-страниц также можно воспользоваться указанной функцией. Хотя в этом случае алгоритм будет отличаться:

Перейти в группу, где требуется создать wiki-статью.
Открыть вкладку «Свежие новости».
Кликнуть по кнопке «Редактировать».

Отобразится панель инструментов. На ней следует отыскать значок фотоаппарата и кликнуть по нему.

Выбрать фотографию из уже загруженных на свою страницу, после чего кликнуть «Прикрепить» или добавить новую из памяти компьютера (вставка произойдет автоматически).

Когда картинка отобразится на странице, на нее нужно нажать. Если отображается текстовый код, значит, включен режим wiki-разметки и требуется перейти в визуальный редактор для упрощения задачи. Делается это нажатием по значку <>, в верхнем правом углу панели инструментов.

Во всплывающем окне указать следующие данные: Текст – вписанные сюда слова будут отображаться при наведении курсора на фотографию (можно оставить пустым).
Ссылка – в это поле вставляется ссылка, на которую требуется перенаправить пользователя после клика.
Размер – желаемый размер картинки. Чтобы избежать перекосов, следует активировать опцию «Сохранение пропорций».

Кликнуть по кнопке «Сохранить».

Задача выполнена. Осталось добавить текст на страницу, если это требуется и провести ее сохранение.

Справка. Создать wiki-страницу напрямую можно только в группах. На публичных страницах доступа к этому разделу нет. Чтобы обойти запрет, необходимо воспользоваться ссылкой вида: https://vk.com/pages?act=edit&oid=-***&p=название_страницы. Вместо «***» нужно указать ID паблика, а в конце вписать желаемый заголовок создаваемой страницы.

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

Как сделать картинку ссылкой на форуме

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

Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.

Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.

Изображение в BB-коде указывается вот так:

Указывается ссылка на картинку.

А ссылки формируются тегами . И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:

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

Делаем ссылку словом

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

На страницу пользователя

Попробуем сделать так, чтобы на сайт вели имя и фамилия. Для начала нам необходимо перейти на страницу интересующего нас человека и скопировать его идентификационный код (id).

Теперь запомните самую простую формулу: [idцифры|Имя пользователя]

Именно это позволит вам в дальнейшем зашифровать ссылку под любым словом. Например, вы хотите сделать запись на стене.

Идентификатор, который мы скопировали, вставляем в строку для отправки сообщения.
Ставим одну квадратную скобку слева, а после цифр разделительную черту «|».
Теперь можно вставить слово, которое в итоге будет видно всем и вести на нужную страницу. Например, имя и фамилия человека, на чей сайт перенаправляет ссылка. В конце закрываем квадратной скобкой.

После того как вы отправите написанное на стену, вместо этой формулы будет гиперссылка в виде имени человека.

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

На группу

По сути, на сообщество или группу все создается по такой же схеме. Однако многие сталкиваются с тем, что в группе вместо идентификационного кода в строке браузера находится слово или фраза.

Тогда вместо цифрового значения вставьте в формулу после открывающей квадратной скобки именно это слово или фразу.
Копируйте ее без http или www.
Только в случае со словом не нужно писать «id».