Ссылка поделиться в инстаграм html

Кнопки «поделиться» для сайта

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.

.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url("../img/share-btns.png") no-repeat left top; >.share-buttons .vkontakte < background: url("../img/share-btns.png") no-repeat -168px top; >.share-buttons .ok < background: url("../img/share-btns.png") no-repeat -126px top; >.share-buttons .twitter < background: url("../img/share-btns.png") no-repeat -42px top; >.share-buttons .pinterest < background: url("../img/share-btns.png") no-repeat -210px top; >.share-buttons .mail < background: url("../img/share-btns.png") no-repeat -294px top; >.share-buttons .telegram < background: url("../img/share-btns.png") no-repeat -672px top; >

Так просто можно добавить кнопки «поделиться» на ваш сайт.

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

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

Поделиться в фейсбук

https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

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

https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в ok

https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ&st.comments=ОПИСАНИЕ

Поделиться в телеграм

https://telegram.me/share/url?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в pinterest

https://ru.pinterest.com/pin/create/button/?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для pinterest необходимо так же добавить изображение записи (страницы)

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Поделиться в twitter

https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка

Поделиться в @Мой мир mail.ru

https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для @Мой мир необходимо так же добавить изображение записи (страницы).

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее — можете воспользоваться шрифтовыми иконками fontAwesome:

И далее добавлять необходимые стили.

Чтобы подтягивались необходимые изображения ваших статей, используйте Open Graph разметку.

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

Мы рассмотрели, как добавить кнопки «поделиться» для наиболее популярных социальных сетей в русскоязычном сегменте.

Если вам понравилась данная статья, то возможно и ссылки на мессенджеры окажется для вас полезной.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 5 )

Подскажите пожалуйста, как быть, если я пишу сайт на локальном сервере Open Server, какой полный адресс указывать? https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ на типо: /roads/road_1.php?

А зачем вам указывать локальный адрес? Вы же его не будите расшаривать. Вам нужно указывать глобальный адрес (адрес сайта, который будет на хостинге).

Спасибо! Но, не совсем понял, можете объяснить если не сложно? Или показать хотя бы как пример как записать адресс в моем случае? Ведь домена у меня еще нет. Просто пишется код в open server. И где мне тогда в моем случае взять глобальный адресс?

Источник

Кнопка поделиться в инстаграм на сайт

Инстаграм

Привет! На днях меня попросили поставить кнопку на сайт, чтобы можно было делиться записями и страницами в соцсети инстаграм. Я с уверенностью сказал, что такая кнопка есть и что мне понадобиться 5-10 минут, чтобы поставить её на сайт. Я сразу установил плагин Uptolike, так как в нём самый большой выбор кнопок популярных соцсетей. Но, оказалось, что такой кнопки там нет. Меня это насторожило, потому что если в uptolike нет кнопки инстаграм, значит её вообще нет.

Мне хватило 5 минут, чтобы понять, что действительно такой кнопки не существует. То есть, в инстаграм нет такой функции, потому что инстаграм мобильная социальная сеть, предназначенная для мобильных устройств. Можно установить на сайт кнопку инстаграм, но она будет направлять пользователя на вашу страницу инстаграм, а не публиковать страницу в instagram где установлена кнопка. Есть плагин для добавления на сайт кнопки инстаграм.

В соцсети instagram есть функция для создания своей кнопки инстаграм. На сайт такую кнопку можно поставить с помощью кода.

Есть ещё один Супер плагин для автопостинга записей и страниц в инстаграм и во все популярные соцсети. Всем рекомендую этот плагин!

Остались вопросы? Напиши комментарий! Удачи!

Источник

Добавить на сайт кнопки поделиться в соц сетях без плагинов и скриптов — возможно ли?

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

 
" target="_blank" rel="nofollow"> " target="_blank" rel="nofollow">  

Конечно возможно. Всё возможно если захотеть!
А берёшь просто разбираешь URL там же всё легко.
Вот я делал кому то:

 
 Livjournal" href="http://www.livejournal.com/update.bml?subject=&event=" target="_blank"> Vk" href="http://vk.com/share.php?url=&title=&description=&image=" target="_blank"> Twitter" href="http://twitter.com/intent/tweet?status= " target="_blank"> Mail" href="http://connect.mail.ru/share?url=&title=&description=&imageurl=" target="_blank"> Facebook" href="http://www.facebook.com/sharer/sharer.php?src=sp&u=&t==&description&picture" target="_blank"> Odnoklassniki" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=" target="_blank"> Events.Webmoney" href="//events.webmoney.ru/sharer.aspx?url=" target="_blank">

.social_ico a .social_ico #jj .social_ico #fb .social_ico #tw .social_ico #mail .social_ico #ok .social_ico #vk .social_ico

вот картинка спрайтовая
таким же макаром и картинку добавляй посмотри какой у них там атрибут в урле отвечает за картинку и подставляй за вместо него свою переменную в которой будет нужная картинка указана.
P.s. function decodsocial возможно не понадобиться если используешь utf-8. Я её использовал чтобы передать «Партнёрская программа» с сайта кодировкой 1251.=( Если зависимую от урлов надо ссыль постить, то /?r=$user заменяй на $_SERVER[«REQUEST_URI»]

Вы взяли и в тупую ко всем сервисам сделали ссылки на sharer.php?url= , вот почти нигде и не работает. Гуглите правильную ссылку для каждого сервиса отдельно по запросу вроде «vkontakte share link».

Ссылка для вконтакта:
http://vk.com/share.php?url=

В инстаграме разве можно делиться ссылками?

Чтобы делились именно соответствующей страницей, а не лого, как у xmoonlight )), вам без JS не обойтись.

Андрей Бердов: как это нельзя без js? Если вы имеите ввиду допустим каждая статья отдельная страница и как той или иной делиться? Да очень просто $ssil = urlencode(«http://».$_SERVER[‘HTTP_HOST’].»/?r=$user»); это просто я рефку постил а если надо зависимую от страниц то ведь ?r=$user можно заменить на и проблема решена=) ligisayan: понял?

насчёт «поделится от яндекс» я бы не стал ими пользоваться

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

«. стилизация иконок в блоке Поделиться не предусмотрена. «, «. опцию data-bare, при указании которой перестают подключаться все CSS-стили. «

Вообще-то немного странно звучат эти фразы.
Поясню, почему:
— в вашем блоке присутствует несколько избыточная информация, так как выбирая, к примеру, всего 5 кнопок, остальные все равно грузятся, так как почти весь код вместе с иконками (которые svg) и «стилями» находится внутри основного скрипта (его размер, к сведению 87Кб);
— компания, которая требует оптимизации кода от индексируемых ей сайтов, предлагает код, половина которого, в случае неполного выбора, просто не будет работать. Страница, набирающая подобных блоков даже 5-10 штук, уже увеличивается на 1 Мб, не считая времени на выполнение 1Мб-го кода! А предлагая отключать все стили, Вы вынуждаете подключать свои, что дополнительно увеличивает код!;
— SVG — это векторный формат, который в вашем случае описан прямо в скрипте, не имеет рамок, может быть после описания окрашен в любой цвет и оформлен «как душа пожелает» в любой момент при его вызове.;

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

«Если уж делать, то делать хорошо!» — разве не ваш девиз?

автор под ником: drawline

Источник