Промежуток между кнопками "Поделиться этой страницей"

Статус
В этой теме нельзя размещать новые ответы.

sembon

Участники
Сообщения
42
Реакции
2
Баллы
5,505
Всем привет. Есть такая проблема. Вот мой шаблон share_page

Код:
<xen:if hascontent="true">
    <xen:require css="share_page.css" />

    <div class="sharePage">
        <h3 class="textHeading larger">{xen:phrase share_this_page}</h3>
        <xen:contentcheck>
            <xen:hook name="share_page_options">
            <xen:if is="{$xenOptions.tweet.enabled}">
                <div class="tweet shareControl">
                    <a href="https://twitter.com/share" class="twitter-share-button"
                        data-count="horizontal"
                        data-lang="ru"
                        data-url="{$url}"
                        {xen:if {$thread.title}, 'data-text="{xen:helper threadPrefix, $thread, escaped}{$thread.title}"'}
                        {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                        {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.plusone}">
                <div class="plusone shareControl">
                    <div class="g-plusone" data-size="medium" data-count="true" data-href="{$url}"></div>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.facebookLike}">
                <div class="facebookLike shareControl">
                    <xen:container var="$facebookSdk">1</xen:container>
                    <fb:like href="{$url}" layout="button_count" show_faces="true" width="400" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                </div>
            </xen:if>
            </xen:hook>
        </xen:contentcheck>
        <script type="text/javascript">
document.write(VK.Share.button({
  description: 'Новости, форумы, гайды и стримы Heroes of the Storm',
  image: 'http://centavraclub.ru/forum/styles/default/xenforo/logo.og.png',
  noparse: false},
{type: 'round', text: 'Поделиться'}
));
</script>
    </div>
</xen:if>

Итого показан на вложенном скрине. Помогите, сделать промежуток между FB и VK. Спасибо.
 

Вложения

  • 1.png
    1.png
    4.9 KB · Просмотры: 35
Приветствую.

Можно попробовать взять див от другой кнопки, например так:
Код:
<div class="tweet shareControl">
<script type="text/javascript">
document.write(VK.Share.button({
  description: 'Новости, форумы, гайды и стримы Heroes of the Storm',
  image: 'http://centavraclub.ru/forum/styles/default/xenforo/logo.og.png',
  noparse: false},
{type: 'round', text: 'Поделиться'}
));
</script>
</div>


Или так:
Код:
<div class="plusone shareControl">
<script type="text/javascript">
document.write(VK.Share.button({
  description: 'Новости, форумы, гайды и стримы Heroes of the Storm',
  image: 'http://centavraclub.ru/forum/styles/default/xenforo/logo.og.png',
  noparse: false},
{type: 'round', text: 'Поделиться'}
));
</script>
</div>


Или так:
Код:
<div class="facebookLike shareControl">
<script type="text/javascript">
document.write(VK.Share.button({
  description: 'Новости, форумы, гайды и стримы Heroes of the Storm',
  image: 'http://centavraclub.ru/forum/styles/default/xenforo/logo.og.png',
  noparse: false},
{type: 'round', text: 'Поделиться'}
));
</script>
</div>


Или добавить свои свойства для кнопки в шаблон share_page.css
 
div дается для каждой соц сети на сайте. Я брал див VK в разделе Разработчикам. Дивы twitter и FB - они стандартно стояли в XenForo.. Попробовал, поставил - не работает. У меня проблема в простом промежутке между кнопками, а не в работоспособности кнопок.
 
Код Вашей кнопки замените на:
Код:
<div class="vk_but" id="vk_like"></div>
<script type="text/javascript">
document.write(VK.Share.button({
  description: 'Новости, форумы, гайды и стримы Heroes of the Storm',
  image: 'http://centavraclub.ru/forum/styles/default/xenforo/logo.og.png',
  noparse: false},
{type: 'round', text: 'Поделиться'}
));
</script>


И в EXTRA.css добавьте:
Код:
.vk_but
{
  float:left;
  margin-right: -30px;
}
 
Можно в шаблоне share_page вывести кнопки шары вот так:
Код:
<div class="knopki-soc">
<div class="twit">Код кнопки твиттера</div>
<div class="facebook">Код кнопки фейсбук</div>
<div class="vk">Код кнопки вконтакте</div>
<div class="google">Код кнопки гугл +</div>
</div>


В EXTRA.css добавить:
Код:
.knopki-soc {
    width:500px; height:25px; margin:15px auto 5px; border:1px dashed #E1E1E1; border-radius:6px; padding:10px 16px 6px 35px; background:#F1F1F1;
    }
    .twit {
    float:left; width:120px;
    }
    .facebook {
    float:left; width:140px;
    }
    .vk {
    float:left; width:160px;
    }
    .google {
    float:left; width:80px;
    }


На выходе получим вот такое:

blok-knopok.jpg
 
В процессе, обязательно отпишусь в ближайшие минуты[DOUBLEPOST=1400592807,1400591971][/DOUBLEPOST]Я так понимаю все, что в 1) share_page вы удаляете 2) отлючаете в настройки/ SEO показ всех стандартных кнопок 3) вставляете доп код в EXTRA? Я удалил, попытался вставить ваш код, с кодами кнопок, но выдает ошибку - некорректный шаблон. Скиньте плз ваш тестовый шаблон share_page, при котором у вас все ОК.
 
Я уже отменил все изменения на тестовом, но вроде так у меня было (всё содержимое шаблона share_page меняем на):
Код:
<xen:if hascontent="true">
    <xen:require css="share_page.css" />

    <div class="sharePage">
        <h3 class="textHeading larger">{xen:phrase share_this_page}</h3>
        <xen:contentcheck>
       
<div class="knopki-soc">
<div class="twit">Код кнопки твиттера</div>
<div class="facebook">Код кнопки фейсбук</div>
<div class="vk">Код кнопки вконтакте</div>
<div class="google">Код кнопки гугл +</div>
</div>
        </xen:contentcheck>
    </div>
</xen:if>
 
Последнее редактирование:
Статус
В этой теме нельзя размещать новые ответы.
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу