Версия для печати

Разработка сайтов, интернет-магазинов, наполнение сайта контентом — купить статьи

Создаем флеш-кнопки социальных сетей для Joomla

 
(2 голосов)

Как установить привлекательные кнопки социальных сетей на сайт

Интеграция социальных сетей со свободным, а, порой, и с рабочим временем пользователей, – замечательная возможность для продвижения сайтов. Вконтакте, Фейсбук, G+, Одноклассники, Твиттер не только входят в привычку современного общества, а , фактически, являются «образом его жизни».

Находчивые маркетологи используют этот шанс, чтобы проникнуть в сферу «обитания» потенциальных клиентов. В своих заметках специалисты рекомендуют создавать для ресурса аккаунты на популярных общественных сервисах, размещать на сайтах социальные кнопки.   Чтобы пользователи переходили по ссылкам, делились заметками с вашего проекта, необходимо предать социальным кнопкам визуально-привлекательный вид.   Давайте рассмотрим, как на cms joomla создать красивые анимационные иконки без использования дополнительных плагинов, тормозящих скорость загрузки сервиса.

Стандартные возможности Joomla позволяют активировать модуль кнопок социальных сетей буквально в пару кликов мышки. Это под силу даже молодому вебмастеру, который решил создать и раскрутить свой сайт.

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

ikonРазмер их оказался большим для размещения на сайте, пришлось создать две уменьшенные копии для каждой иконки, одну с габаритами 80х80 пикс., а вторую на 30 единиц в ширину и высоту меньше. Работа велась с помощью фотошопа, после чего оптимизированная графика была перенесена в корневую папку сайта «images».

Порядок работ

  1. Далее переходим в административную панель Joomla: «Расширения/ Менеджер модулей/Создать». Даем яркое название модулю, на пример: «Сайт в соц.сетях» или «Мы в соц.сетях»
  2. В представленном окне выбираем тип модуля «HTML-код». А в появившемся визуальном редакторе выбираем иконку «Вставить\Изменить изображение».

Высвечивается форма «Менеджер изображений», активизирующая следующие поля.

Вкладка Изображение
Ссылка - указываем относительное расположение файла с размерами 50х50 пикс, или же адрес хостинга, куда были залиты картинки.
Текст
Заполняем альтернативное название изображения, необходимое для лучшей индексации поисковиками.
Размеры
Прописываем в пикселях. Поле величины начального вида иконки социальной сети можно оставить пустым.
Вкладка Альтернатива
Здесь представлено всего два пункта:

  1. "Курсор мыши -", в окошке прописывается адрес картинки, выбранной ранее. Это изображение возникает, когда мышь находится не над элементом.
  2. «Курсор мыши+», указываем копию введенной картинки, но с увеличенными размерами 80х80 пикс.

Фотография появится, когда указатель мыши коснется вставленной иконки.

Жмем «Сохранить». Проделываем однотипную процедуру для всех имеющихся иконок, в результате получаем вот такую анимацию.

   Создание социальных кнопок на сайте Джумлаshare buttonsкнопка поделитьсяСоциальные кнопки на сайте: как установить кнопки социальных сетей на сайт

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

Далее к каждому изображению необходимо привязать ссылку на социальную сеть.
Для этого кликаем по представленной выше картинке и нажимаем иконку «Вставить/изменить ссылку» на панели визуального редактора, добавляем адрес соответствующей страницы в социальной сети.

После чего, в настройках модуля указываем, на каких страницах и в каком месте на сайте будет выводиться элемент. Жмем «Сохранить».

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

 

Материал подготовлен и предоставлен специалистами  Самоучителя по созданию сайта с нуля.


Admin

Сайт: content-master.org

Виктория Романова

13 комментарии

  • Cierra написал Cierra Четверг, 22 Июнь 2017 07:50

    Цена настойки социальных сетей - достаточно низкая. Можно за копейки заказать. Это для тех, кто ниже спрашивал.


    Пожаловаться
  • Kasha написал Kasha Четверг, 22 Июнь 2017 05:58

    По этой инструкции флеш-кнопки для социальных сетей сделает даже моя девушка)))


    Пожаловаться
  • Kristopher написал Kristopher Четверг, 22 Июнь 2017 01:48

    Ух-ты, какой тут движняк.


    Пожаловаться
  • Selina написал Selina Среда, 21 Июнь 2017 15:40

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


    Пожаловаться
  • Von написал Von Среда, 21 Июнь 2017 07:38

    Сколько будет стоить, чтобы вы сделали мне флеш-кнопки? Я не специалист. боюсь что что-то съедет или сломается.


    Пожаловаться
  • Rolland написал Rolland Среда, 21 Июнь 2017 05:21

    Я разобрался, теперь у меня на сайте оригинальные кнопки. Нравится.


    Пожаловаться
  • Caitlyn написал Caitlyn Вторник, 20 Июнь 2017 22:34

    А у меня с флеш-кнопками что-то не получилось, возможно, в шаблоне не разобрался.


    Пожаловаться
  • Eugenio написал Eugenio Пятница, 16 Июнь 2017 23:48

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


    Пожаловаться
  • Rhea написал Rhea Пятница, 16 Июнь 2017 04:00

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


    Пожаловаться
  • Fermin написал Fermin Понедельник, 12 Июнь 2017 21:45

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


    Пожаловаться
  • Marsha написал Marsha Понедельник, 12 Июнь 2017 06:32

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


    Пожаловаться
  • Alice написал Alice Понедельник, 12 Июнь 2017 06:16

    Спасибо, я долго возилась, искала нормальную и понятную инструкцию, да еще чтобы все совпадало с моей версией joomla


    Пожаловаться
  • Candelaria написал Candelaria Среда, 07 Июнь 2017 10:33

    Привет! Этот пост не может быть написан лучше! Чтение текста напоминает мне о моем предыдущем товарище по комнате! Он всегда говорил об этом. Я отправлю ему эту статью. Уверен, что он с удовольствием прочитает. Большое спасибо за материал!


    Пожаловаться