Блок «Поделиться»

Блок «Поделиться» с социальными сетями и друзьями состоит из блока «Поделиться» от Яндекса и кнопки "Поделиться ссылкой" с друзьями.
О блоке иконок социальных сетей от Яндекса под названием «Поделиться» в этой теме.
Как добавить свою кнопку "Поделиться ссылкой" и свой стиль в блок «Поделиться» от Яндекса в этой теме. Там же рабочие варианты размещения на странице блока «Поделиться» в контейнере float_block_icon.

Блок «Поделиться» имеет следующие свойства;

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

Установка блока «Поделиться» на сайт.

1. Для кнопки "Поделиться ссылкой" скачайте иконку pochta.png и разместите её в каталоге форума /images/buttons/.
2. Через "админпанель>управление фразами" добавим новую переменную в ОСНОВНЫЕ фразы

   имя переменной - share_link
   текст фразы - Share link
   перевод на русский - Поделиться ссылкой

   сохраните фразу
3. Откройте шаблон header и в конце шаблона поместите следующий код блока «Поделиться»:
   

   <script src="https://yastatic.net/share2/share.js" async="async" charset="utf-8"></script>
   <div id="float_block_icon">
   <a href=<if condition="THIS_SCRIPT == 'showthread'">"sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>
   <div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram"<if condition="$bbuserinfo['languageid'] != '2'"> data-lang=“en"</if>>
   </div></div>

   сохраните шаблон
4. Выберите один из вариантов отображения блока «Поделиться» на странице.
   Откройте шаблон headinclude и поместите в конец шаблона код таблицы стилей выбранного варианта.
   
   Варианты отображения блока «Поделиться» на странице:
   Вертикальное слева
   
   

   <style type="text/css">
   #float_block_icon{position:fixed;top:50%;left:0;z-index:99;margin-top:-112px;width:26px;}
   #float_block_icon li,#float_block_icon img{margin:2px 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
   #float_block_icon img{float:left;}
   </style>

   
   Вертикальное справа
   
   

   <style type="text/css">
   #float_block_icon{position:fixed;top:50%;right:0;z-index:99;margin-top:-112px;width:26px;}
   #float_block_icon li,#float_block_icon img{margin:2px 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
   #float_block_icon img{float:left;}
   </style>

   
   Горизонтальное вверху
   
   

   <style type="text/css">
   #float_block_icon{position:fixed;top:0;left:50%;z-index:99;margin-left:-112px;width:100%;}
   #float_block_icon li,#float_block_icon img{margin: 0 2px  !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
   #float_block_icon img{float:left;}
   </style>

   
   Горизонтальное внизу.
   
   

   <style type="text/css">
   #float_block_icon{position:fixed;bottom:0;left:50%;z-index:99;margin-left:-112px;width:100%;}
   #float_block_icon li,#float_block_icon img{margin:0 2px !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
   #float_block_icon img{float:left;}
   </style>

   
   Вертикальное справа/Горизонтальное внизу (адаптивный дизайн)
   
   Оффтоп

   <style type="text/css">
   #float_block_icon{position:fixed;top:50%;left:0;z-index:99;margin-top:-112px;width:26px;}
   #float_block_icon li,#float_block_icon img{margin:2px 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
   #float_block_icon img{float:left;}
   @media screen and (max-width:720px)
   {
   #float_block_icon{top:100%;left:50%;margin:-26px 0 0 -112px;width:100%;}
   #float_block_icon li,#float_block_icon img{margin:0 2px !important;}
   }
   </style>

   
   
   
   
   сохраните шаблон

Установка кнопок социальных сетей завершена. По клику на кнопку, происходит репост публикации с сайта в соответствующую кнопке социальную сеть. При этом, сниппет со ссылкой на ваш сайт будет сформирован автоматически с помощью той социальной сети, где вы захотели разместить его. То есть, соцсеть будет сама «решать», какой заголовок будет у сниппета, какой текст, какая ссылка, какая картинка и т.д.
Если вы хотите контролировать процесс формирования превью и сниппета в соцсети, то на сайте необходимо будет разместить микроразметку в стандарте Open Graph. Код микроразметки вставляют в метатеги, отсюда у Open Graph есть второе название, разметка метатегами.

- О стандарте Open Graph в Вебмастерской Яндекса.
- Валидатор микроразметки Open Graph от Yandex

Пример разметки страниц сайта в стандарте Open Graph.

Из всего множества свойств стандарта Open Graph выберем самые необходимые для формирования сниппета в соцсети и ещё добавим те, что необходимы для валидности кода микроразметки. Код микроразметки и её сонстанты в виде переменных движка форума вставляем в метатеги. Затем, открываете шаблон headinclude и после строки

<meta name="generator" content="vBulletin $vboptions[templateversion]" />

Вставляете в шаблон код микроразметки

<if condition="THIS_SCRIPT == 'showthread'">
<meta property="og:type" content="article" />
<else />
<meta property="og:type" content="website" /></if>
<meta property="og:title" content="$navbits[lastelement]" />
<meta property="og:url" content="https://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]<if condition="$_SERVER['QUERY_STRING']">?$_SERVER[QUERY_STRING]</if>" />
<meta property="og:site_name" content="vBSupport.org" />
<meta property="og:locale:alternate" content="ru_RU" />
<meta property="og:description" content="<if condition="$show['threadinfo']">$threadinfo[title] $foruminfo[title_clean]<else /><if condition="$show['foruminfo']">$foruminfo[description_clean]<else />$vboptions[description]</if></if>" />
<meta property="og:image" content="http://vbsupport.ru/im/logo1.png" />
<meta property="og:image:width" content="258" />
<meta property="og:image:height" content="43" />

Сохраняем шаблон.

Микроразметка Open Graph обладает существенным недостатком, её код работает только между тегами <head> и </head>. Отсюда, не получиться разместить микроразметку в постах, что бы взять оттуда картинку и описание. Поэтому в качестве примера картинки указал логотип, а description оставил стандартный от движка форума. Практически такая микроразметка для картинки не нужна, тем более, описание (description) от движка форма, кторое предназначено для поисковых машин, следовательно, метатеги с кодами разметки;

og:description,
og:image,
og:image:width,
og:image:height,

можно удалить из разметки стораницы.

Для четвёртой версии движка есть хак, который поможет создать разметку для картинок.
More Open Graph Images

Originally Posted by WEBCAT

Отсюда, не получиться разместить микроразметку в постах, что бы взять оттуда картинку и описание

чёйта? =)



https://blancos.info/forum/showthread.php?t=8319

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

PHP Code:

    $viewpermission = (($forumperms & $vbulletin->bf_ugp_forumpermissions['cangetattachment']));
    $viewthumbpermission = (($forumperms & $vbulletin->bf_ugp_forumpermissions['cangetattachment']) OR ($forumperms & $vbulletin->bf_ugp_forumpermissions['canseethumbnails'])); 


и заменить на эти

PHP Code:

    $viewpermission = (($forumperms & $vbulletin->bf_ugp_forumpermissions['cangetattachment']) OR in_array(strtolower($attachmentinfo['extension']), array('jpg', 'jpeg', 'jpe', 'gif', 'png', 'bmp')));
    $viewthumbpermission = (($forumperms & $vbulletin->bf_ugp_forumpermissions['cangetattachment']) OR ($forumperms & $vbulletin->bf_ugp_forumpermissions['canseethumbnails']) OR in_array(strtolower($attachmentinfo['extension']), array('jpg', 'jpeg', 'jpe', 'gif', 'png', 'bmp'))); 


таким образом, даем возможность скриптам шары доступ только к картинкам, оставляя все остальные права на вложения как установлено в правах групп (вложений)
а, ну да... еще нужно выполнить два запроса в БД (post + attachment) на странице темы, что бы собственно выдрать картинку из сообщения
post - для получения первых ХХ символов поста для мета тега "og:description" для каждой темы в отдельности, а не общего из настроек
attachment - вложение-картинка для мета тега "og:image" для каждой темы в отдельности, а не логотип форума (если вложения-картинки нет, то можно и лого пихнуть)

Originally Posted by kerk

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

Вариант с картинками интересный. Я думал о картинках, которые вставляются из альбома.

<meta property="og:image" content="https://blancos**** />

Для https требуется указать дополнительный url

<meta property="og:image:secure_url" content="https://blancos**** />

Originally Posted by WEBCAT

Для https требуется указать дополнительный url

это не ко мне, к хозяину ресурса по ссылке

Originally Posted by WEBCAT

Я думал о картинках, которые вставляются из альбома

куда вставляются?

Originally Posted by kerk

куда вставляются?

Это не о вашем варианте. Из файла в текст поста.

Originally Posted by kerk

еще нужно выполнить два запроса в БД (post + attachment) на странице темы, что бы собственно выдрать картинку из сообщения
post - для получения первых ХХ символов поста для мета тега "og:description" для каждой темы в отдельности, а не общего из настроек

kerk, а $post[message] для получения первых ХХ символов не подойдёт?
Я планировал (решения пока нет) вставлять в текст поста через BB-коды HTML теги, например, <article>Текст</article>, затем вырезать текст между этими тегами. Так можно будет брать текст для description из любого места поста и разный по содержанию для разных соцсетей.

Originally Posted by WEBCAT

Так можно будет брать текст для description из любого места поста

"всё уже украдено да нас"...
я это делал еще лет 8-9 назад
функция process_thread_array()
кусок кода, который выдергивает первые ХХ символов описания, заменить на этот

PHP Code:

    // format thread preview if there is one
    if ($ignore["$thread[postuserid]"])
    {
        $thread['preview'] = '';
    }
    else if (isset($thread['preview']) AND $vbulletin->options['threadpreview'] > 0)
    {
        $thread['preview'] = strip_quotes($thread['preview']);
        if(preg_match('#\[pagenews\](.*)\[\/pagenews\]#Uis', $thread['preview'], $pmatches))
        {
            $thread['preview'] = $pmatches[0];
        }
        $thread['preview'] = htmlspecialchars_uni(fetch_censored_text(fetch_trimmed_title(
            strip_bbcode($thread['preview'], false, true),
            $vbulletin->options['threadpreview']
        )));
    } 


соотв. нужно добавить и ббкод [pagenews] с какой то нейтральной заменой, например так

<!--pagenews-->{param}<!--pagenews-->

можно и для микроразметки использовать (для сеонистов)
это все нужно было для постинга на вбадвансед + аккуратное превью в списке тем раздела
разумеется код можно использовать и в своих целях как раз для случаев, где нужно выдернуть чистый текст без ббкодов и что бы он был четко заканчивался при окончании предложения/абзаца

Originally Posted by WEBCAT

$post[message] для получения первых ХХ символов не подойдёт?

оттуда и вытаскиваю естессно, иначе зачем пост запрашивать?

Originally Posted by WEBCAT

<meta property="og:title" content="$navbits[lastelement]" />

А у вас цепляется к этому метатегу $navbits[lastelement]? У меня нет, в исходном коде страницы всегда пустой og:title

Originally Posted by logi

У меня нет, в исходном коде страницы всегда пустой og:title

$threadinfo[title]

массив $navbits генерится позже хидиниклюда (навбар), соотв. он может быть не доступен ниже по коду

@WEBCAT, kerk, ну это понятно. Значит, надо править первый пост, где WEBCAT дает пример метатегов. Я в этой теме только метатегами заинтересовался.

У себя для порядка сделал так. И для других нужных мне скриптов.

PHP Code:

<if condition="THIS_SCRIPT == 'showthread' OR THIS_SCRIPT == 'showpost'">
<meta property="og:title" content="$threadinfo[title]" />
</if> 


И вот на этот код фейсбук страшно ругается, у меня протокол http:

PHP Code:

meta property="og:url" content="https://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]<if condition="$_SERVER['QUERY_STRING']">?$_SERVER[QUERY_STRING]</if>" />