Яндекс коллекции и пинтерест

Для создания естественных ссылок на сайт полезно разместить «добавлялки» этих сервисов у потенуиально добавляемых картинок сайта.

В Яндекс коллекции не нашла другого способа добавить кроме использования их набора кнопок «поделиться«. Как-то так:

<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="https://yastatic.net/share2/share.js"></script>
<span class="ya-share2" data-services="collections"></span>

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

<script async defer data-pin-hover="false" data-pin-tall="true"  src="//assets.pinterest.com/js/pinit.js"></script>

Установим параметр data-pin-hover=»false», если вы не хотите чтобы кнопочка pinit автоматически появлялась на любом изображении.

Ниже — код для кнопки размещенной в единственном числе, в определенном месте. Она идет в паре к предыдущему скрипту.

<a data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" href="https://www.pinterest.com/pin/create/button/"> <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png"/></a>

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

Если же мы хотим чтобы предложение добавить в pinterest появлялось надо всеми картинками, то размещаем в любом месте только страницы скрипт. без сопутствующей кнопочки:

<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>

При этом для того, чтобы некоторые картинки (например — баннеры) не предлагались для размещения в pinterest, используем атрибут у их тегов img data-pin-nopin=»true» .

Глобальные переменные (и проверка на мобильность по пути)

Есть массив $GLOBALS, который виден везде. И с помощью которого можно передавать информацию. На страницу или в темплейт.

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

function IsMobileDevice() { 
if(stristr(@$_SERVER['HTTP_USER_AGENT'],'windows')&&!stristr(@$_SERVER['HTTP_USER_AGENT'],'windows ce')) return false;
if(preg_match('/up.browser|up. link |windows ce|iemobile|mini|mmp|symbian|midp|wap|phone|pocket|mobile|pda|psp/i',    @$_SERVER['HTTP_USER_AGENT'])) return true;
if(isset($_SERVER['HTTP_ACCEPT'])&&(stristr($_SERVER['HTTP_ACCEPT'],'text/vnd.wap.wml')||    stristr($_SERVER['HTTP_ACCEPT'],'application/vnd.wap.xhtml xml'))) return true;
if(isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE'])||    isset($_SERVER['X-OperaMini-Features'])||isset($_SERVER['UA-pixels'])) return true;
$a = array ('acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac',
    'bla z','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java', 'jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mi ts','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','opwv','palm','pana' ,'pant','pdxg','phil','play','pluc',
    'port','prox','qtek','qwap','sage','sams','s any','sch-','sec-','send',
    'seri','sgh-','shar','sie-','siem','smal','smar','sony ','sph-','symb',
    't-mo','teli','tim-','tosh','tsm-','upg1','upsi','vk-v','voda',' w3c ',
    'wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-');
if(isset($a[ substr (@$_SERVER['HTTP_USER_AGENT'],0,4)])) return true;
}

$GLOBALS['mob']=IsMobileDevice(); 

и далее — в любом месте сайта (на странице или в темплейте) мы можем использовать:

if ($GLOBALS['mob']) ....

Быстродействие. Youtube

Ролик с ютуба, размещенный на странице, заметно замедляет ее открытие. Там одних скриптов 400к. Вдобавок, они еще и размещены не на вашем сервере…
Идея — размещать на странице не сам iframe, а картинку, по клику на которую ролик откроется.

Код js (он вынесен в отдельный файл) :

// ленивая загрузка видео на главной
'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
 
    var nb_videos = videos.length;
    for (var i=0; i<nb_videos; i++) {
        // Находим постер для видео, зная ID нашего видео
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
 
        // Размещаем над постером кнопку Play, чтобы создать эффект плеера
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);
 
        videos[i].onclick = function() {
            // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&loop=1&&playlist=" + this.id;
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
 
            // Высота и ширина iFrame будет как у элемента-родителя
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
 
            // Заменяем начальное изображение (постер) на iFrame
            this.parentNode.replaceChild(iframe, this);
        }
    }
});

Код взяла в сети. Но немного изменила — отредактировала параметры вызова ролика. Теперь при подгрузке он начинает работать сразу.
Вызов скрипта разместим внизу страницы. Подгружаться он будет в div с id, равным коду нашего ролика и с классом youtube.

 <div class="youtube div-g" id="_Rs_Jou_GEY" style="width: 500px; height: 281px;"></div>

Быстродействие. Ускорение от Timeweb

Часто размещаем сайты на timeweb. У них достаточно удобный и эффективный ускоритель сайтов. +10-15 пунктов в измерении скорости Googlом дает.

Конечно, ускоритель надо настраивать (если просто включить, сайт может работать не корректно).

Я использую как базовый такой набор опций:

Быстродействие. Вызов сторонних скриптов

Скорость загрузки сайта можно увеличивать сжимая картинки, оптимизируя код.
Но есть вещи, скорость загрузки которых мы не можем изменить — вызов счетчиков, сторонних скриптов. Например — живо сайт, популярный онлайн консультант, грузится просто столетие.
Скорость загрузки изменить не можем, но можем отложить слегка загрузку стороннего контента, отложив ее на несколько секунд после открытия. 
Settimeout в помощь.  Как-то так:

<script>
function call_jivosite() {
.....
}
setTimeout(call_jivosite, 10000);
</script>

Быстродействие. Карты Яндекса

Заказчик попросил внизу, в футере, разместить схемы проезда до его магазинов. Магазина два, в разных концах города, в футере, соответственно, размещены две схемы. на всех страницах сайта.
Два фрейма, которые подгружают карты яндекса и скрипты.

Заменяем схемы картинками, ссылки с которых ведут на карты, созданные через Яндекс API. Плюс 10 к скорости.

Яндекс-метрика. Фиксируем клик на телефон

Яндекс-метрика дает возможность фиксировать достаточно интересные события. Например — клик по какой-либо кнопке, ссылке на сайте.
Как это реализовать?

1. В метрике создаем цель (настройка-цели-добавить)
Тип выбираем javascript, идентификатор — произвольный (например — TELEPHONE)

2. На сайте создаем ссылку на номер телефона, примерно так:

Позвоните нам по телефону:
<a href="tel:(XXX)XXX-XX-XX" 
onclick="yaCounterYYYYYYY.reachGoal('TELEPHONE')">
(XXX)XXX-XX-XX</a>

Где (XXX)XXX-XX-XX — наш номер телефона, YYYYYYY — номер счетчика метрики Яндекса, TELEPHONE — идентификатор цели.

3. Часто пользователь не звонит напрямую, а, допустим, копирует номер телефона куда-либо для звонка позже.
Конечно, отследить движение ручки по блокноту проблематично, но зависание мышки над телефоном, выделение его, копирование — возможно. Событие это будет не конкретное, скорее — проявление интереса. Но давайте и его зафиксируем.
Для этого создадим вторую цель (на рисунке она названа «Звонок с сайта (onmouseover)» и имеет идентификатор TELEPHONE1).
Откорректируем немного наш код на сайте. Теперь он выглядит так:

Позвоните нам по телефону: 
<a href="tel:(XXX)XXX-XX-XX" 
onclick="yaCounterYYYYYYY.reachGoal('TELEPHONE') 
onmouseover="yaCounterYYYYYYY.reachGoal('TELEPHONE1')">
(XXX)XXX-XX-XX</a>

Готово. Наслаждаемся статистикой : )

Битрикс. Переход на php7

Часть 1. Стандартные правки для перехода Битрикса

Битрикс совместим с php7 (конечно, совместимость плагинов не гарантируется, но большинство из них — работают в семерке).

Самое мощное отличие при переходе на php7 — использование расширения mysqli вместо mysql.   Для того, чтобы использовать mysqli, необходимо отредактировать два конфигурационных файла.

В файле /bitrix/php_interface/dbconn.php нужно добавить, если нет, в конец строчку

define("BX_USE_MYSQLI", true);

В файле /bitrix/.settings.php надо настроить connections:

  'connections' => 
  array (
    'value' => 
    array (
      'default' => 
      array (
        'className' => '\\Bitrix\\Main\\DB\\MysqliConnection',
        'host' => 'localhost',
        'database' => '...',
        'login' => '...',
        'password' => '...',
      ),
    ),
  ),

У меня на сайте есть работа напрямую с базой, не через функции Битрикса.  Так уж исторически сложилось, а править сотни строк кода — нет возможности-времени.  Поэтому мне приходилось переключаться между php 5 и 7 несколько раз, чтобы проверить работу того или иного модуля.
Чтобы не править конфигурационные файлы каждый раз при переключении, я внесла в них проверку на версию php:

$ver=phpversion(); if($ver[0]<7) ... else ....

Часть 2. Правка обращений напрямую  к базе

  1. Включаем режим отладки, чтобы видеть ошибки. В файле /bitrix/.settings.php ставим переменную debug в true.
  2. Пишем функцию подключения к базе в отдельный файл, чтобы при смене логина-пароля необходимо было править в одном месте.
      $mysqli= new mysqli('localhost', '...', '...', '...'); 
  3. В темплейтах, где использовалось подключение к базе не через функции Битрикса:
    1. Вызываем функцию подключения к базе.
    2. Меняем конструкции вида
      $rows = mysql_query($qu);
      while($row = mysql_fetch_array($rows))

      на

      $result = $mysqli->query($qu);
      while($row = $result->fetch_array(MYSQLI_BOTH)).
      

      Я меняла не абсолютно, а используя перед вызовом функций проверку на версию php. Если версия стара — то вызов старой функции, если нова — то новой.

    3. Помним, что новшества работой с базой не ограничиваются. Возможно, вы используете устаревшие функции, которые также будут выдавать ошибку. Например — split отменен, за него теперь explode (структура вызова функции — та же). Ereg и его производные больше не используются, заменены на близкие preg. Тут, конечно, включенный режим отладки здорово помогает.

Медленные ссылки на странице

Иногда нужны ссылки внутри страницы.
Например — при списке часто задаваемых вопросов, или, когда в начале товара выводится описание только нескольких характеристик, а основной массив характеристик — ниже.
Красиво когда переход по ссылке внутри страницы идет плавно.
Вот скриптик, который «округляет» переходы по якорям, начинающимся с des

$(function(){
$('a[href^="#des"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 1200);//1200 - длительность скроллинга в мс
return false;
});
});

Поиск недавно измененных файлов

При подозрении на вирус полезно посмотреть недавно измененные файлы.
Но файлов в современных админках десятки тысяч, а папок — тысячи.

Ниже — коротенький скрипт для поиска свежих файлов.
Его же можно использовать для поиска файлов по названию.
Его же можно использовать для поиска файлов по размеру (это может быть полезно при ограниченном месте на диске).


<?
if(!isset($_GET['d'])) die("Скрипт находит все файлы, измененные после некоторой даты.<br/>
Для работы поместите скрипт в любую папку.<br> вызов скрипта: list.php?d=dd&m=mm&y=yyyy&h=hh<br>
где d:m:y:h - день, месяц, год и час после которого произошли изменения");
$d = $_GET['d'];
$m = $_GET['m'];
$y = $_GET['y'];
$h= $_GET['h'];


function listdir($path)
{ GLOBAL $t2;
$dh=@opendir($path);
if($dh)
{
while (false !== ($file=readdir($dh)))
{
// исключили папку cache
if(is_dir("$path/$file") and !strpos(' '.$file, 'cache') )
{
if (($file=='.') or ($file=='..')) continue;
listdir("$path/$file");
}
else
{
$t= filemtime("$path/$file");
if(($t > $t2 )) echo "<span style='color:red'><b>$path/$file</b> ". date("d-M-y H:i:s",$t)." </span><br/>";
// ищем конкретный файл
if(strpos("$path/$file", 'MailInvoker.php')) echo "<p style='color:green; font-size:16px; ont-weight:bold'>$path/$file". date("d-M-y H:i:s",$t)." </p>";
}
}
closedir($dh);
}
else echo "open error $path<br>";
return TRUE;
}


$t2=mktime ($h,0,0, $m ,$d, $y);
listdir('../');
echo 'готово';
?>