Заметки


Создаем Twitter Cards для сайта

Уже с давних пор, при добавлении ссылки на пост в моем блоге в сообщение твиттера, в приложении сервиса или у них на сайте можно увидеть вот такую карточку статьи:

Называется это Twitter Card и делается это очень легко с помощью нескольких мета-тегов на странице:

<meta name="twitter:site" content="@mobilaname">
<meta name="twitter:creator" content="@ashorror">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://blog.mobila.name/post/543cf10b11d0c/">
<meta name="twitter:title" content="Украина, Херсонская область">
<meta name="twitter:description" content="Вчера утром поездом выехал в Украину. Первый пункт назначения - Новая Каховка.Поезд примчал меня в Мелитополь. Сюда едут те, кто потом едет на отдых на Азовское море. Население Мелитополя - 150 тысяч человек.">
<meta name="twitter:image" content="http://ic.pics.livejournal.com/larchanka/20861394/31955/original.jpg">

Давайте разберем их все.

  • twitter:site - аккаунт сайта в твиттере, включая '@'
  • twitter:creator - аккаунт автора в твиттере, включая '@'
  • twitter:card - Тип карточки: summary, photo или video.
  • twitter:url - Адрес страницы в интернете.
  • twitter:title - Заголовок статьи.
  • twitter:description - Описание статьи до 200 символов.
  • twitter:image - Изображение для карточки.

Когда все эти теги уже вставлены на страницы вашего сайта, самое время подать заявку для вашего домена. Подтверждение заявки – символический процесс и проходит почти сразу. Сделать этом можно на специальной странице.

Читать 1 мин | 14.10.2014 17:42

 

Настоящий размер изображения в JavaScript

Иногда в JavaScript необходимо получить размер изображения. И все бы неплохо, но в связи со всякими Retina-дисплеями и другими экранами с высокой плотностью пикселей, изображения на страницу ставят большого размера, а потом их уменьшают. В итоге простыми методами получить размер становится тяжеловато.

Вот способ узнать необходимые параметры с помошью неизменяемых свойств naturalWidth и naturalHeight.

var src="http://path.to/image.jpg",
    img = new Image();

img.src = src;

img.onload = function() {
    console.log('Ширина изображения: %s пикселей', this.naturalWidth);
    console.log('Высота изображения: %s пикселей', this.naturalHeight);
}
Читать 24 сек | 07.10.2014 00:13

 

Где воровали свои идеи дизайнера советского автопрома

Мысли о том, что в СССР умели делать красивые машины пропадают вместе с пониманием, кто и когда придумал этот дизайн на самом деле.

Продолжение

Читать 9 сек | 29.09.2014 11:56

 

День открытых дверей на БелАЗе

Почему-то пропустил и не съездил на день открытых дверей на производственных мощностях завода БелАЗ. Очень жаль. Зато вот снимки имеются:

Продолжение

Читать 1 мин | 28.09.2014 15:09

 

Linkin Park – In the End в 20 различных стилях

Если кто-то вдруг не видел: некто Энтони Винсент перепел песню Linkin Park – In the End с использованием 20 различных стилей музыки. Просто великолепно.

Читать 8 сек | 28.09.2014 12:55