Как сделать клик ссылку
Как сделать картинку кликабельной?
В этом руководстве объясняется, как сделать картинку ссылкой:
Создать кликабельное изображение не так сложно, как может показаться. Есть несколько способов сделать это. Я расскажу вам о двух возможных вариантах.
Изображение, с которым мы будем работать
В рамках этого руководства я буду использовать в качестве примера приведенное ниже изображение:
Вариант 1, Шаг 1: Возьмите необходимые URL-адреса
Чтобы завершить этот шаг, изображение, которое вы хотите сделать кликабельным, уже должно быть загружено на ваш сайт.
1. URL-адрес целевой страницы
Адрес страницы / поста / сайта, куда вы хотите перенаправить пользователя после того, как он кликнет по изображению. Для этого перейдите на страницу, которую вы хотите использовать и скопируйте URL из адресной строки браузера:
2. URL-адрес изображения
Самый простой способ найти URL-адрес изображения — это перейти на веб-страницу, на которой оно выводится. Например, если вы уже загрузили изображение на сайт, перейдите на страницу, где оно отображается.
URL-адрес изображения будет сохранен в буфере обмена, и вы сможете вставить его.
Вариант 1, Шаг 2: Создайте код
Продолжаем разбираться, как сделать url ссылку на картинку. Для этого скопируйте приведенный ниже фрагмент кода и вставьте его в текстовый документ:
Теперь в текстовом документе замените выделенные жирным шрифтом два URL-адреса скопированными ранее URL-адресами ( то есть URL-адресом целевой страницы и URL-адресом изображения ).
Для этого выделите и скопируйте URL-адрес целевой страницы. Затем выделите в коде http://LandingPageURL.com ( также в текстовом документе ). После того, как выделите его, нажмите « Вставить », и в этом месте должен вставиться URL-адрес целевой страницы.
На данный момент мой код из такого:
стал таким ( с замененным URL-адресом целевой страницы ):
Теперь сделайте то же самое для URL-адреса файла изображения. Выделите и скопируйте URL-адрес файла изображения, затем выделите http: // FileURL и замените его только что скопированным адресом изображения.
Теперь мой код завершен. Из такого:
Как сделать так, чтобы кликабельное изображение открывалось в новой вкладке
Вот как будет выглядеть мой код, если я хочу, чтобы ссылка открывалась на новой вкладке:
Как добавить к кликабельному изображению партнерскую ссылку
Вы хотите добавить к изображению партнерскую ссылку? Нет проблем.
Вам нужно выполнить те же действия, которые были описаны выше, но http://LandingPageURL.com нужно заменить на партнерскую ссылку.
Вот, как будет выглядеть мой код, если я захочу, чтобы ссылка-изображение открывалась в новом окне, при том, что это партнерская ссылка:
Теперь вы можете взять фрагмент HTML-кода от до с блоком между ними и вставлять его везде, где нужно выводить изображение:
Вариант 2, шаг 1: Сохранение изображения на компьютере
Если вы еще не сохранили изображение на компьютере, сделайте это. Кликните правой кнопкой мыши ( кликните мышью на Mac ) по изображению и выберите пункт « Сохранить изображение как … »
Вариант 2, шаг 2: Создайте новую запись в WordPress
В панели администрирования WordPress создайте новую запись ( Записи — Добавить ).
Вариант 2, шаг 3: Загрузите свое изображение
Вариант 2, шаг 4: Добавьте изображение в запись
На вкладке « Загрузить файлы » ( вверху слева ) можно перетащить изображение в эту панель или нажать кнопку « Выбрать файлы », чтобы найти изображение на компьютере:
Теперь изображение появится в окне редактирования записи:
Вариант 2, Шаг 5. Чтобы изображение открывалось на новой вкладке
Многим людям нравится, чтобы ссылки, прикрепленные к изображениям, открывались на новой вкладке. Особенно это касается партнерских ссылок или ссылок, ведущих на другой сайт.
Вариант 2, шаг 6: Скопируйте HTML-код
Как сделать картинку ссылкой? Перейдите на вкладку « Текст »:
Вариант 2, Шаг 7 (необязательный): Если это партнерская ссылка, задайте для нее атрибут nofollow
14 онлайн-сервисов, чтобы сократить ссылку
Чтобы детальнее анализировать источники трафика на сайт — для оценки эффективности рекламы или реферального маркетинга, к примеру — нужно использовать UTM-метки. Это дополнительные данные, которые передаются в систему веб-аналитики: Google Analytics или Яндекс.Метрику. Они прописываются после основного URL, например, так:
Как видите, такая ссылка получается в разы длиннее, чем обычно:
Чтобы ссылка стала короткой и удобной, при этом не потеряла важный «хвост», ее нужно сократить. Разбираем 14 бесплатных онлайн-сервисов сокращенных ссылок.
Bit.ly
Bitly — один из самых известных и популярных сокращателей (наверное, даже самый — после закрытия Google URL Shortener). Не только частные специалисты и пользователи, но и бренды (Disney, Nike, BuzzFeed, The New York Times и др.) выбирают этот инструмент.
Пример стандартного короткого URL: https://bit.ly/33EpdZj
Возможности:
Создание новой сокращенной ссылки в Bitly
Bit.do
Bit.do — сервис сокращения ссылок, созданный бразильской интернет-компанией Insite. Они сделали такой продукт, так как при работе с другими столкнулись с множеством проблем: от короткого срока службы до отсутствия необходимых функций.
Пример стандартного короткого URL: http://bit.do/fHjWH
Так выглядит главная страница bit.do
Is.dg — минималистичный зарубежный сокращатель ссылок, который использует 301 редирект. За все время работы пользователи сократили 1 млрд 600+ млн ссылок — впечатляет!
Пример стандартного короткого URL: https://is.gd/hHm1s2
Что здесь можно делать:
Админки нет — история сохраняется только в cookies. Подключать свой домен тоже нельзя.
Сокращаем ссылку с помощью is.gd
Сервис полностью бесплатный.
Tiny URL
Tiny URL — один из старейших сервисов, работает с начала 2000-х. К 2020 году он обслуживает уже миллиарды редиректов в месяц.
Пример стандартного короткого URL: https://tinyurl.com/y52hzuua
Функциональность включает только сокращение ссылки с кастомным названием или без него, никакой статистики или пользовательских доменов. Впрочем, часто этого достаточно. Кстати, еще есть опция предпросмотр: можно использовать preview.tinyurl.com, чтобы заранее проверить, на какую страницу перенаправляет эта сокращенная ссылка.
В процессе сокращения ссылки (удобно, что для custom alias нет ограничений — можно и тире, и цифры)
Инструмент абсолютно бесплатный, регистрация тоже не нужна.
U.to — русскоязычный старенький онлайн-инструмент для тех, кому в основном нужно просто сокращение ссылки, а все остальное не важно.
Пример короткого URL: https://u.to/dk1IGQ
Возможности ограничиваются сокращением и аналитикой рефереров, стран и браузеров (кстати, чтобы до нее добраться, нужно заполнить регистрационную форму с 10+ полями). Кастомных URL и пользовательских доменов нет.
Все просто — вставляете ссылку и сокращаете
Все функции доступны бесплатно, даже без регистрации, если вам не интересна статистика.
Cutt.us
Cutt.us — еще один URL shortening service с одной отличительной особенностью.
Пример стандартного короткого URL: https://cutt.us/KFMaW
Возможности:
В процессе работы с Multi URL Shortener
Этот сокращатель бесплатный, платных опций нет.
Vk.cc — сервис сокращения ссылок от социальной сети ВКонтакте. Создать короткий URL в нем могут только зарегистрированные пользователи VK.
Пример короткого URL: https://vk.cc/ay1GXG
Функциональность:
Интерфейс vk.cc удобный и хорошо знакомый
OK.me — онлайн-инструмент для сокращения ссылок от другой российской социальной сети — Одноклассников. Здесь тоже требуется регистрация и авторизация.
Пример короткого URL: https://ok.me/e8W
Возможности:
Нет кастомных ссылок и доменов, QR-кодов, подробной аналитики. Опять же возможны сложности с доступом у пользователей Украины.
Так выглядит сокращатель ссылок от Одноклассников
Clck.ru
Clck.ru — «серьезный укорачиватель ссылок», запущен Яндексом в 2010 году. Как и Tiny URL, достаточно ограниченный и устаревший.
Пример короткого URL: https://clck.ru/pMt
Здесь можно генерировать QR-коды вместе с короткими ссылками, а также сокращать URL автоматически через API. На этом функции заканчиваются. Если нужны кастомные URL, пользовательские домены или хотя бы статистика — выбирайте другой сервис.
Вот что вы увидете в clck.ru после сокращения ссылки
Lnnkin
Lnnkin — очередной зарубежный сокращатель, пытающийся конкурировать с Bit.ly и заменить собой Goo.gl. Работает только после регистрации и авторизации.
Пример стандартного короткого URL: http://lnnk.in/abgz
Инструментарий:
Так выглядит форма lnnkin.com для укорачивания ссылок
Rebrandly
Rebrandly — зарубежный сокращатель, название которого намекает на специализацию по созданию брендированных ссылок (с пользовательским доменом). Среди клиентов IBM, Heineken, Cisco, PayPal, Volvo.
Пример стандартного короткого URL: rebrand.ly/1jqfjxc
Функциональность:
Создание новой сокращенной ссылки в Rebrandly
Хотите успешно продвигать и малый бизнес, и крупные бренды — постоянно учитесь и практикуйтесь. В этом вам поможет обучающий центр Cybermarketing, где вы найдете видеокурсы, вебинары, офлайн-мероприятия по всем ключевым направлениям: SEO, PPC, SMM, CPA, веб-аналитике, созданию сайтов, электронной коммерции.
To.click
To.click — функциональный сервис для создания сокращенных ссылок и управления ими. Разработчики делают акцент на мгновенный редирект, понятный и предсказуемый аптайм, защиту от спама, гарантию SLA.
Пример стандартного короткого URL: https://clc.to/NMpYjA
Возможности:
В процессе создания кастомной короткой ссылки с помощью to.click
Пиксели и домены доступны только в платном тарифе. Но сами тарифы будут известны только после выпуска новой обновленной версии. На момент написания статьи коммерческие опции недоступны, можно пользоваться только бесплатной функциональностью.
Goo.su
Goo.su — отечественная сокращалка ссылок, позиционируется как «возможно, даже лучший аналог goo.gl, bit.ly, clck.ru».
Пример стандартного короткого URL: https://goo.su/1uIo
Что здесь можно сделать:
Так выглядит и работает сокращатель goo.su
Инструмент полностью бесплатный (по крайней мере пока).
Ur-l.ru
Ur-l.ru — еще один русскоязычный инструмент для укорачивания ссылок. У него небольшая аудитория (2500+ пользователей сократили около 19000 линков), но интересная функциональность.
Пример стандартного короткого URL: https://ur-l.ru/OJIq6
Возможности:
Так выглядит сокращатель ur-l.ru
На сайте нет информации о тарифах. По крайней мере пока сервис остается бесплатным.
12 лучших сервисов для сокращения ссылок
Читайте нас в Telegram
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
Сервисы для сокращения ссылок помогают сократить длинные url, чтобы использовать их в соцсетях, презентациях или на сайтах. Мы сделали обзор 12 сервисов, которые помогут быстро сократить ссылку и поделиться ей.
Прежде чем перейти к обзору, я скажу пару слов о том, зачем вообще сокращать ссылки и когда этого лучше не делать.
Зачем сокращать ссылки
Сокращение длинных гиперссылок полезно по двум причинам:
Также некоторые сервисы по сокращению ссылок показывают статистику по переходам страницы и характеристикам аудитории (регион, пол, возраст).
Когда ссылки лучше не сокращать
В email. Почтовым провайдерам сложно отследить, куда ведёт сокращённая ссылка. На другом конце может быть нерелевантная информация или прямая загрузка файла с вирусом. Поэтому письма с редиректами автоматически попадают в спам. Чтобы этого не произошло, в письмах нужно использовать гиперссылки, без сокращений и редиректов.
На важных разделах сайта, в навигации. Если сервис-сокращатор закроется, скорее всего, все укороченные ссылки сломаются и их нужно будет менять.
Да: используйте сокращатель
Скинуть мемчик в рабочий чат.
Нужен QR-код для конференции.
Вам нужно продиктовать ссылку.
Ссылка не должна занимать много места: например, в презентации.
В таргете соответствующей социальной сети.
Нужна статистика по кликам, системы аналитики по какой-то причине не подходят.
Чтобы скрыть партнёрские метки в ссылке.
Нет: лучше вставить полную ссылку
Навигация на сайте, важные разделы.
Если ссылка навсегда должна остаться рабочей.
Bit.do
Простой сервис, в котором можно создать короткий url. Окончание к ссылке вы можете написать сами. Обратите внимание, если кто-то до вас уже использовал такое окончание, сервис не даст им воспользоваться.
Сервис также генерирует QR-код для ссылки. Из плюсов — если в конце созданного url в строке браузера ввести «-», вам откроется статистика этой ссылки.
Минусы: отсутствие русского языка и несовременный дизайн.
Bitly.com
Сервис даёт укороченную ссылку без регистрации. Есть подробная аналитика для зарегистрированных пользователей: число переходов по ссылке в каждый день, источники переходов и география пользователей.
Совет
Чтобы получить статистику переходов по укороченной ссылке без регистрации, просто добавьте к url знак «+». В браузере откроется аналитика вашего укороченного url.
Минусы: английский интерфейс.
Сlck.ru
Сервис от Яндекса, который помогает маркетологам быстро получать обрезанные ссылки. Работает без регистрации. Бонусом сервис генерирует QR-код ссылки. Укороченную ссылку можно сразу расшарить в социальных сетях.
Минусы: отсутствие аналитики по коротким ссылкам.
Cutt.us
Англоязычный сокращатель ссылок, бесплатно и без регистрации. Поможет создать собственное окончание url и объединить несколько ссылок одним ключевым словом.
Для этого переходим на cutt.us/smarts/ и вставляем несколько длинных ссылок. Выбираем им единое окончание, например «blogunisender», и получаем сокращённые ссылки, объединенные одним ключевым словом.
Минусы: нерусифицированный интерфейс, отсутствие статистики переходов.
Is.gd
Полезный сервис для создания собственных окончаний короткой гиперссылки. Работает без регистрации. Сохраняет статистику посещений ссылки по файлам cookies.
Минусы: не юзер фредли интерфейс, только английский язык.
Okl.lt
Простой сервис для сокращения ссылок в рекламе соцсети «Одноклассники». Чтобы не вводить пользователей в заблуждение, лучше не злоупотрелять использованием на других площадках.
Короткий url выглядит чисто, вида «okl.lt/». Есть стати стика по переходам.
Минусы: требуется регистрация.
lnnkin.com
Ещё один англоязычный сервис. Генерирует короткий url и также кастомизирует окончание, если необходимо. Из плюсов — ссылку можно защитить паролем.
Минусы: много рекламы и всплывающих баннеров.
Отслеживание данных по переходам доступно без регистрации, просто сохраните track id или страницу статистики. Логиниться придётся, если хотите отредактировать или удалить уже созданные ссылки.
Минусы: редактирование уже созданных коротких ссылок доступно в платной версии.
Goo.su
Простой бесплатный сервис для сокращения url. Можно кастомизировать окончание ссылки и закрыть полученный url от индексирования. Это полезно, если вы размещаете короткий url стороннего ресурса на своём сайте.
Чтобы создать собственный короткий адрес, в поле «Алиас» введите нужное окончание гиперссылки.
Минусы: ресурс переполнен рекламными баннерами. Для аналитики потребуется регистрация.
Rebrandly.com
Один из самых функциональных сервисов для уменьшения длины гиперссылки. Rebrandly умеет:
Бесплатный тариф ограничен количеством кликов. За минимальную платную версию придётся платить от 29$ в месяц.
Совет
Без регистрации вы можете также сгенерировать короткий url без кастомизации под домен.
Минусы: бесплатная версия ограничена — для глубокой аналитики и подключения нескольких доменов придётся платить.
Tinyurl.com
Один из старейших сервисов для обрезания url. Tinyurl бесплатный, поэтому заспамлен рекламными баннерами. Но сделать уникальный url всё равно можно — просто задайте собственное окончание в строке «Custom alias».
Минусы: устаревший интерфейс с большим количеством рекламы.
To.click
Современный сервис для уменьшения длины гиперссылки с несколькими дополнительными фичами. Сокращатель доступен только после регистрации, но функционал того стоит.
Помимо уменьшения длины ссылки, To.Click предлагает кастомизацию короткого url под ваш домен (только в платной версии) и возможность учёта пикселя таргетированной рекламы. Коммерческий тариф начинается от 990₽ в месяц. Сокращать ссылки можно через телеграм-бота @toclick_bot.
Из необычного
Сервис to.click поддерживает эмодзи и кириллицу в окончании короткого url.
Минусы: расширенный функционал доступен только в платной версии ресурса.
U.to
Минималистичный сервис для укорачивания ссылок. Для получения короткого адреса регистрация не нужна. Заводите аккаунт, если хотите отслеживать переходы по укороченной ссылке.
Минусы: форма регистрации с десятью обязательными полями.
Vk.com/cc
Вконтактовский сокращатель ссылок. Укороченные ссылки можно использовать не только в социальной сети.
Чтобы получить короткий url, нужно залогиниться во «ВКонтакте». После создания укороченной ссылки будет доступен QR-код в форматах png и svg, а также статистика по просмотрам.
Минусы: чтобы пользоваться, нужно залогиниться во «ВКонтакте».
Bc.vc — при переходе по сокращенной версии ссылки показывает стороннюю рекламу.
Demo.polr.me — бесплатный проект пока еще в бета-версии, поэтому не рекомендуем его как надежный. Есть возможность кастомизации окончания ссылки.
Zapier URL Shortener — работает для сокращения ссылок только для пользователей сервиса Zapier.
Yourls — сложный для регулярных сокращений. Это бесплатное программное обеспечение с открытым кодом. Чтобы пользоваться, нужно звать разработчиков.
Clck.ru.com — при переходе по короткому url-у, появляется 10-секундное окно баннера.
Urlways.com — в публичной версии сокращённая ссылка открывается с рекламой.
Vk-cc.ru — переход на основную гиперссылку происходит только после редиректа с короткой рекламой.
Сравнение сервисов
Для удобства выбора я добавила все данные о сервисах в сводную таблицу: