Поделиться в соц сетях. Как сделать кнопки расшара на сайте без использования JavaScript

16.09.20184842 мин. 23 сек.программированиеjavascript
Социальные сети являются отличным источником трафика для вашего сайта. Самый простой способ добавить кнопки социальных сетей - использовать стандартные библиотеки.  Данный подход влечет за собой увеличение количества подключаемых сторонних скриптов, дополнительный JavaScript и, иногда, конфликт с уже установленными библиотеками. Все это значительно понижает скорость загрузки сайта и увеличивает нагрузку на устройство пользователя. Самый лучший способ - использование RESTFull Api с передачей необходимых параметров в момент, когда пользователь решит поделиться страницей сайта. Простыми словами, мы просто сделаем правильную ссылку с target="_blank", а соответствующая соц сеть возьмет на себя задачу по определению авторизации пользователя и дальнейшим действиям.

Правильные мета теги для красочных постов в соц сетях через кнопку поделиться

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

Внедряем Open Graph разметку

Open Graph используется большинством социальных сетей - Facebook, Viber, Printerest, WhatsApp, Telegram, Twitter.
  1. og:title - заголовок статьи;
  2. og:url - адрес статьи;
  3. og:image - превью изображение;
  4. og:image:width - необязательный параметр для указания ширины картинки;
  5. og:image:height - необязательный параметр для указания высоты картинки;
  6. og:type - тип контента: статья, новость, фильм и т.д;
  7. og:site_name - название сайта;
  8. og:description - короткое описание страницы.
  9. og:local - язык и регион сайта (RU_ru);
  10. og:audio - оповещает о наличии аудиофайлов в контенте страницы;
  11. og:video - оповещает о наличии видеофайлов в контенте страницы.
Для проверки микроразметки Open Graph используйте сервис Facebook

Микроразметка Twitter Card

Twitter использует OpenGraph разметку, но для расширения стандартных твитов с помощью видео, аудио или картинок используйте Twitter Card. Существует несколько типов постов:
  1. Summary Card - картинка, описание и заголовок. По умолчанию.
  2. Summary Card with Large Image - большая картинка. 
  3. Photo Card - большая фотография в центре. Можно не указывать заголовок 
  4. Gallery Card — мини-галерея из 4 изображений. 
  5.  App Card - карточка приложения для Google Play или AppStore. 
  6. App Installs and Deep-Linking - возможность скачивания приложения. 
  7. Player Card - воспроизведение видео или аудио файла. 
  8. Product Card - информация о товаре в магазине: заголовок, название, описание, цена, фото, место продажи.
Основные мета теги микроразметки Twitter Card:
  1. twitter:card - указывается один из вышеперечисленных типов;
  2. twitter:site - @ваш аккаунт в Twitter;
  3. twitter:title - заголвок статьи;
  4. twitter:description - контент поста;
  5. twitter:image — ссылка на изображение;
  6. twitter:label - стоимость товара.

Поделиться в FB. Facebook Share

Ссылка для размещения поста в Facebook - //www.facebook.com/sharer.php?s=100
p[url] - адрес страницы для расшара
p[title] - заголовок поста
p[summary] - короткое описание или Description
p[images] - массив с изображениями. Вы можете добавить несколько фотографий

Поделиться в других социальных сетях

В следующих социальных сетях передаваемый GET параметры приблизительно похожи. Основным является url - адрес страницы для расшара. По большей части оформление поста следующие соц сети берут из мета тегов

Google+ Share

Ссылка для размещения поста в Google+ //plus.google.com/share

Twitter

Ссылка для размещения поста в Twitter - //twitter.com/share
text - содержимое твита 

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

Ссылка для размещения поста в однокласниках - //connect.ok.ru/offer
title - заголовок поста
imageUrl - ссылка на превью страницы

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

Ссылка для размещения поста во вконтакте -  //vk.com/share.php
Лого https://piploid.ru
24.05 в 17:40Как оформлять статьи. Краткий справочник по быстрому SEOВы пишете интересные тексты, но никто не читает? Вероятно вы не соблюдаете даже половины из перечисленных в статье правил!03.04 в 11:49Что такое доменное имя и где его купитьДавайте разберемся: что такое доменное имя и в чем отличие зоны RU от COM, где купить домен и как оформить его на себя26.03 в 11:44Как собрать семантическое ядро для сайтаНебольшой гайд по правильному сбору семантики для своего сайта. Полезные сервисы для упрощения работы18.03 в 22:01Работа с массивами по взросломуМой личный справочник необычных функций для работы с массивами. Как преобразовать массивы к нужному виду в одну строчку.16.03 в 21:02Выбираем лучший хостинг. Подробный обзор swebНе знаете где разместить свой сайт? В данном обзоре я расскажу об основных преимуществах хостинга, с которым я работаю уже более 5 лет27.01 в 14:05Работа с картинками в CSS. Фильтры как в InstagramПодробно о современных css свойствах используемых для работы с картинками и фоном. Как сделать фильтры из Instagram
Оставить комментарий
Заказать сайт
ОТПРАВИТЬ
+7 926 426 93 41anton.ross@yandex.ru
ПОНЕДЕЛЬНИК-СУББОТА
09:00 - 20:00
×
Добро пожаловать

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

Войти
Войдите через:
Создать учетную запись
Восстановление пароля

Укажите email указанный при регистрации, на который будет отправлена инструкция по восстановлению пароля

Сбросить пароль
Добро пожаловать

Зарегистрируйтесь чтобы оставлять комментарии и добавлять фильмы в избранное

Зарегистрироваться

Регистрируясь на сайте Вы соглашаетесь с политикой конфиденциальности нашего сайта и даете согласие на обработку персональных данных

Войдите через:
У меня есть учетная запись
Смена пароля

Используйте код отправленный на указанную вами почту для смены пароля

Сменить пароль
×