Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Кнопки "Поделиться" на вашем форуме - серия туториалов

Предыдущая тема Следующая тема Перейти вниз

Кнопки "Поделиться" на вашем форуме - серия туториалов

Сообщение автор Сказочник Зазеркалья в Чт 21 Мар - 14:18

Как добавить кнопки "Поделиться" в виджеты форума, вы можете прочитать в туториале Кнопки социальных сетей

Всем приветик. smile

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

Инструкция по установке для phpBB2, punBB.

Для начала идём на сайт:
http://share.pluso.ru/?new

И настраиваем наш будущий счётчик, после настройки копируем код и идём на форум, в котором хотим сделать это улучшение.

Спойлер:





Теперь мы должны поместить код виджета, между этими кодами:

Код:
<div style="position: absolute; right: 1560px; bottom: 40%;">
Здесь ваш код виджета поделиться.
</div>



Готовый вариант будет выглядеть так:

Код:
<div style="position: absolute; right: 1560px; bottom: 40%;">
<div class='pluso pluso-theme-bewel pluso-round pluso-small pluso-vertical'><a class='pluso-facebook'></a><a class='pluso-yandex'></a><a class='pluso-twitter'></a><a class='pluso-vkontakte'></a><a class='pluso-odnoklassniki'></a><a class='pluso-google'></a><a class='pluso-livejournal'></a><a class='pluso-moimir'></a><a class='pluso-liveinternet'></a><a class='pluso-email'></a><a class='pluso-print'></a><a class='pluso-bookmark'></a><div class='pluso-more-container'><a class='pluso-more' href=''></a><ul class='pluso-counter-container'><li></li><li class='pluso-counter'></li><li></li></ul></div></div>
<script type='text/javascript'>if(!window.pluso){pluso={version:'0.9.2',url:'http://share.pluso.ru/'};h=document.getElementsByTagName('head')[0];l=document.createElement('link');l.href=pluso.url+'pluso.css';l.type='text/css';l.rel='stylesheet';s=document.createElement('script');s.charset='UTF-8';s.src=pluso.url+'pluso.js';h.appendChild(l);h.appendChild(s)}</script>
</div>


После этого идём на форум и проделываем следующее:

Панель Администрации - Оформление - Шаблоны - viewtopic_body.

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

Пример:
Спойлер:


Настройка положения и расположения:

Теперь мы разберём настройку кода по частям.

<div style="position: absolute; right: 1000px; bottom: 92%;">
здесь код виджета.
</div>

position: absolute - Отвечает за прокрутку. При absolute прокрутки не будет и виджет поделиться будет на одном месте. Если указать fixed, тогда виджет поделиться будет прокручиваться вместе с форумом.

right: 1000px - отвечает за положение виджета поделиться по горизонтали. Т.е эта настройка отвечает за то, на сколько пикселей или процентов будет сдвинут вправо или влево виджет поделиться. Можно указывать параметры как в пикселях, так и процентах.

bottom: 92% - отвечает за вертикальное положение виджета поделиться. Т.е эта настройка отвечает за то, на сколько пикселей или процентов будет поднят или опущен виджет поделиться. Можно указывать параметры как в пикселях, так и процентах.



Дополнительно:

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


P.s. Расположение и положение виджета настраивайте под свои параметры для корректного отображения виджета. х)

С уважением Сказочница Зазеркалья aka Мишель Али Картер. rose


Последний раз редактировалось: Кардинал Мишель Картер (Чт 21 Мар - 16:37), всего редактировалось 4 раз(а)
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://stihi.ru/autor/milanwake

Вернуться к началу Перейти вниз

Re: Кнопки "Поделиться" на вашем форуме - серия туториалов

Сообщение автор Сказочник Зазеркалья в Чт 21 Мар - 14:22

Инструкция по установке для phpBB3, Invision.

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



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

P.s. Расположение и положение виджета настраивайте под свои параметры для корректного отображения виджета. х)

С уважением Сказочница Зазеркалья aka Мишель Али Картер. rose




Все вопросы про установку / настройку блока задавайте, пожалуйста, в теме: http://help.forum2x2.ru/t31767-topic
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://stihi.ru/autor/milanwake

Вернуться к началу Перейти вниз

Всплывающий тулбар Share. [phpBB2, punBB]

Сообщение автор Сказочник Зазеркалья в Пн 15 Апр - 21:14

Всем приветик ребята. 12

В этом туториале хочу рассказать как добавить на свой форум "Тулбар" с функцией "поделиться" в соц.сетях. В дополнение хочу сказать, что внешний вид Тулбара можно настраивать через CCS. Но снова возникает трабла, что вам нужно хорошо владеть CCS, чтобы воспользоваться продвинутым улучшением внешнего вида Тулбара и его функционала. Данная версия для форумов с версией phpBB2, punBB. Для других движков ещё ищу решение. Ниже приведена инструкция по установке на свой форум подобного Тулбара:





Этап первый - создание - Тулбара.

Для начала идём на этот сайт:

http://sharethis.com

Теперь следуем ниже приведённой инструкции:


Создание Тулбара:

Спойлер:
И нажимаем на окошко в середине сайта:



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



В нашем случае нужно выбрать первый вариант, т.е WWW(Website). Затем нажимаем на ссылку Next: Step2. Pick a Style.



На новой странице , вам нужно выбрать стиль вашей функции, следуя данному туториалу, вам нужно выбрать вариант "Тулбар сверху". Затем нужно нажать на ссылку Next: Step3. Customize.






Настройка функционала Тулбара:

Спойлер:
Теперь нужно выбрать какие иконки социальных сетей будут доступными в данной функции, а также поставить лого форума. После настройки, нажимаем на кнопку "Получить код":







Получение кода для вставки:

Спойлер:
Во всплывающем окне, игнорируем предложение "Регистрации" и нажимаем на ссылку: No thanks, just give me the code! (Нет спасибо, я хочу получить свой код!):



И снова всплывающее окно, но теперь уже нам нужно скопировать готовые коды для вставки:

Копируем все коды на блокнот:

На этом завершается первый этап "Создание Тулбара". Теперь имея код, можно перейти ко второму этапу. solved





Этап второй - Встройка скрипта Тулбара на свой форум.

Панель Администратора - Оформление - Шаблоны - Общие настройки - overall_header.
В шаблоне перед тегом </head>, ставим этот скрипт:

Код:
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Сохраняем и опубликовываем шаблон. plus





Размещение Тулбара.

Теперь определимся куда мы хотим поставить показ Тулбара. Ниже приведены примеры установки Тулбара:

№1 - Установка в виджет.

Панель Администратора - Модули - Портал & Виджеты - Виджеты форума.

Создаём персональный шаблон с отключенным шаблоном. В содержимое вставляем код для вставки. Arrow


№2 - Установка в шаблоны:

Вариант №1.

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


Панель Администратора - Оформление - Шаблоны - Общие настройки - viewtopic_body.

Панель Администратора - Оформление - Шаблоны - Общие настройки - viewcomments_body.



Вариант №2.

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

Панель Администратора - Оформление - Шаблоны - Общие настройки - overall_footer_end.

В шаблоне перед тегом </body>, ставим код для вставки. Arrow

Подсказка: Не забывайте чаще чистить кеш и после изменения шаблонов, публиковать их. drinks





Настройка оформления Тулбара.

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

Код:

.stpulldown-gradient
{
background: #E1E1E1;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
}
#stpulldown .stpulldown-logo
{
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("http://sd.sharethis.com/disc/images/Logo_Area.png") no-repeat;
}


Заметьте что это:
<style type="text/css"> </style> может вызвать автоматическую очистку в вашей CCS.



Настройка оформления путём изменения и добавления параметров:

Спойлер:
.stpulldown-gradient
{
background-image: url(Ссылка на фон Тулбара)!important;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
}
#stpulldown .stpulldown-logo
{
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("Ссылка на логотип форума") no-repeat;
}


background-image: url(Ссылка на фон Тулбара)!important; - Эта строчка позволяет сделать вместо цветового фона, фон картинкой.

color: #636363; - цвет надписи поделиться.

background:url("Ссылка на логотип форума") no-repeat; - Ссылка на ваш логотип. Размер должен быть 300 х 40.

Внимание: можно пробовать добавлять и более гибкие настройки. 12


И так на этом заканчивается инструкция по созданию "Всплывающего Тулбара" вверху форума. Надеюсь данный туториал будет полезен. solved

С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://stihi.ru/autor/milanwake

Вернуться к началу Перейти вниз

Универсальный Тулбар Share + Addition. [phpBB2, punBB]

Сообщение автор Сказочник Зазеркалья в Пн 15 Апр - 21:40

Всем приветик ребята. girl_yes

В этом туториале хочу рассказать как добавить на свой форум "Тулбар" с функцией "поделиться" в соц.сетях + дополнительными функциями, с отображением внизу форума. Основные плюсы это возможность свернуть тулбар, а также возможность добавления до 3 своих кнопок с ссылками в панель. Эти 3 персональная кнопки можно использовать для чата и других страниц/функций вашего форума. Данная версия для форумов с версиями phpBB2 и punBB. Для других движков ещё ищу решение. Ниже приведена инструкция по установке на свой форум подобного Тулбара:







Этап первый - создание - Тулбара.


Создание Туториала:

Спойлер:
Для начала идём на этот сайт:

http://sharethis.com

И нажимаем на окошко в середине сайта:



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



В нашем случае нужно выбрать первый вариант, т.е WWW(Website). Затем нажимаем на ссылку Next: Step2. Pick a Style.



На новой странице , вам нужно выбрать стиль вашей функции, следуя данному туториалу, вам нужно выбрать вариант "Тулбар снизу". Затем нужно нажать на ссылку Next: Step3. Customize.






Гибкая настройка Тулбара:

Спойлер:
На этом шаге есть универсальное дополнение к Тулбару. Это вставка своих кнопок в панель, т.е например вы хотите вставить ссылку на свой форум или ссылку на чат. Чтобы добавить свою персональную кнопку Поставьте ссылочку рядом с Custom buttons Module. После этого появиться настройка данной кнопки:




В дополнение есть функция, которая позволяет открывать веб - страницу в мини окне:



Всего можно создать до трёх персональных кнопок:



Далее переходим к другим настройкам Тулбара. Теперь нужно вставить ссылку на свой форум и лого. Рядом с полем для ссылки изображения, есть опция, которая позволяет поднимать и опускать логотип на Тулбаре. Если вы не хотите чтобы было лого, тогда вставьте в поле для ссылки на изображения лого, обычную пустышку:



И под конец, можно настроить цвет Тулбара. Для более гибкой настройки вам нужен аккаунт и знание веб - дизайна:




Получение кода для вставки:

Спойлер:
Завершение:

Как только закончите, нажмите на кнопку получить код:



Во всплывающем окне, игнорируем предложение "Регистрации" и нажимаем на ссылку: No thanks, just give me the code!:



И снова всплывающее окно, но теперь уже нам нужно скопировать готовые коды для вставки:

Копируем все коды на блокнот:

На этом завершается первый этап "Создание Тулбара". Теперь имея код, можно перейти ко второму этапу. solved




Этап второй - Встройка скрипта Тулбара на свой форум.

Панель Администратора - Оформление - Шаблоны - Общие настройки -overall_header .

В шаблоне перед тегом </head>, ставим этот скрипт:

Код:
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Сохраняем и опубликовываем шаблон. plus




Размещение Тулбара.

Теперь определимся куда мы хотим поставить показ Тулбара. Ниже приведены примеры установки Тулбара:

№1 - Установка в виджет.

Панель Администратора - Модули - Портал & Виджеты - Виджеты форума.

Создаём персональный шаблон с отключенным шаблоном. В содержимое вставляем код для вставки. Arrow


№2 - Установка в шаблоны:

Вариант №1.

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

Панель Администратора - Оформление - Шаблоны - Общие настройки - viewtopic_body.

Панель Администратора - Оформление - Шаблоны - Общие настройки - viewcomments_body.



Вариант №2.

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

Панель Администратора - Оформление - Шаблоны - Общие настройки - overall_footer_end.

В шаблоне перед тегом </body>, ставим код для вставки. Arrow


Подсказка: Не забывайте чаще чистить кеш и после изменения шаблонов, публиковать их. drinks


По более гибкому улучшению данного тулбара, можете обращаться ко мне, объясню и помогу. d_daisy


С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://stihi.ru/autor/milanwake

Вернуться к началу Перейти вниз

Боковая панель Share. [phpBB2, punBB]

Сообщение автор Сказочник Зазеркалья в Пн 15 Апр - 22:06

И снова всем приветик ребята. girl_yes

Решила написать ещё один туториал по теме "Поделиться в соц сетях". На этот раз это боковая панелька, с огромным плюсом. На ней нет копирайта сервиса где создана эта панель. Т.е если говорить об профессиональном виде сайта, то многие хотят иметь на сайте такие фичи, которые не имеют копирайта производителя. Ну например вы поставили чат на свой форум, а там будет огромный логотип сервиса производителя. Ну в общем мысль ясна, что без копирайта функция "поделиться", будет намного профессиональнее. smile



И так начнём создание боковой панельки:





Этап первый - Создание Боковой панели Share.

Для начала идём на этот сайт:

http://sharethis.com

А дальше выполняем ниже указанную инструкцию:


Создание "Боковой панели Share":

Спойлер:
Нажимаем на окошко в середине сайта:



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



В нашем случае нужно выбрать первый вариант, т.е WWW(Website). Затем нажимаем на ссылку Next: Step2. Pick a Style.




На новой странице , вам нужно выбрать стиль вашей функции, следуя данному туториалу, вам нужно выбрать вариант "Боковая панель Share". Затем нужно нажать на ссылку Next: Step3. Customize.





Настройка функционала:

Спойлер:
Теперь выбираем какие соц. сети будут присутствовать в функции "Боковой панели Share". Желательно не включать много соц. сетей, потому что тогда высота панельки сильно увеличиться. Советую выбрать лишь основные соц.сети, которые являются популярными и которыми пользуются большинство юзеров инета. Также можно выбрать с какой стороны будет находиться боковая панель, т.е с левой или правой стороны форума. Exclamation



Получение кодов для вставки:

Спойлер:
После настройки, нажимаем на кнопку "Получить код":



Во всплывающем окне, игнорируем предложение "Регистрации"и нажимаем на ссылку: No thanks, just give me the code!:



И снова всплывающее окно, но теперь уже нам нужно скопировать готовые коды для вставки:

Копируем все коды на блокнот:


На этом завершается первый этап. Теперь имея код, можно перейти ко второму этапу. solved






Этап второй - Встройка скрипта Боковой панели.

Панель Администратора - Оформление - Шаблоны - Общие настройки - overall_header

В шаблоне перед тегом </head>, ставим этот скрипт:

Код:
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Сохраняем и опубликовываем шаблон. plus





Этап третий - Размещение Боковой панели Share.

Теперь определимся куда мы хотим поставить показ функции. Ниже приведены примеры установки Боковой панели Share:

№1 - Установка в виджет.

Панель Администратора - Модули - Портал & Виджеты - Виджеты форума.

Создаём персональный шаблон с отключенным шаблоном. В содержимое вставляем код для вставки. Arrow


№2 - Установка в шаблоны.

Если хотите чтобы Боковая панель появлялась лишь в определённых шаблонах, тогда в начало ниже указанных шаблонов ставим код для вставки. Arrow

№1 - viewtopic_body
№2 - viewcomments_body
№3 - profile_view_body
№4 - portal_body


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


Думаю на этом можно закончить инструкцию по созданию "Боковой панельки поделиться". Желаю всем удачи в улучшении ваших форумов. d_daisy

С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://stihi.ru/autor/milanwake

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения