Автоматическое встраивание постов с голоса на ваш сайт (embedJS)

Обновил дизайн и некоторую логику работы вчерашнего скрипта

Напомню как он работает:
Вы подключаете на свой сайт js плагин, для этого нужно зайти в редактор шаблонов вашего сайта и внутри тегов <head></head> или перед тегом </body> вставить следующую строчку:

<script async src="https://chain.cf/scripts/embedgolos.js"></script>

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

Кроме того данный плагин поможет вам создать страничку своего блога за считанные минуты - просто "накидайте" ссылок на страницу своего сайта и они будут преобразованы в карточки постов.

Демо

Работу плагина вы можете посмотреть на странице https://golos.rubtc.info/embeds/

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

Что нового

В первую очередь оформлен внешний вид, добавлена анимация и цветовые акценты

Карточка отображает:

• Изображение поста в том числе анимированное
• Имя автора
• Заголовок
• Количество голосов
• Вознаграждение автора в GBG (В первые сутки потенциальное, далее выплаченные GBG)
• Вознаграждение кураторов (Выплаченная награда отображается в GBG, а потенциальная в %)
• Завлекающую строку, где указано, что GBG - это настоящее золото :)
• Анимацию слогана голоса:

Вознаграждение кураторов для постов которым более суток отображается в GBG

Для свежеопубликованных постов отображается заглушка гласящая, что кураторы получат ~25%

Поправьте меня, если доля должна быть другой!

Если автор отказался от награды, об этом так же будет заметка:

Карточка адаптивно растягивается по ширине области в которой размещена ссылка. Для телефонов есть компактный режим

Описание работы скрипта для вебмастеров

Исходник https://github.com/vikxx/golos/blob/master/postsembed.js

<script async src="https://chain.cf/scripts/embedgolos.js"></script>

Скрипт выше содержит библиотеку для вебсокет-связи с API голоса/стима steemjs.com/ ( https://github.com/ontofractal/golosjs )

За вывод карточек постов отвечает скрипт ниже:

Собираем все ссылки на странице, если ссылка содержит https://golos.io/, то парсим логин и ссылку на пост и записываем данные в массив p , так же динамически добавляем каждой ссылке свой id a[i].setAttribute("id", "golosio-"+[n]);n++;

var n=0,i,p=[],f,a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
  if (a[i].href.includes('https://golos.io/') ) {
    f = a[i].href;
    console.log(a[i].href);
    a[i].setAttribute("id", "golosio-"+[n]);n++;
    userpost = f.substring(f.indexOf('@')).substring(1),
    p.push({
    u : userpost.substring(0, userpost.indexOf('/')),
    p : userpost.substring(userpost.indexOf('/')).substring(1)
    });
 }
}

Далее создаем цикл для количества найденных ссылок с голоса for (i = 0; i < p.length; i++)

Получаем контент для каждой ссылки через API steem.api.getContent(p[i].u, p[i].p, function(err, d)

Контент сортируем по переменным и заменяем ссылки на контент функцией document.getElementById("golosio-"+c).innerHTML = ('Тут переменные и html');

var c=0;
for (i = 0; i < p.length; i++) {
steem.api.getContent(p[i].u, p[i].p, function(err, d) {
console.log(d);
var meta = JSON.parse(d.json_metadata),oneimg = meta.image[0];
var kura = d.curator_payout_value,
pre="<strong>Вознаграждение за пост ",
z='*</strong> <p class="gl-curat">Курс токена сети: *1 GBG = 1 мг Золота.';
if(d.mode == "first_payout"){
    rw=pre+d.total_pending_payout_value+z+' Награда голосующим <span>~25%</span></p>'}
else if(d.author_rewards !== 0){
    rw=pre+d.total_payout_value+z+' Награда голосующим <span>'+kura+'</span></p>'}
else{rw='Автор отказался от награды';}
document.getElementById("golosio-"+c).innerHTML = ('ВЫВОД КАРТОЧКИ НА СТРАНИЦУ');
  c++;
  });
}

Оформляем все подключив inline CSS:

var css = '',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}head.appendChild(style);

При желании можно вывести в карточку много различной информации, в том числе и весь контент поста так как запрос getContent выдает множество массивов данных:

В заключение

Если у вас есть идеи для оформления карточек постов - буду рад их выслушать!