Статья повествует о дополнении программы Skype, которое распознает на сайте телефоны и может осуществлять звонки с ресурса. При использовании этого дополнения может пострадать верстка, поэтому приводятся несколько способов, как это избежать.

Как уже упоминалось в предыдущих статьях, приложение Skype создало специальное дополнение, которое может распознавать номера телефона среди всего контента, а также имеет возможность осуществлять звонки по Skype, не покидая текущей веб-страницы. более подробней о возможностях данного приложения можно узнать на официальном ресурсе компании. Стоит отметить, что приложение уже свободно работает в браузерах Interner Explorer и FireFox. Качать приложения советую только с официального сайта программы Skype, это позволит избежать угрозы заражения вашего компьютера вредоносными программами.

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

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

Исходя из того, что пользователь принял решение самостоятельно установить данное дополнение, значит, он проявляет желание пользоваться данным сервисом и изменение внешнего вида ресурса его вполне устраивает. В этом смысле стоит беспокоится о том, чтобы код плагина кардинально не испортил расположение элементов на странице. Также это означает, что прежде, чем вносит какие либо изменения в работу плагина, нужно все взвесить и хорошенько пораскинуть мозгами, - «А нужно ли что-то менять?».

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

Невидимый контент

Принцип этого решения заключается в том, что мы нарушаем общепринятый международный стандарт, вставляя какой-либо лишний знак (тире, к примеру). Однако, чтобы не портился внешний вид номера телефона — скрываем тире, определяя для его блока свойство display со значением none.

HTML

<p>+3(8063)<span style="display:none">no plagin for skype</span> 777-77-77</p>

Хотя, более оптимальный вариант будет выглядеть так:

HTML

<p>+3(8067)<span style="display:none">&minus;</span> 777-77-77</p>

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

Если у вас установлен данный плагин, то вы можете проверить наше решение, оно действительно отрабатывает, как нам нужно. Для сравнения, укажем два номера в исходном формате и по нашему способу и посмотрим, как браузер будет на них реагировать:

HTML

        <p>+3(8067) 777-77-77</p>
	<p>+3(8067)<span style="display:none">&minus;</span> 777-77-77</p>

Использование данного решения имеет ряд преимуществ, в сравнении с прочими:

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

В тоже время имеют место несколько незначительных недостатков:

• наличие вспомогательного контейнера ухудшает показатели быстродействия ресурса и поисковой оптимизации;
• незначительно ухудшается показатель семантики кода.

Применение нестандартного тега

К этому же решению можно отнести применение нестандартных тегов. С одной стороны это может быть

HTML

<p>+3(8067) <noskype></noskype>760-45-46</p>

А с другой

HTML

<p>+3(8067) <noscript></ noscript >760-45-46</p>

Такой подход более выгоден в том плане, что при копировании будет отсутствовать лишний символ, а также будет сохранена семантика и валидность кода.

Замена картинкой

Чтобы замаскировать номер телефона. Можно воспользоваться таким приемом замены контента на картинку. Плагин не может считывать с картинок информацию, следовательно срабатывать не будет. Стоит отметить, что такой прием имеет смысл использовать, если номеров на сайте не много, в противном случае процесс будет усложнен и повысится нагрузка на сервер за счет наличия картинок.

Стоит отметить, что в сравнении с другими методами, замена картинкой не имеет никаких плюсов, а вот минусов хватает:

• низкий показатель гибкости верстки при внесении поправок в номер;
• повышается нагрузка на сервер за счет появления дополнительного количества картинок;
• информацию нельзя копировать.

Использование мета тега SKYPE_TOOLBAR

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

HTML

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Использование этого тега покрыто множеством спорных и не понятных вопросов, хотя функциональность у него положительная. Единственное, до чего я смог докопаться — не отсутствие валидации strict 1.0, хотя некоторые умельцы утверждают, что это можно исправить.

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

Как говорится, на каждое действие существует противодействие, поэтому можно просто нейтрализовать специальный код, который вставляет плагин. Для этого вставляем себе этот код

HTML

span.skype_pnh_print_container{display:inline !important;}
span.skype_pnh_container{display:none !important;}

Эти стили возвращают исходное форматирование телефонов.

Какие плюсы можно извлечь из этого способа?

• номер телефона не загрязняется вспомогательными знаками и картинками;
• сохраняет валидацию кода.

Ну а что же плохого в нем?

• при обновлении плагина могут поменяется основные стили спец. кода, что приведет к дестабилизации кода.