Как сделать ссылку на сайт в ВК

Содержание

Как сделать ссылку на сайте

ссылка в тексте

Как создать правильную ссылку на сайте с использованием атрибутов, подробным описанием их типов и с примерами. Так же пошаговое объяснение как отредактировать ссылку в редакторе WordPress. Часто нужно сделать ссылку на другую страницу сайта своего или чужого. И встает вопрос как сделать? Для начала немного разберемся что такое ссылка.

Содержание статьи скрыть

Типы ссылок

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

Программисты применяют другое разделение на типы ссылок:

Обход блокировки ссылок в ВК. Ссылка на подозрительный сайт как убрать?

ссылка на другой сайт

внутренняя ссылка на этот же сайт, но она приведена как абсолютная

внутренняя относительная ссылка на страницу этого сайта. Суда так же относятся все якоря.

Отдельно стоит отметить что не все ссылки “видны пользователям” ссылки могут находиться и в скрытых областях страниц. Наиболее частый пример скрытых полезных ссылок это применения микроразметки данных https://schema.org/ очень важной при продвижении сайтов.

Виды объектов для ссылок на сайтах:

Текстовая ссылка. Пример: На данной странице есть много ссылок и полезной информации. Как видите слова “полезная информация” являются ссылкой. Данная ссылка может вести на другую страницу или на якорь на данной странице.
Кнопка. Все мы их любим и знаем. Это тоже ссылка.
Изображение. Наживая на картинку вы можете перейти на другую страницу или сайт или открыть увеличенное изображение на этой странице.
Иконка. Иконки бываю разных типов. но все их можно сделать ссылками на страницы или якоря.
Модальные окна – это когда вы кликаете кнопку и открывается окно над открытой страницей.
tooltip – это когда вы подводите мышь к объекту и всплывает пояснительный текст. Пример Пример tooltip – подсказка к тексту .
И любой объект на странице. Но это уже более профессиональная тема

Общий вид ссылки

Код ссылки состоит из:

адреса куда должен перейти пользователь или робот (это если говорить о SEO)
правил по котором должен осуществляться переход
визуального стиля ссылки

Код чистой ссылки:

Где функция href отвечает за url перехода, а адрес_куда_должен_перейти_пользователь – это url в виде:

https://help2site.ru/ – внешний url на страницу. Используется когда вам нужно сделать ссылку на другой сайт или вы не знаете как правильно прописать внутреннюю ссылку.
/contact – внутренняя ссылка на страницу сайта
#glava5 – внутренняя ссылка на якорь установленный на данной странице
/contact#glava5 – внутренняя ссылка на якорь на другой странице вашего сайта

Атрибуты ссылок

name

Атрибут “name” задает имя идентификатора для определения имени места на странице куда должен переходить якорь

КАК СДЕЛАТЬ БЕСПЛАТНЫЙ РЕДИРЕКТ Tumblr, обход блокировки ссылок вк

Где имя_якоря отвечает за идентификацию функции. Самый частый пример использования кнопка “Наверх”, для того чтобы она при нажатии отправила в то место где вы хотите, нужно добавить атрибут name или существующему объекту или создать пустую ссылку с данным именем. Пример кода для текстовой ссылки:

target

Атрибут “target” задает параметры для загрузки ссылки в этом же окне, в новом окне или фрейме или нет.

Еще по теме: Как поставить эмодзи после фамилии в ВК на телефоне

Значения атрибута:

Открывать ссылку в новом окне так же можно через атрибут – noopener.

Пример – наши работы

title

Атрибут “title” задает пояснение к ссылке. Отображается в виде всплывающего окна при наведении на ссылку. Любимый атрибут SEO-специалистов который позволяет при правильном его использовании значительно поднять сайт в выдаче.

Пример – Наверх

rel

Атрибут “rel” определяет отношения текущий страницы к странице на которую будет осуществляться переход и описывает ее. Данный атрибут определяется только для поисковых роботов и задает им правила перехода и индексирования открывающейся страницы. Параметр нужен для SEO-оптимизации и продвижения сайтов.

Один атрибут может содержать несколько значений размещенных через пробел.

Значение атрибута:

rev

Атрибут “rev” в отличие от “rel” описывает текущую страницу по отношению к остальным страницам сайта. Заранее заданных параметров нет поэтому описание делается текстом. Пример:

shape

Атрибут “shape” задает параметры активной области, действителен только на изображениях включенных в объект. Проблема – работает не со всем браузерами. Значения:

circle – Область в виде круга.
default – Область по умолчанию (прямоугольная).
poly – Полигональная область произвольной формы.
rect – Прямоугольная область.

tabindex

Атрибут “tabindex” определяет последовательность перехода по ссылкам при использовании клавиши клавиатуры “TAB”. Применяется при создании специализированных сайтов с ограничениями. Например – сайты для слепых.

type

Атрибут “type” применяется для описания ссылки при вставке объектов MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета). К ним относятся видео, аудио, pdf, архивы (zip, rar и другие), таблицы и многое другое. Полный перечень MIME-типов.

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

Если читаете данный материал скорее всего у вас сайт на какой либо CMS (WopdPress, 1C:Битрикс, Drupal, Joomla!, MODx или любой другой). На всех системах стоят разные редакторы которые по разному позволяют создавать ссылки. Например: создать кнопку, добавить изображение или объект. Правятся ссылки в них через открытие (если позволяет CMS) html-кода и поиска там нужного элемента ссылки.

Эта работа скорее для профессионалов и вы можете заказать ее у нас – доработка и поддержка сайта. Мы сейчас рассмотрим возможности простого текстового редактора в котором вы сможете самостоятельно все сделать.

Как создать ссылку в WordPress

Откройте нужную запись или страницу в редакторе. Выделите текст или изображение на который вы хотите поставить ссылку. Нажмите кнопку “Вставить/изменить ссылку“.

ссылка в текст на сайт
поставить ссылку

В открывшемся окне вставьте адрес ссылки (на фото “/blog”), вы увидите текст ссылки (если нужно можно отредактировать), заголовок (это атрибут title) и rel (по умолчанию “нет” и “nofollow”, подробнее про rel) и “Цель” (это атрибут target со значением “Нет” (значение по умолчанию – _self) или “Новое окно”(значение – _blank)).

Предупреждение: если вы в атрибуте rel в WordPresse выбираете “nofollow”, то CMS автоматически вам подставит rel=»nofollow noopener noreferrer»

Если вам нужно добавить какие либо другие атрибуты то вам нужно будет перейти или в панели Инструменты > Исходный код или во вкладку “Текст”. Найти нужный элемент и отредактировать его.

как отредактировать ссылку в редакторе

Предупреждение: не все ваше творчество в коде нравится WordPress, при возврате обратно в Визуально часть кода может исчезнуть. Из этой ситуации можно выйти – оставив так как получилось и вести блог или сайт дальше. Или обратиться к нам за доработками вашего сайта.

Если нужно сделать ссылку с изображения то нужно вставить картинку в текст. Выделить ее и дальше нажимаем на “Вставить/изменить ссылку” и дальше аналогично работе с текстом.

как добавить ссылку на картинку

Ликбез: как сделать ссылку в «Контакте» на стене?

как сделать ссылку в Контакте на стене

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

Как сделать ссылку в «Контакте» на стене? Прежде чем мы расскажем вам о процедуре, хотелось бы отметить, что ссылка может быть нескольких видов, а именно:

Скрытая (пользователи будут видеть тот текст, который укажете вы, но никак не адрес ссылки).
Открытая – это самый обычный копипаст – копируем ссылку на внешний сайт или внутреннюю страничку и вставляем ее на стену.

Как сделать ссылку в «Контакте» на стене? Открытая ссылка

Ссылка на стене в Контакте

Это самый простой способ. Как делать ссылки в «Контакте»? Нам необходимо скопировать адрес ссылки на страницу, профиль другого пользователя, сайт, который находится в адресной строке браузера (начинается с http), и вставить на стену. При этом у вас отобразится не только текст, но и маленькая картинка сайта. Если для вас это приемлемо, то нажимайте кнопку «Отправить».

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

Как сделать ссылку в «Контакте» на стене? Скрытая ссылка

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

[id____ | фраза, слово], где id – это идентификатор страницы пользователя, __ — место для вставки значения идентификатора (по умолчанию оно числовое, также у пользователей есть возможность менять его либо на аналогичное, состоящее из чисел, или на буквенное), | — флешмоб, «фраза, слово» — это то, на что вы хотели бы заменить ссылку;
[club____ | фраза, слово], где club – это обозначение группы, __ — место для вставки значения идентификатора (по умолчанию оно числовое, также у

как делать ссылки в контакте

Ссылка на стене в «Контакте», ведущая на страницу другого пользователя

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

Источник: fb.ru

Оформление ссылок на социальные сети

Что касается ссылок на профили или группы — там все просто, это обычные ссылки. А вот с ссылками «поделиться» немного посложнее, т.к. там нужно в ней передать адрес текущей страницы.

Еще по теме: Вконтакте сад своими руками

В этой заметке установка таких ссылок и варианты их оформления.

Установка ссылок «поделиться» в соц. сетях
Примеры оформления
Цвета социальных сетей
Использование кнопок для пагинации страниц

Установка ссылок «поделиться» в соц. сетях:

ВКонтакте

Одноклассники

Twitter

Примеры оформления:

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

Вариант 1

.social-icons-1 <
padding : 0 ;
list-style : none ;
margin : 10px ;
.social-icons-1 li <
display : inline-block ;
position : relative ;
font-size : 24px ;
.social-icons-1 i,
.social-icons-1 img <
color : #fff ;
position : absolute ;
left : 18px ;
width : 24px ;
height : 24px ;
text-align : center ;
transition : all 0.3s ease-out ;
.social-icons-1 a <
display : inline-block ;
.social-icons-1 a:before <
transform : scale ( 1 ) ;
width : 60px ;
height : 60px ;
border-radius : 100% ;
display : block ;
background : linear-gradient ( 45deg, #337AB7, #2d6b9f ) ;
box-shadow : 0 2px 5px rgba ( 0,0,0,0.2 ) , 0 2px 4px rgba ( 0,0,0,0.2 ) ;
transition : all 0.3s ease-out ;
.social-icons-1 a:hover:before <
transform : scale ( 0 ) ;
transition : all 0.3s ease-in ;
.social-icons-1 a:hover i,
.social-icons-1 a:hover img <
transform : scale ( 1.8 ) ;
color : #337AB7 ;
transition : all 0.3s ease-in ;

Вариант 2

.social-icons-2 <
padding : 0 ;
list-style : none ;
margin : 10px ;
.social-icons-2 li <
display : inline-block ;
position : relative ;
.social-icons-2 li a <
width : 60px ;
height : 60px ;
display : inline-block ;
text-align : center ;
margin : 0 4px ;
border-radius : 50% ;
padding : 6px ;
box-sizing : border-box ;
text-decoration : none ;
box-shadow : 0 8px 12px rgba ( 0,0,0,0.3 ) ;
background : linear-gradient ( 0deg, #ddd, #fff ) ;
transition : .5s ;
.social-icons-2 li a:hover <
box-shadow : 0 2px 5px rgba ( 0,0,0,0.3 ) ;
color : #000 ;
.social-icons-2 li a i <
display : block ;
background : linear-gradient ( 0deg, #fff, #ddd ) ;
border-radius : 50% ;
padding : 12px ;
font-size : 24px ;
color : #969696 ;
transition : .5s ;
width : 24px ;
height : 24px ;
position : absolute ;
box-sizing : content-box ;
.social-icons-2 li a:hover i <
color : #337AB7 ;
.social-icons-2 li a img <
width : 24px ;
height : 24px ;

Вариант 3

.social-icons-3 <
padding : 0 ;
list-style : none ;
margin : 10px ;
display : flex ;
justify-content : center ;
.social-icons-3 a i <
font-size : 32px ;
line-height : 64px ;
transition : 0.3s ;
.social-icons-3 a img <
width : 32px ;
height : 32px ;
margin-top : 16px ;
.social-icons-3 a <
text-decoration : none ;
position : relative ;
display : block ;
width : 64px ;
height : 64px ;
background : #BFE2FF ;
text-align : center ;
margin : 0 8px ;
box-shadow : 10px 0 10px rgba ( 0, 0, 0, 0.3 ) ;
transition : 0.3s ;
color : #337AB7 ;
.social-icons-3 a::before <
position : absolute ;
background : rgba ( 51, 122, 183, 0.3 ) ;
height : 10% ;
width : 100% ;
transform : skewX ( -45deg ) ;
transition : 0.3s ;
.social-icons-3 a::after <
position : absolute ;
left : 64px ;
background : rgba ( 51, 122, 183, 0.6 ) ;
height : 100% ;
transform : skewY ( -45deg ) ;
transition : 0.3s ;
.social-icons-3 a:hover <
transform : translate ( -5%, 5% ) ;
box-shadow : 6px 4px 20px rgba ( 0, 0, 0, 0.5 ) ;
.social-icons-3 a:hover <
background : #337AB7 ;
.social-icons-3 a:hover i <
color : #fff ;
.social-icons-3 a:hover::after <
background : #184e7c ;
.social-icons-3 a:hover::before <
background : #2a70aa ;

Вариант 4

.social-icons-4 <
display : flex ;
justify-content : center ;
flex-wrap : wrap ;
list-style : none ;
margin : 10px ;
.social-icons-4 a <
display : inline-block ;
width : 60px ;
height : 60px ;
border-radius : 100% ;
background : #efefef ;
position : relative ;
margin : 5px ;
text-align : center ;
box-shadow : 0 2px 6px #c1c1c1 ;
font-size : 32px ;
color : #337AB7 ;
transition : 0.5s ;
.social-icons-4 a img <
width : 32px ;
height : 32px ;
margin-top : 14px ;
.social-icons-4 a i,
.social-icons-4 a img <
position : relative ;
line-height : 60px ;
.social-icons-4 a:hover <
color : #fff ;
.social-icons-4 a:after <
display : block ;
position : absolute ;
background : #BFE2FF ;
border-radius : 100% ;
transition : 0.3s ;
.social-icons-4 a:hover:after <
width : 60px ;
height : 60px ;
margin-left : -30px ;
background : #337AB7 ;

Вариант 5

.social-icons-5 <
list-style : none ;
margin : 10px ;
padding : 0 ;
display : flex ;
justify-content : center ;
.social-icons-5 a <
text-decoration : none ;
color : #fff ;
width : 60px ;
height : 60px ;
display : flex ;
align-items : center ;
justify-content : center ;
border-radius : 10px ;
margin : 0 6px ;
font-size : 26px ;
background : #337AB7 ;

transition : border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

transition : transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

Источник: atuin.ru

Как сделать ссылку на сайт в ВК

Как сделать ссылку на сайте

Типы ссылок