Делаем кнопки социальных сетей самостоятельно. Кнопка Класс! Кнопка постинга в Одноклассники для Blogger Blogspot. Преимущества ручного размещения

Переменные, массивы и объекты - привычная и удобная форма представления данных. Описывать данные принято в языке браузера JavaScript, что делать не обязательно в языке сервера PHP. Формат JSON позволяет обобщить их в одно целое и не делать акцент на языке программирования. При этом данные превращаются в пары: "имя = значение". Значение в каждой из них также может быть совокупностью таких пар.

Принято JSON ассоциировать с фигурными скобками и Последнее вполне обосновано, так как формат JSON = Object Notation JavaScript. В последние особенно динамичные годы многое изменилось. Что создавалось ради конкретной цели, часто приносило неожиданные плоды или открывало новые горизонты.

Технология AJAX стала традиционной, обычное обновление страницы целиком перестало пользоваться популярностью. Посетитель, открывая сайт, инициирует серию частичных обменов данными, когда те или иные страницы меняются только в том месте, которое актуально.

Считается, что появление JSON связано с использованием именно AJAX, но на самом деле ассоциативные и его объектная нотация (особенности синтаксиса описания и использования объектов) имеют гораздо более родственное отношение к JSON, чем обмен данными между браузером и сервером.

Так как контент страниц современных сайтов действительно стал «массивным» (объемным), то и эффективность формата для обмена данными приобрела особое значение. Нельзя сказать, что JSON стал новым представлением данных, но то что он давно был элементом синтаксиса JavaScript, имеет существенное значение.

Использование кириллицы в именовании переменных - очень неожиданное явление (нонсенс), но это работает в последних версиях Chrome, Firefox и, даже, в Internet Explorer 11.

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

Сомнительно, что инициативу в кириллических именах поддержит внешнее окружение браузера, с которым ему постоянно приходится иметь дело. Но этот факт заслуживает внимания по той простой причине, что JSON формат - это возможность писать имена и значения так, как угодно разработчику. Это принципиально, поскольку в каждой задаче описание области применения так, как она этого требует, существенно упрощает отладку и уменьшает количество ошибок.

Не важно, какое именно имело под собой основание синтаксическое новшество - JSON, важно, что оно дало законное право и реальную возможность поставить соответствие: "любое имя = любое значение".

Надо отдать должное языку JavaScript: то, что предусмотрено синтаксисом, не обязывает разработчика и ничего ему не навязывает. Разработчик свободно использует синтаксис языка для оптимального формирования модели данных и алгоритма их использования.

Принимая данные в формате JSON, сервер (посредством PHP, в частности) предоставляет возможность их обрабатывать как есть и возвращать обратно в браузер результат в аналогичном формате. Исходный массив PHP:

• $cJSON = array ("a"=> "alfa", "b"=> "beta", "g"=> "gamma").

Преобразование в формат JSON для передачи в браузер:

• $cJS = json_encode($cJSON ).

Результат:

• {"a":"alfa","b":"beta","g":"gamma"}.

Допускается изображенная на фото вложенность.

Здесь сформированный массив был добавлен новым элементом «сам в себя» с автоматическим индексом "0", а затем еще раз с указанным индексом "z".

Json_decode() выполняет преобразование строки JSON в массив PHP. Аналогичных результатов можно добиться, манипулируя функциями и explode(). В некоторых случаях этот вариант предпочтительнее.

Элементы могут быть вложены друг в друга как на стороне браузера, так и на стороне сервера. На практике формат JSON (описание стандарта RFC 4627) предоставляет значительно более 4 уровней вложенности, но не следует злоупотреблять этой возможностью.

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

JSON принято относить к конструкциям данных, которые проще XML, понятны одновременно и людям, и компьютерам. Это действительно так, когда объем данных мал, а уровень вложенности разработчик выбрал грамотно. Во всех остальных случаях считать количество скобок и понимать сложно как на стороне браузера, так и на стороне сервера.

Применение JSON на практике часто не ограничивается доступной восприятию короткой строкой. Любые конструкции данных всегда носят прагматичный характер. При этом JSON может эффективно применяться как в реальных данных задачи (штат предприятия), так и для реализации временных данных (кэш объекта).

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

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

JSON - это обычный текстовый файл. Случай со штатным расписанием, куда ни шло. Прочитать его всегда можно. Открыть и изменить также доступно в любом текстовом редакторе, который не имеет привычки добавлять свою служебную информацию в содержание файла. Вообще, *.json - это чистый текст как внутри браузера, так и внутри файла - строка.

На фото представлен кэш объекта, формирующего картинку, пример.

Это пример содержания файла, сформированного сайтом, предоставляющим услугу цветной объемной печати на кружках и керамических изделиях. Естественно, решить, имея такой JSON-формат, чем открыть его, действительно проблематично. Однако в этом и подобных случаях проблем с чтением файла не возникает: PHP читает файл, разбирает его и передает в браузер. Изменённые посетителем данные возвращаются на сервер и записываются обратно.

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

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

"Всему свое время" - классическое знание, принятое за аксиому еще до появления программирования. "Ни что не появляется просто так", - это тоже было до того, как человек написал первую вразумительную программу на искусственном языке.

Форматы данных появляются от реальной потребности и основываются на достигнутых знаниях. У HTML - своя стезя, у XML - своя дорога, а JSON - это объектная логика JavaScript, расширенная на другие языки. Сравнивать одно с другим не лучшее занятие. Каждому свое.

XML чудесно справляется со своими задачами и уходить в историю явно не собирается. А JSON использовался и до 2006 года, просто не каждый разработчик считал своим долгом декларировать те или иные варианты представления своих данных.

Имелись случаи в практике, когда на бэйсике были написаны программы, не использующие JSON как таковой, но прекрасно хранящие пары "имя = значение" и предоставляющие их в распоряжение нужным алгоритмам в нужное время.

Привычка работать с ассоциативными массивами и объектами на JavaScript делает использование JSON естественным и удобным. Это действительно отличный формат, но умение разделять и соединять, манипулируя строками и массивами, имеет куда более глубинные корни.

Функции join/split языка JavaScript и implode/explode языка PHP позволяют удобно и эффективно использовать как форматы данных XML, JSON, так и собственный вариант. Последний часто оптимальнее, а первые два идеально подходят для вариантов общего пользования. Если идет передача информации другому разработчику, серверу, в файл или в базу данных, лучше XML и JSON не найти. С ними все работают, потому передача/прием информации не нуждается в комментариях.

Чтение и запись данных в формате JSON в Android - не только норма вещей, но и множество объектов, ориентированных на работу именно с таким форматом данных.

При этом используется именно формат JSON. Возможно, это так и есть, но вопрос не в феноменальности соцсетей, а в том что действительно представление информации в формате "имя = значение" удобно как для программирования, так и для использования. В отличие от строгого и закомплексованного «XML» это действительно человеко-удобный формат.

Сложилось так, что переменные надлежит описывать (JavaScript) или хотя бы указывать начальное значение (PHP). В обоих случаях переменная может изменить свой тип очень легко. При необходимости язык выполняет это преобразование автоматически.

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

Особенно это обстоятельство ярко выражено на PHP, но с этим можно мириться, как, впрочем, с символом «$» в имени переменной и комбинацией «$this->» внутри объекта. Программируя одновременно на JavaScript и PHP, поначалу действительно диву даешься, как все отличается, но потом все становится таким привычным и естественным...

В этом примере посредством библиотеки PHPOffice/PHPWord создается документ *.docx, и массив aProperties содержит свойства этого документа (автор, компания, заголовок, категория, дата создания...).

Второй массив содержит данные по странице:

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

Формирование документа выполняется на сервере, где установлена библиотека PHPOffice/PHPWord. На сайте предусмотрено управление значениями этих массивов посредством JavaScript. Результат в формате JSON возвращается обратно на сервер и используется в алгоритмах на PHP, в его конструкциях, то есть в массивах.

Формат JSON решает проблему динамичных переменных. Здесь можно создавать, изменять и удалять переменные без лишних синтаксических нагромождений. Это красиво смотрится и используется в JavaScript.

В этом примере функция GetOjInfo () выбирает имя значения и значение из объекта. Изначально объект JSON-строки, присвоенной переменной ojInfo, располагает тремя элементами: Name, age и work. Чуть позже добавляется переменная Status.

После первого оператора delete строка ojInfo теряет элемент age, после второго delete - элемент work. Если предположить, что данная строка есть подборка переменных, имеющих определенный смысл, то посредством JSON можно реально создавать, изменять и удалять любые их наборы вне операционного поля (синтаксиса) описания и обработки языка JavaScript.

Формат JSON на такой вариант не был рассчитан, но такое возможно, практично и удобно.

Дело в том, что из всех предлагаемых партнерам Одноклассников кнопок эта служит наиболее удобным инструментом для посетителей. Благодаря этому инструменту все друзья могут видеть в Ленте интересную ссылку, а владелец ресурса с такой кнопкой приобретает нечто большее.

По сути, кнопка «Класс!» является тем уникальным индикатором, который сигнализирует о степени заинтересованности размещенным на сайте материалом (видео, фото, статьи). Чем большее количество раз на нее кликнули, тем, соответственно, полезнее/забавнее опубликованная информация. Будучи осведомленным о предпочтениях своих посетителей, сделать сайт еще популярнее теперь легче! Кстати, кнопка «Класс!» может быть со счетчиком и без него.

Существуют некоторые особенности установки такого инструмента на ресурсы в случае с Joomla, WordPress, DLE.

На Joomla эту кнопку установить проще простого – всего 5 минут времени, и никакой мороки!

Итак, в менеджере шаблонов на админпанели выбрать Текущий шаблон и Правка HTML , где в самое начало страницы нужно вставить следующий html-код. После этого, на сайте хостинг-провайдера в папке, где установлена Joomla, находим документ public_html-components-com_jcomments-tpl-default с файлом tpl_index.php. Здесь конечный пункт наших «похождений», поэтому добавляем html-код:

Кнопка «Класс!» готова к применению!

Для размещения кнопки «Класс!» со статистикой нужно активировать ссылки на Javascript и CSS файлы в заголовок страницы и вставить в подходящее место на странице HTML код кнопки.

Помните, что код этой кнопки, в отличие от обычной «Класс!», не подлежит модификации, т.к. содержимое внутри будет заменено. Кроме того, имя класса CSS должно быть оригинальным, поскольку оно используется в качестве признака кнопки.

Для появления окошка со статистикой, по окончании загрузки страницы потребуется обязательный вызов окна ODKL.init();

На WordPress интерактивный инструмент «Класс!» устанавливается иначе.

Обычный плагин Social Share Buttons доступен к скачиванию и установке на официальном сайте WordPress (из админ-панели WordPress). Никакой правки кода, все телодвижения сведены к нажатию кнопок, и не более того!

Итак, переходим к админпанели WordPress в Плагины – Добавить новый , где в поисковой строке вводим Social Share Buttons (в списке плагинов он оказался у меня самым первым!). Далее – нажимаем ссылку Установить , а после установки – Активировать плагин. в wp.

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

Теперь активированный плагин нуждается в настройках: меню Параметры и ссылка Share Buttons перенаправит нас в настройки плагина. Первое, на что нужно будет обратить внимание, – какие кнопки выставлены по умолчанию (в плагине доступны 8 вариантов кнопок в разном исполнении!). Следующим шагом будет действие по выбору нужной нам кнопки Одноклассников и установка ее в определенном месте. Я не думаю, что с этим будут проблемы, но если возникнут вопросы – спрашивайте!

Для DLE (DataLife Engine) кнопка «Класс!» устанавливается так:

Кнопка «Класс!» со статистикой :

Включаем в заголовок страницы ссылки на Javascript и CSS файлы в файл main.tpl между тегов и вставляем их. Дальнейшие шаги по отображению кнопки со статистикой предпринимаются в shortstory.tpl или fullstory.tpl путем вставки кода в нужное место:

Простая кнопка «Класс!» генерируется вставкой кода:

Класс!

В завершение всему, находим в файле main.tpl открывающийся тег , который меняем на выражение

Ну вот и все! Желаю вам удачи в установки кнопки.

Это уже далеко не первая статья, которая затрагивает социальные кнопки на сайте. А все почему? Да потому что без них никуда. В этот раз мы будем делать кнопки социальных сетей самостоятельно , т.е. без использования сторонних плагинов и сервисов, типа socialtools.

Чаще всего к такому методу приходят тогда, когда не хотят зависимости от сторонних сервисов. Допустим, что тот же UpToLike или SocialTools лёг, соответственно, кнопки на вашем сайте тоже легли, так как запросы все идут через него. Вот здесь и начинается работа над ускорением блога, загрузки страницы и т.д. В общем, кому этот метод понадобился, рассмотрим вариации.

Переходим на официальный сайт представителя, т.е. сюда

https://about.twitter.com/ru/resources/buttons

и выбираем подходящее для себя оформление и тип кнопки. Вариантов для выбора достаточно, кроме того, здесь же можно взять и кнопку «Читать» . Каждая из них настраивается, после чего выводится готовый код для вставки на сайте. Пример такого варианта можете увидеть на скрине:

Принцип размещения от предыдущей ничем не отличается. Переходим на страницу документации публикации ссылок Вконтакте по ссылке:

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

Здесь уже настройки более интересные. Переходим в документацию новой кнопки класс по адресу:

http://apiok.ru/wiki/pages/viewpage.action?pageId=42476656

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

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

Жмем по кнопке «Get Code» и получаем необходимый код для вставки на сайте.

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

http://api.mail.ru/sites/plugins/share/

Если возникнут вопросы, то ниже настроек, как и на вышеописанных сервисах, есть ссылка на детальную документацию.

Вам показалось это все сложным? Возможно, потому как все эти кнопки нужно получить, влепить код и скрипты на сайт, но если вы в этом разбираетесь, то это всего нескольких минут дело. Все скрипты можно поместить в один файл, и подключить его в необходимом месте. Но если вам всё равно это кажется сложным, то есть более простой вариант. Для этого нам снова придется пойти на сторонний сервис и скачать готовую библиотеку, которая подключает всё необходимое одним файлом javascript , а также выводит в красивом оформлении посредством готового файла стилей css . Переходим на этот сервис:

http://sapegin.github.io/social-likes/ru/

Играемся с настройками, выбираем необходимое количество социальный сетей, скин, вид, и после этого качаем готовый вариант файлов кликом по кнопке «Скачать кнопки» в самом низу. В архиве получится 3 файла, из которых 2 уже были описаны выше, а 3-й выступает примером для вставки блоков div на сайте.

Заключение: какой из этих вариантов больше подойдёт вам, решайте сами. Оба они исключают зависимость от посторонних сервисов, но если так рассуждать, то не будем забывать, что сами социальные сети очень часто тупят, а соответственно и тянут за собой сайт(увеличивают время загрузки страницы). Так что, здесь противоречие одно за другим. Желаю вам успехов!

Доброго времени суток, уважаемые читатели. Не так давно, 11 октября, я публиковала в виде единого блока. Однако упоминание социальной сети Одноклассники сыграло злую шутку, и многие пользователи приходят из поисковых систем именно в надежде найти эту кнопку.

Я решила исправиться и посвятить отдельную статью размещению кнопки Класс! от Одноклассников. С одной стороны установить кнопку не сложно, но есть ряд условий, которые необходимо выполнить.
Поэтому я посчитала, что лучше подробнее об этом рассказать.
Сразу оговорюсь:

Код кнопки Класс, описанный в этой статье уже адаптирован под платформу Blogger/Blogspot.

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

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

тут будет код кнопки

Перед добавлением кода кнопки в шаблон всегда ставим галочку "Расширить шаблоны виджетов"

У Одноклассников есть возможность установить 4 разных вида кнопок.

Итак, как добавить кнопку Класс в виде счетчика в Blogger/Blogspot

Шаг первый .
Открываем шаблон блога, находим:

Перед этой строкой вставляем код:

Шаг второй . Чтобы велся подсчет "голосов", находим код:

и полностью меняем его на этот:

или лично у меня в шаблоне тег body был такой:

в таком случае заменяем код в таком порядке:

Обратите внимание, мы оставили и прежнее значение class="loading" и добавили новое значение onload="ODKL.init();"

Шаг третий . Установка кода кнопки Класс.
Находим место, в которое вы хотите установить кнопку Класс и вставляем код кнопки:

0

В этом коде ни в коем случае ничего нельзя менять. Сохраняем шаблон.
Если вы хотите такую кнопку
Чтобы ее установить, проделываем Шаг первый, описанный выше (вставляем ссылки на необходимые файлы в заголовок шаблона), второй шаг пропускаем, он не нужен. Переходим к третьему шагу – размещение кода кнопки Класс.

Класс!

Если же вы хотите такую кнопку , то код будет такой:

Как видите, сложного ровным счетом ничего нет. В принципе, все эти коды ничем сильно не отличаются, кроме значения class, которое сообщает нам, как должна выглядеть кнопка.

Если же вам не нравится стандартная кнопка Класс, в таком случае можно ее заменить на свою картинку. И в таком случае, выбираем, например, вид кнопки из второго варианта, где class="odkl-klass", и сразу после кода кнопки вставляем:

Т.е. все вместе это должно выглядеть так:

Класс!
.odkl-klass {background: url(адрес вашей картинки) no-repeat; }

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

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

P.S. Все, кто ставил себе блок кнопок социальных сетей, и хочет вставить кнопку Одноклассников в этот блок, как у меня, то вам нужно будет проделать:
1. Шаг первый,
2. открыть этот файл ,
3. Вставить код из файла в то место, где хотите, чтобы находилась кнопка.
Сохранить шаблон.

Кнопка “Класс” позволит посетителям вашего сайта отмечать особо понравившиеся материалы и делиться ими с друзьями в Одноклассниках.

Она поможет вам понять, что больше нравится вашей аудитории, и заодно привлечёт новых посетителей на ваш сайт.

Если у вас установлена наша старая кнопка «Класс», советуем сменить её на новую, хотя бы потому, что работает она намного быстрее.

При расшаривании какого-либо ресурса на Одноклассниках могут наблюдаться проблемы с обработкой медиа-контента.

Ограничения на расшариваемые картинки:

• минимальный размер:
  • для веба: 128x128
  • для мобильных: 50x50
• минимальное соотношение сторон: 0.5

Также для недоверенных доменов граббер не обрабатывает изображения и видео. Чтобы граббер начал обрабатывать такие ссылки, необходимо использовать один из протоколов разметки страницы:

• Протокол Open Graph .
  Этот способ позволяет внутри тега страницы указать теги og:title, og:description, og:image и og:video, которые подскажут грабберу, какой контент на странице требуется использовать.

Запросы отправляются с адресов:

https://connect.ok.ru/offer
   ?url =URL_TO_SHARE
   &title =TITLE
   &imageUrl =IMAGE_URL

Только параметр url обязателен, остальные параметры опциональны.

• Возможность узнать количество “классов” к своей странице без установки кнопки:

https://connect.ok.ru/dk
   ?st.cmd =extLike
   &tp =json
   &ref =URL_TO_SHARE

При встраивании нескольких виджетов на одну страницу можно воспользоваться кодом:

При классе страницы через виджет он шлёт на вашу страницу postMessage со следующим содержанием:

ok_shared$__okShare1

Событие на странице, встроившей виджет, можно отследить следующим javascript кодом: