Страница 31 | Блог Евгения Жирнова

Добавляем кнопки «Мне нравится» от Facebook, ВКонтакте, Twitter

17 октября 2014 83 #facebook,#google+,#javascript,#php,#seo,#twitter,#wordpress,#вконтакте

Сегодня я расскажу, как добавить кнопки социальных сетей в свой WordPress блог так, чтобы они не тормозили загрузку и отрисовку страницы. Заранее хочу предупредить, что не являюсь специалистом ни в HTML, ни в JavaScript, ни в Php. Все решения собраны по крупицам на просторах интернета.

Чтобы оказывать меньше влияния на скорость загрузки блога, все скрипты социальных сетей и служебные HTML-элементы вынесены в конец страницы сразу после вызова wp_footer().

Для того, чтобы скрипты не влияли на отображение страницы, вся работа с ними происходит только после полной загрузки блога, для этого используется библиотека jQuery, которая присутствует в каждой поставке WordPress, и событие document.onload.

Таким образом, все скрипты живут в footer.php после вызова wp_footer() в таком обрамлении:

<script type="text/javascript">
jQuery(window).load(function() {
  /*
   * Сюда мы будем добавлять скрипты социальных сетей
   */
}
</script>

Все социальные кнопки у меня используются только в постах, поэтому их HTML-элементы добавлены в single.php сразу после вызова функции the_content().

ВКонтакте

Идем на страницу виджета, где выбираем внешний вид кнопки. У меня получился вот такой код:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
 
<script type="text/javascript">
  VK.init({apiId: 3904727, onlyWidgets: true});
</script>
 
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like_example"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like_example", {type: "button", height: 20});
</script>

Забираем отсюда div, который выглядит так:

<div id="vk_like_example"></div>

И добавляем в single.php.

Для корректной работы кнопки «Мне нравится», необходимо добавить div элемент в footer.php (перед вызовом jQuery(document).load):

<div id="vk_api_transport"></div>

Код загрузки кнопки в footer.php:

 jQuery.getScript(
      '//vk.com/js/api/openapi.js?115',
      function() {
        VK.init({apiId: 3904727, onlyWidgets: true});
        VK.Widgets.Like("vk_like_example", {type: "button", height: 20});
    });

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

Facebook

Получаем код виджета тут:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=545514278883012&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

И вот такой div:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Добавляем div в single.php:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Затем специальный div в footer.php (перед вызовом jQuery(document).load) для правильной работы кнопки от Facebook:

<div id="fb-root"></div>

После этого смотрим свой appId и добавляем следующий код в footer.php:

    jQuery.ajaxSetup({ cache: true });
 
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '545514278883012',
        status     : true,
        cookie     : true,
        oauth      : true,
        xfbml      : true,
      });      
    };
 
    jQuery.getScript('//connect.facebook.net/ru_RU/all.js');

С этим кодом я промучился больше всего.

Twitter

За кнопкой идем сюда:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Забираем отсюда к себе в single.php:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

И в footer.php:

jQuery.getScript('//platform.twitter.com/widgets.js');

Самый элементарный код. Один минус — если сайт твиттера недоступен, отображает уродскую ссылку.

Заключение

Все вышеописанные кнопки в single.php:

<div id="like_buttons">
  <div id="vk_like_example"></div>
  <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
  <div id="tweet">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
  </div>
</div>

Загрузка всех плагинов в footer.php:

<?php if(is_single()) { ?>
<div id="fb-root"></div>
<div id="vk_api_transport"></div>
<script type="text/javascript">
jQuery(window).load(function() {
    jQuery.ajaxSetup({ cache: true });
 
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '545514278883012',
        status     : true,
        cookie     : true,
        oauth      : true,
        xfbml      : true,
      });      
    };
 
    jQuery.getScript('//connect.facebook.net/ru_RU/all.js');
    jQuery.getScript('//platform.twitter.com/widgets.js');
 
    jQuery.getScript(
      '//vk.com/js/api/openapi.js',
      function() {
        VK.init({apiId: 3904727, onlyWidgets: true});
        VK.Widgets.Like("vk_like_example", {type: "button", verb: 1, height: 20, width: 165});
    });
 
    window.___gcfg = {lang: 'ru'};
});
</script><?php } ?>

Весь код, приведенный выше добавляет кнопки только в блого-записи. Возможно, вам понадобятся кнопки на всех страницах, для этого нужно исключить проверку is_single() и добавлять HTML-элементы социальных кнопок не только лишь в single.php.

И еще один момент: если вы скопируете код отсюда один в один (без замены appId в Facebook и ВКонтакте), то все лайки будут сыпаться в мою копилку. Мне-то не жалко, но вам от этого никакого толку. (:

P.S. Если вам пригодилась информация из данного поста — пожалуйста, нажмите одну из социальных кнопок ниже.

UPD: Пришел к выводу, что загрузка кода с сайтов социальных сетей неоптимальна. На эту тему мой новый пост: «Добавляем Social Likes на сайт с WordPress».

Краткий отчет об отпуске на Кипре с компанией Библио-Глобус

12 октября 2014 21 #кипр,#отпуск,#фото

В связи с последними мировыми событиями собрались было в Крым, но смутили конские цены на перелет Санкт-Петерубрг — Симферополь. Поэтому, недолго думая, махнули на Кипр. Крым-то наш, а вот Кипр могут и прикрыть.

Выход здесь!

Тур покупали в фирме «Атлас», которая закрылась через неделю после нашего возвращения. Поэтому рекомендовать её не буду. (:

Первое, чем нас встретил гостеприимный Кипр — это огромная очередь. Мы летели на двухэтажном самолёте «Боинг» компании «Трансаэро», он вмещает в себя большое количество пассажиров, поэтому очередей к паспортному контролю было штуки четыре.

С моим отменным чутьем на очереди мы заняли самую длинную и каким-то образом в самом конце, хотя из самолёта выбежали далеко не последними.

Пройдя паспортный контроль, забрали чемодан и вышли на свежий воздух к стоянке, куда нас направил представитель туроператора. Второе, что поразило — это монополия компании «Библио-Глобус». Их автобусов было штук двадцать.

Как оказалось позже, они здесь ходят чаще общественного транспорта. Между прочим, туристы из России вырвались на первое место по количеству отдыхающих, что не удивительно, учитывая размах туроператора.

Усевшись в автобусе покатили из города Лимассол в Протарас. Местность за окном такая же, как на островах Мальта и Кос, только земля красного цвета, как на Марсе. Берег в основном скалистый и обрывистый.

Как-то, гуляя по окрестностям отеля, хотели выйди к морю, но не удалось. Вроде бы вот оно — через пятьдесят шагов откроется уютный пляж, ан нет — четырехметровый обрыв. Зато поздним вечером увидели маленькую змейку на тропинке.

Пещера Циклопа

Раз уж я забежал вперёд, пару слов об отеле, где мы расположились под названием «Paramount Hotel Apartments».

Четырёх звёзд там нет, бассейна два, а не один, как кажется на фото, и они мелкие, в самом глубоком месте 1.4 метра. Еда нормальная, хотя я и непривередлив — ем всё, если это не рисовая каша, кабачки или холодец, или рыба с костями.

Отель Paramount Holte Apartmens

На ресепшене работают две русскоговорящие женщины посменно. Так вот они ни разу не здоровались первыми, про дежурную улыбку тоже забудьте. Я хоть и не фанат западного лицемерия, но уж как-то к этому привык в Европе, когда персонал «как бы рад» тебя видеть.

Ванну принять побоялся, предварительно её лучше тщательно вымыть, а вот душ вполне себе ничего, вода льется хорошо и тёплая есть. В номере есть тостер, холодильник без морозилки и электрическая плита с двумя конфорками. В шкафу есть сейф. Не хватало чайника, но мы под это дело приспособили кастрюлю. Мы ведь можем и лезвием бритвенным с деревяшкой и проводами воду вскипятить, поэтому дискомфорта не испытывали.

Платный интернет доступен только на ресепшене по WiFi по грабительским ценам (30 евро за семь дней) и принимает далеко не во всех номерах. Ну ещё русских полно, но я это недостатком не считаю, пусть соотечественников стыдятся те, кого в детстве головой о твердое приложили.

Не понравилось заселение — сказано в два часа дня, значит заселяют в два часа дня, пусть даже номер помыт уже четыре раза и от старых жильцов ни следа, ни запаха не осталось. А так отель как отель, у нас таких в Петербурге полно ещё с советских времен, только без бассейна.

На следующий день нас собрали в столовой под руководством гида, из слов которой я только запомнил, что машину на прокат брать нельзя (паспорт заложишь и больше не отдадут), у других туры заказывать нельзя, потому что мы за вас там не отвечаем и что большой и красивый пляж буквально рядом, за во-о-он тем поворотом, который будет метров через пятьсот (поворот, а не пляж).

Голубая лагуна

Не спеша мы подумали и я решил взять «Гранд-тур» и покатушки на судне с целью обозреть подходы к пляжам.

На судне понравилось, ведь это была моя первая прогулка по морю, где я не сгорел, ну только самую малость, а не полностью, как обычно. Три остановки в бухтах с голубой водой и обед по типу «шведский стол». Плюс крыша над головой и бар в шаговой доступности.

Судно, что интересно, тоже принадлежит компании Библио-Глобус. Правда, обычно в морских прогулках мы начинали и заканчивали в одном месте, а тут из города Протарас в Лимассол по морю, обратно автобусом.

Церковь на острове Кипр

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

Симпатичный домик в деревне (остров Кипр)

Гранд-тур представляет собой поездку на автобусе по большей части острова. Надо сказать, что остров довольно большой, хотя на глобусе можно мизинцем закрыть. Всего проехали 340 километров. В основном поездка проходит по центральной части острова, в горах. Максимальная высота километр с копейками. В горах климат помягче, хоть и жарко, но дышать можно свободно. Во время поездки посетили мужской монастырь и пару деревушек.

Привет из Питера!

Поездка на Кипр была в середине августа.

Гамовер и Бонус снова в деле. От винта!

30 сентября 2014 6 #игры,#нравится

https://www.youtube.com/watch?v=VTxYVfiCk_A

Хочется верить, что это не простой ролик, а передача «От винта» снова будет в эфире!

Практическое применение B-сплайна (B-Spline) в программировании

4 сентября 2014 2K #python,#линейная интерполяция,#математика

Полтора дня разбирался в работе B-сплайна и как это применяется на практике. Хочу поделиться с вами результатами моих изысканий.

Немного теории

Допустим, у вас есть некий массив точек размером $n$ . Что вам потребуется для работы B-сплайна:

определить количество интерполируемых точек (от этого зависит скорость работы, гладкость получившейся кривой и размер формулы для вычисления, количество точек равно $k+1$ )
избавится от рекурсии формулы для вычисления

Общая формула для расчета коэффициентов:

$\begin{equation*}N_{i,k}(x)=\frac{x-t_i}{t_{i+k-1}-t_i}N_{i,k-1}(x)+\frac{t_{i+k}-x}{t_{i+k}-t_{i+1}}N_{i+1,k-1}(x)\end{equation*}$

Формула рекурсивная и заканчивается на $k$ равном единице:

$\begin{equation*} N_{i,1}(x)=\left\{\begin{array}{cr}1&\text{if }t_i\leq x\textless t_{i+1}\\0&\mathrm{otherwise}\quad\end{array}\right.\end{equation*}$

Пояснения к формуле:

если делитель получается равным или близким по значению к нулю, значит вся дробь равна нулю
параметр $i$ — это индекс текущей точки
$x$ — значение от $i$ до $i + 1$ с нужным вам шагом (например, $i$ равно 7, и нам нужно создать 3 точки для интерполяции, значит берем $x$ равным 7.0, 7.5, 8.0)
$t$ — неубывающий массив индексов

Вычисление элементов массива $t$ :

$\begin{equation*} t=\left\{\begin{array}{ll}0,&\mathrm{if}\ i<k\\i-k+1,&\mathrm{if}\ k\leq{i}\leq{n}\\n-k+2,&\mathrm{if}\ i>n\end{array}\right. \end{equation*}$

Практика

Мне нужно было интерполировать по четырем точкам, поэтому я заранее на бумажке вычислил формулу без рекурсии:

$\begin{equation*} N_{i,3}(x)=\left\{\begin{array}{ll}0,&\mathrm{if}\ x\textless t_{i}\\\frac{x-t_i}{t_{i+2}-t_i}*\frac{x-ti}{t_{i+1}-ti},&\mathrm{if}\ t_i\leq x\textless t_{i+1}\\\frac{x-ti}{t_{i+2}-ti}*\frac{t_{i+2}-x}{t_{i+2}-t_{i+1}}+\frac{t_{i+3}-x}{t_{i+3}-t_{i+1}}*\frac{x-ti}{t_{i+2}-t_{i+1}},&\mathrm{if}\ t_{i+1}\leq x\textless t_{i+2}\\\frac{t_{i+3}-x}{t_{i+3}-t_{i+1}}*\frac{t_{i+3}-x}{t_{i+3}-t_{i+2}},&\mathrm{if}\ t_{i+2}\leq x\textless t_{i+3}\\0,&\mathrm{if}\ x\geq t_{i+3}\end{array}\right. \end{equation*}$

Про бумажку я, конечно, соврал, мне было удобнее сделать функцию на питоне вот такого вида:

def div(a, b):
    try:
        return a / float(b)
    except ZeroDivisionError:
        return 0
 
def N(i, k, x, t):
    if 1 == k:
        if t[i] <= x < t[i + 1]:
            return 1.0
        return 0.0
    a = div(x - t[i], t[i + k - 1] - t[i]) * N(i, k - 1, x, t)
    b = div(t[i + k] - x, x[i + k] - x[i + 1]) * N(i + 1, k - 1, x, t)
    return a + b

После этого добавил условие $k==2$ и все возможные возвращаемые значения в зависимости от $x$ , затем условие $k==3$ , значения которого зависят от $k==2$ . Может вам будет удобнее все это сделать на бумажке.

Наконец можно приступать к интерполяции. Формула такая:

$\begin{equation*} \sum\limits_{i}^{i+k}=\vec{p_{i}}N_{i,k}(x) \end{equation*}$

Если индекс точки меньше нуля, берем нулевую точку, если индекс точки больше размера массива, то берем последнюю точку в массиве.

Небольшой пример

У нас есть некий массив точек, нам надо интерполировать с пятой по шестую точки с шагом 0.25, при этом $k$ равно 3 (значит для интерполяции нужно взять четыре точки).

$\begin{equation*} p_0=p_5*N_{0,3}(0.0)+p_6*N_{1,3}(0.0)+p_7*N_{2,3}(0.0)+p_8*N_{3,3}(0.0) \end{equation*}$

$\begin{equation*} p_1=p_5*N_{0,3}(0.25)+p_6*N_{1,3}(0.25)+p_7*N_{2,3}(0.25)+p_8*N_{3,3}(0.25) \end{equation*}$

$\begin{equation*} p_2=p_5*N_{0,3}(0.5)+p_6*N_{1,3}(0.5)+p_7*N_{2,3}(0.5)+p_8*N_{3,3}(0.5) \end{equation*}$

$\begin{equation*} p_3=p_5*N_{0,3}(1.0)+p_6*N_{1,3}(1.0)+p_7*N_{2,3}(1.0)+p_8*N_{3,3}(1.0) \end{equation*}$

Итого четыре новых точки вместо двух.

Спасибо за внимание, надеюсь нигде не ошибся. На несложные вопросы по теме могу ответить в комментариях.

Как в России и США помогают незнакомым людям на улице

31 августа 2014 2 #жж

Намедни в интернете выложили ролик — как в России и США помогают людям, которым вдруг стало плохо на улице.

Видео, что очевидно любому креаклу, как бы показывало нам, простым ватникам, что в России никто к тебе на улице не подойдет, а в США тебя тут же окружает толпа добропорядочных граждан с вопросом «Чем могу вам помочь?».

Оказалось, что ролик про Россию — это монтаж. Подробности разоблачения можно прочитать в записи «Разоблачаем ! В России никто не поможет ?» юзера ЖЖ masterok.

Если вкратце, то авторы ролика про Россию просто вырезали моменты, когда граждане пытаются помочь. Ну что на это можно сказать…