Adobe Muse и социальные сети: Как сделать красивую кнопку «поделиться»

Adobe Muse и социальные сети: Как сделать красивую кнопку "поделиться"
Adobe Muse и социальные сети: Как сделать красивую кнопку «поделиться»

Каждый разработчик сайтов в Adobe Muse знает о наличии в библиотеке мини приложений функционала для обеспечения взаимодействия с социальными сетями. Однако этот стандартный функционал не безгрешен и имеет ряд недостатков. А именно:

  • В библиотеке мини приложений практически не представлены социальные сети Рунета. Нет там ни Одноклассников, ни В Контакте. А все мы русские люди  (не подумайте плохого украинцев я тоже отнес к русским) так к ним привыкли, что не представляем себя без них в Интернете.
  • Имеющиеся кнопки выглядят стандартно и непривлекательно. Что дала социальная сеть, то и есть. Причем у каждой социальной сети свой дизайн кнопки, который ну никак не вписывается в дизайн Вашей страницы. Страницы с такими кнопками выглядят шаблонно и непривлекательно.
  • В режиме дизайна страницы блоки мини приложений выглядят совсем не так, как они будут выглядеть в действительности на странице. Это добавляет разработчику лишние неудобства и приводит к дополнительным затратам времени на разработку, верстку и дизайн.

Так что же с этим делать?

Вот я и задался этим вопросом и вот какой простой альтернативный способ получить туже функциональность нашел.  Этот способ лишен всех перечисленных Выше недостатков.  Суть его заключается в том, что практически каждая социальная сеть, включая Рунетовские, имеет функционал кнопки “Поделиться”, вызываемый через обычную ссылку. При этом никаких регистраций и прочей ерунды не требуется Например для Фейсбука эта ссылка выглядит так:

1
https://www.facebook.com/sharer.php?u=ССЫЛКА НА ВАШ САЙТ ИЛИ СТРАНИЦУ

А раз так, то имеется простая возможность привязать такую ссылку практически к любой кнопке на странице в Adobe Muse. Т.е. Дизайн мы определяем какой хотим, исходя из интересов нашего сайта, а функционал привязываем от социальной сети. Например вот так выглядят основные кнопки “Поделиться” на одном из моих сайтов

Adobe Muse и социальные сети: Как сделать красивую кнопку "поделиться"
Adobe Muse и социальные сети: Как сделать красивую кнопку «поделиться»

А вот и соответствующие этим кнопкам ссылки для репостов. Для примера я вставил ссылку на один из моих мастер-классов. Сыылки рабочие. попробуйте и убедитесь сами как это просто работает:

Однако, если вы попробуете привязать эти ссылки напрямую к кнопкам, используя стандартные возможности Adobe Muse, то окно “Поделиться”  будет открываться либо в соседней вкладке, либо вместо Вашей страницы. Для того, чтобы эти ссылки открывались во всплывающем окне, придется их слегка изменить и привести к виду:

1
javascript:musePopUp<span style="color: #0000ff;">(‘https://www.facebook.com/sharer.php?u=ССЫЛКА НА ВАШ САЙТ ИЛИ СТРАНИЦУ’)</span>

 

Что за секретная функция musePopUp?

Ничего секретного в этой функции нет. Выполняет она одно простейшее действие. Вызывает всплывающее окно и открывает в нем нашу ссылку на страницу “Поделиться”. Если Вы достаточно опытный программист, то такую функцию напишите довольно быстро. Эта функция внедряется в код Вашей страницы и все начинает работать.

Но я не буду Вас заморочивать такими сложностями как программирование на Ява скрипте. Просто вставьте этот код в секцию HEAD вашей страницы и будет Вам счастье

1
2
3
4
5
6
7
<script language="JavaScript">
function musePopUp(url) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=650,height=650');");
}
</script>

На этом все.  С уважением, Сергей Лукьянов.

P.S. Не забудьте прокомментировать эту статью и сообщить о ней друзьям в социальных сетях. Кнопочки ниже…

Серия виджетов «Сайт без программиста»

Серия виджетов "Сайт без программиста"

Оригинальная серия виджетов «Сайт без программиста» для Adobe Muse включает в себя:

  • Виджет «Видеофон страницы». Позволяет поставить любое видео на фон Вашей страницы в Adobe Muse
  • Виджет «Open Graph протокол». Позволяет самостоятельно определять как ссылка на ваш сайт будет отображаться в социальных сетях
  • Набор акционных таймеров. Таймеры помогут Вам создать любую акцию или распродажу на Вашем сайте Adobe Muse

Только для читателей моего блога установлена скидка 20% на все виджеты этой серии.

Купить всю серию со скидкой 20%!

Поторопитесь! Скидка не будет продолжаться вечно.