2016-02-28

Внедряем разметку Open Graph на blogspot для красивого постинга в соц.сети

open graph blogspot
Как сделать красивые ссылки в соцсетях, когда делятся вашими записями? Для этого нужно внедрить разметку Open Graph, которая предназначена для постинга в социальные сети. Встречался ли вам такой эффект, когда вы делитесь ссылкой в социальной сети определенной страницей, при этом картинка в анонс встраивается совсем “левая”, не относящаяся к теме, например, рекламный баннер; заголовок – название блога; а описание – текст из футера блога. Если такая проблема именно с вашим блогом, то это легко исправить, главное внедрить разметку Open Graph. В этой статье мы будем внедрять разметку Open Graph в блог Blogspot / Blogger. Встроив разметку Open Graph, вы сможете делать красивые публикации ваших записей в социальных сетях. Самое сложное это настроить Open Graph для Facebook, поэтому в этой статье я остановлюсь на этом подробно.

Читайте также про настройку микроразметки Schema.org для Blogspot
Перед тем, как перейти к настройке open Graph, ознакомьтесь с его основными мета-тегами:
  • og:title: Прописывается заголовок вашей записи, блога и т.п..
  • og:url: Это условие прописывает url (ссылку) на вашу запись, блог.
  • og:image: Это условие поможет установить нужную картинку в пост ленты социальной сети.
  • og:type: Определяет тип вашего контента, например, статья или видео.

Настройка Open graph для Blogger

..
  1. Идем в панель управления blogspot –> Шаблон –> изменить html (или в редактор шаблона блогов),
  2. находим тег <html>. Он может выглядеть примерно так
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'  xmlns:expr='http://www.google.com/2005/gml/expr'>
  3. Добавляем к этому тегу xmlns:og='http://ogp.me/ns#', в результате должно получиться следующее:
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
  4. Поздравляем вы успешно добавили протокол Open Graph, который позволяет двигаться дальше, чтобы добавить Open Graph мета-теги в блоггера. Найдите тег <HEAD> в своем блоге и вставить следующие строки кода:
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <meta property='og:image:width' content='1200'/>
    <meta property='og:image:height' content='630'/>
    <b:else/>
    <meta content='logo-link' property='og:image'/> </b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='og:description'/> <b:else/> <meta expr:content='data:post.snippet' name='og:description'/> </b:if>
    <meta content='app_id' property='fb:app_id'/>
    <meta content='fb_admins' property='fb:admins'/>

  5. Вам нужно изменить в предложенном коде те отрезки, которые выделены цветом. logo-link – выделено фиолетовым цветом – это ссылка на изображение, которое является логотипом вашего сайта. Вы можете использовать любую картинку, размер которой больше, чем 200 x 200 пикселей и которая отражает тематику вашего сайта. Именно она будет встраиваться в запись ленты фейсбук, когда кто-нибудь захочет поделиться главной страницей вашего сайта. Эта картинка должна в идеале иметь соотношения сторон 3:1 и формат PNG, JPEG или GIF.
    Также вам нужно заменить 'app_id' и 'fb_admins' на соответствующие значения. Как их узнать читайте дальше в следующих ппунктах данной статьи.
  6. Перейдите на страницу https://www.facebook.com/insights/
    Нажмите на кнопку “add domen”, у вас появится окно с метатегом, который выглядит так <meta property="fb:admins" content="XXX">, но не торопитесь заполнять пока форму. Скопируйте метатег и вставьте его значение вместо 'fb_admins'.
    мета тег facebook open graph
  7. Не заполняйте форму, так как у вас неизбежно выскочит ошибка. Это нужно будет сделать позднее.
  8. Вначале нам нужно получить id приложения. Перейдите на https://developers.facebook.com/apps.
    Зарегистрируйтесь в качестве разработчика:
    зарегистрироваться на facebook developer
    регистрация на facebook developer
  9. Добавьте новое приложение, нажав на кнопку “Add a new app”.
    Добавьте ваш веб-сайт, на котором вы настраиваете Open Graph. Для этого нажмите на значок WWW (website):
    добавить новое приложение facebook
    Введите домен вашего сайта:
    добавить новый сайт facebook
    Выберите категорию и нажмите на кнопку “Создайте идентификатор приложения”:
    создать новое приложение facebook
    Далее вы получите Javascript. В этом скрипте выделен зеленым цветом ваш номер appId, в моем случае - это 170081493506939 (смотри скриншот ниже). Его мы вставим вместо 'app_id' в коде, который мы добавляли в четвертом пункте.
    В строку Tell us about your website введите адрес вашего сайта. Завершите настройку – для этого можно просто проскроллить вниз.
    скрипт app id facebook
    2016-02-28_14-09-46
  10. Теперь вернемся к настройке приложения, которое мы не закончили в шестом пункте. Снова перейдите на https://www.facebook.com/insights/ и уже пропишите домен и завершите настройку, нажав на кнопку “Получить статистику”.
    добавить статистику для вашего сайта
    Если вы все сделали правильно, то действие будет завершено. Обновите страницу, и вы увидите
    Проверьте себя – посмотрите на код, который получился у меня после правки:
    open graph протокол на blogger

Только через некоторое время вы можете попробовать поделиться вашими сообщениями в социальных сетях, так как данные кэшируются. Если у вас нет желания ждать, то вы можете ускорить обновление информации при помощи инструмента Debugger. Введите здесь адрес вашего сайта, и после получения сведений, нажмите на кнопку “Fetch new scrape information”.
Примечание: для того, чтобы описание вашего поста соответствовало содержанию, нужно приписать к каждому сообщению description. Читайте про настройку description на blogspot. А также у вас не должны быть настроены динамические теги description к статьям блога.
Читать далее ...

2016-02-06

Микроразметка в Blogspot

микроразметка в blogger
Про микроразметку на моем блоге уже была статья, но эти фишки уже потеряли актуальность, на смену им пришли другие, поэтому читайте ниже новый урок по настройке микроразметки на Blogger, исправлении ошибок (проверять их наличие будем в валидаторе от Google). Если вы не знаете еще что такое микроразметка, для чего они нужна и где проверить валидность микроразметки на вашем блоге, то читайте все это здесь >>>
Напомню, что в блоги Blogspot микроразметка уже внедрена, но есть ошибки, которые легко устраняются.
Я покажу как убрать ошибки микроразметки на примере одного из тестовых блогов Blogger со стандартным шаблоном. Владельцы блогов с нестандартными шаблонами могут не переживать – действия требуются по их устранению очень похожи.
ошибки микроразметки blogspot

Как вы видите, что ошибки структурированных данных (так еще называют микроразметку) присутствуют в разделе BlogPosting.
..
Ошибка Как исправить
Ошибки blogId и postId Найти и удалить в шаблоне блога коды:
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
Они могут встречаться в шаблоне несколько раз. Удалить все.
Ошибка datePublished Зайдите во вкладку “Дизайн” в административной панели блога. Найдите элемент, отвечающий за выведение сообщений блога и нажмите на ссылку “изменить”. В параметрах страницы сообщения измените вид отображения даты на такой: месяц/день/год (dd/mm/yyyy), пример 2/02/2016.
Проскрольте вниз, сохраните изменения.
Скриншоты:
ошибка datepublished   исправляем ошибку микроразметки даты поста
Ошибка headline В шаблоне html блога находим код, отвечающий за заголовок. Обычно он выглядит так:
<h3 class='post-title entry-title' itemprop='name'>В оптимизированных шаблонах это:
<h2 class='post-title entry-title' itemprop='name'>В некоторых нестандартных шаблонах может встретиться такой код:
<h2 class='post-title entry-title' itemprop='name headline'>
И заменяем itemprop='name' на itemprop='headline'Окончательный вид кода будет выглядеть так:
<h3 class='post-title entry-title' itemprop='headline'>
Также отрезки кода могут встречаться несколько раз, вносим изменения во все такие строчки кода.
Ошибка author Найдите код <data:post.body/> и вставьте после него:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
Учтите, что тег <data:post.body/> может встречаться в шаблоне несколько раз, и что вставить нужно лишь в определенном месте. Можете найти его путем подбора, пробуя разные варианты.
Ошибка image Найдите код <data:post.body/> (может встречаться несколько раз) и вставьте после него:
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<b:if cond='data:post.firstImageUrl'>
<img style='display:none;' expr:src='data:post.firstImageUrl'/>
<meta itemprop='url' expr:content='data:post.firstImageUrl'/>
</b:if>
<meta itemprop='width' content='800'/>
<meta itemprop='height' content='800'/>
</div>
Исправьте значения высоты и ширины изображения на свои.
Ошибка image_url Найдите код вида:
<b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>

и удалите его.
Ошибка publisher Найдите тег <data:post.body/> (может встречаться несколько раз в шаблоне) и вставьте после него:
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'> <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <img style='display:none;' src='http://3.bp.blogspot.com/-NXJE0ll14e4/VnRLGDil9cI/AAAAAAAABi8/rhGrdkDZ8E0/s1600/technohalf-logo.png'/> <meta itemprop='url' content='http://3.bp.blogspot.com/-NXJE0ll14e4/VnRLGDil9cI/AAAAAAAABi8/rhGrdkDZ8E0/s1600/technohalf-logo.png'/> <meta itemprop='width' content='600'/> <meta itemprop='height' content='60'/> </div> <meta itemprop='name' expr:content='data:blog.title'/> </div>Замените ссылки на logo (выделено желтым) на свой логотип, а также размеры логотипа (выделено красным).
Ошибка dateModified Найдите: <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> и вставьте после него строчки:
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
Ошибка mainEntityOfPage Найдите этот код:
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>В вашем шаблоне может встретиться также такой код:
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>Замените найденные коды на следующее:
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta itemscope='itemscope' itemprop='mainEntityOfPage' itemType='https://schema.org/WebPage' expr:itemid='data:post.link ? data:post.link : data:post.url'/>
Ошибка url в секции изображение - image [ImageObject] Иногда остаются ошибки – отсутствует обязательный тег url (нет ссылки на изображение), несмотря на то, что вы исправили ошибку image по инструкции выше. Это лишь говорит о том, что не ко всем постам у вас есть миниатюры изображений. Добавьте миниатюры ко всем постам на главной странице, и ошибка уйдет.
отсутствует url изображения
Это сообщение будет дополняться, вы можете задавать вопросы в комментариях.
Читать далее ...

2016-02-03

Как скачать плейлист с youtube


Видеоблоггеры, да некоторые другие интернет-пользователи часто задаются вопросом: как скачать плейлист из youtube. Конечно, для этого есть специальные программы, но скачивание плейлистов обычно входит в платный функционал. Можно обратиться на торрент с целью получить желаемую программу с ключом бесплатно, но не забывайте, что кроме пиратской программы вы можете получить головную боль в виде троянского коня вируса.
В этой статье я предлагаю вам обходной путь – как скачать плейлист с youtube без платных, ломанных, пиратских программ. Для этого нам понадобиться:
  • любой браузер,
  • расширение savefrom.net скачать.
  • в некоторых случаях программа Download Master (например, при использовании браузера Opera старой версии). Эта программа поможет вам скачивать видео в несколько потоков. Скачать и узнать подробнее о загрузчике Download Master здесь.

Прежде всего вам нужно установить расширение savefrom.net. Оно легко устанавливается во все браузеры, кроме Google Chrome. Достаточно просто перейти на страницу сайта и нажать на кнопку “скачать”.
скачать расширение для скачивания плейлистов
После скачивания установить расширение, как показано на подсказках сайта.
установить расширение savefrom.net
В браузер Google Chrome расширение Savefrom.net устанавливается несколько иначе. Есть два пути, у меня заработал второй. Именно вторым способом у меня получилось встроить загрузчик плейлистов от savefrom.net. Опишу его подробнее:

Как скачать плейлист в любом браузере, коме старой версии Оперы

.. На странице плейлиста, который вы собрались скачать, нажмите на иконку расширения savefrom.net (справа от адресной строки), выберите пункт “Скачать плейлист”
скачать плейлист
и дальше следуйте, как показано на скринах:
  1. Здесь выберите размер видео или аудио файл:
    качество видео для скачивания
  2. подождите пока программа найдет видео, и нажмите “продолжить”:

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

Как скачать плейлист видео с Opera версии ниже 15

  1. Нажмите на иконку savefrom.net,
  2. нажимайте в открывающихся окнах кнопку “продолжить”, как и в других браузерах, пока не дойдете до окна со списком файлов видео. Нажмите на “список ссылок”:
    найдено файлов видео
  3. Запустите программу Download Master,
  4. вернитесь к расширению savefrom.net и скопируйте ссылки:
    список найденных файлов
  5. Они автоматически захватятся программой Download Master. Вам останется лишь поставить галочки в чекбоксах напротив желаемых файлов и одобрить закачку (кнопка ok). В следующем окне – выбор папки закачки видео из плейлиста.
    скачать все видео плейлиста
    добавить закачку видео в download master
Теперь вы знаете как скачать плейлист с youtube. Если у вас остались вопросы, то можете задать их в комментариях к статье.
Читать далее ...