Показано с 1 по 3 из 3

Тема: Полезная информация при создании своего проекта

  1. #1

    Полезная информация при создании своего проекта

    В этой теме будет информация которая, на мой взгляд, может быть полезной при создании или редактировании своего проекта.
    Сейчас мы рассмотрим правила установки валидных(правильных) ссылок на скайп чат и ICQ в своем проекте, а также социальных сетей, предназначенных в основном для живого общения с представителем проекта.

    Ссылки на Skype

    Простейшая ссылка на Skype имеет вид:
    <a href="skype:SkypeUser">SkypeUser</a>

    Где SkypeUser — нужный ник в Skype. По умолчанию, клик на такой ссылке приведёт к звонку пользователю SkypeUser.

    Но есть ещё несколько несколько режимов вызова, которые можно включать, передавая параметры в ссылке:
    Звонок пользователю Skype-to-Skype или на телефон

    <a href="skype:SkypeUser?call">SkypeUser</a>
    <a href="skype:+12345588?call">+12345678</a>


    Так же, как и в первом примере, звонок пользователю SkypeUser. Второй вариант — звонок из Skype на обычный телефон (вместо +12345588 следует поменять на нужный номер).

    Звонок нескольким пользователям (конференция)

    <a href="skype:SkypeUser1;SkypeUser2;SkypeUser3?call">SkypeUser</a>

    По ссылке осуществится вызов сразу трёх пользователей.
    Добавить пользователя или номер в список контактов

    <a href="skype:SkypeUser?add">SkypeUser</a>
    <a href="skype:+12345678?add">+12345678</a>


    В первом случае в список контактов добавится пользователь с ником SkypeUser, во втором — номер телефона.
    Текстовый чат и мультичат

    <a href="skype:SkypeUser?chat">SkypeUser</a>
    <a href="skype:SkypeUser1;SkypeUser2;SkypeUser3;?chat">SkypeUsers Multichat</a>


    Соответственно, чат с одним и тремя пользователями одновременно.
    Голосовая почта

    <a href="skype:SkypeUser?voicemail">SkypeUser</a>

    Можно оставить голосовое сообщение оффлайн-пользователю.
    Передача файлов по Skype

    <a href="skype:SkypeUser?sendfile">SkypeUser</a>
    <a href="skype:SkypeUser1;SkypeUser2;SkypeUser3;?sendfile">SkypeUsers


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

    <a href="skype:SkypeUser?userinfo">SkypeUser</a>


    Ну, тут, вроде бы, всё понятно.
    Возможные проблемы

    Стоит отметить, что все эти ссылки будут работать, если Skype уже установлен на компьютере пользователя, иначе браузер выдаст предупреждение:


    Код ошибки на W3C



    Чтобы избежать таких ошибок, разработчики предлагают решение в виде JavaScript-сценария (3 KB), который перехватывает ошибку и выводит на сайте всплывающее окно с предложением скачать Skype. Его нужно вставить на странице между тегами <head>…</head>.

    <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>

    В этом случае ещё понадобится повесить на ссылку обработчик вызывающий сценарий, например:

    <a href="skype:SkypeUser?call" onclick="return skypeCheck()">skypeUser</a>

    Кнопочки

    Найти различные варианты стандартных кнопок, с подтверждением онлайн/оффлайн статуса, или создать свой вариант, вы можете на сайте skype.com.
    Разбираемся с ICQ

    С ICQ всё не так просто, из-за того что клиентами могут быть не только ICQ, но и Qip, Miranda, Trillian и другие. Поэтому стандартная ссылка вызова ICQ может не сработать, из-за того, что невозможно заранее предугадать, какой ICQ-клиент установлен на компьютере пользователя.

    <a href="http://www.icq.com/whitepages/cmd.php?uin=UserNumber&action=message">UserNumber</a>

    Стандартный вызов ICQ с сайта. Вместо UserNumber нужно вставить нужный номер.

    Я пользуюсь Qip 2005 (Buid 8070), и эта ссылка вызывала закачку исполняемого php-файла с сервера, а не вызов клиента. Так что вызывать программу непосредственно с сайта не получилось

    Из этой ситуации можно найти два выхода:

    Вызывать по ссылке один из веб-клиентов ICQ (например icq2go.)
    Вывести статус-значок ICQ на сайте и позволить пользователю скопировать номер, расположенный рядом с иконкой, в свой ICQ-клиент, установленный на компьютере.

    Первый вариант показался мне некрасивым из-за дополнительной нагрузки на нервы пользователя и его принудительного редиректа на новый интерфейс, поэтому я не стал особо заострять на нём внимания. А вот для второго статус-значок ICQ можно вывести на сайте так:

    <img src="http://web.icq.com/whitepages/online?icq=UserNumber&img=5" alt="Статус ICQ пользователя UserNumber" />

    Где UserNumber — нужный номер, а &img=27 — вид статус-иконки. Примеры статус-иконок, можно найти в сети или сделать самому. аналогично ховер эффектам.

    Что касается социальных сетей
    Однокласники, Вконтакте, Twitter, Facebook, LiveJournal и другие.

    Для добавления каждой кнопочки приходится перечитать гору документации. Здесь в одной статье я собрал все свои поиски.
    Twitter

    Адрес перехода на Twitter:
    http://twitter.com/timeline/home?sta...__АДРЕС__

    Пример ссылки:

    <a href="#"
    onclick="this.href='http://twitter.com/timeline/home?status='+document.title+'%20'+window.location.href+window.location.hash">
    Добавить в Twitter</a>

    Обратите внимание, что длина сообщения не должна превышать 140 символов.

    “Твит” с ссылкой на страницу и дополнительным текстом.

    <a href="#"
    onclick="this.href='http://twitter.com/share?text='+document.title+'&url='+window.location.href+window.location.hash+'&via=+ссылка на Twitter-аккаунт, например официальный канал сайта">
    Twitter-нуть</a>

    Документация Twitter-API-Documentation, Application-Ideas.

    Иконки:
    Facebook

    Адрес перехода на Facebook:
    http://www.facebook.com/share.php?u=__АДРЕС__

    Пример ссылки:

    <a href="#"
    onclick="this.href='http://www.facebook.com/share.php?u='+window.location.href+window.location.hash">
    Добавить в Facebook</a>

    Если Вы хотите не поделиться, а только Like-нуть то ссылка:

    <a href="#"
    onclick="this.href='http://www.facebook.com/plugins/like.php?u='+window.location.href+window.location.hash">
    Like в Facebook</a>

    Документация Specifying_Meta_Tags, Facebook_Share. Использование meta тегов на странице для задания параметров шаринга описано в Open Graph Protocol.

    Иконки:
    VK- Вконтакте

    Адрес перехода на vk.ru:
    https://vk.com/share.php?url=__АДРЕС...Ы__&image=URL на картинку

    Пример ссылки:

    <a href="#"
    onclick="this.href='https://vk.com/share.php?url='+window.location.href+window.location.hash+'&title='+document.title">
    Добавить в ВКонтакт</a>

    Если на странице присутствуют соответствующие теги, то информация берется из них:

    Заголовок: <meta name="title" content="...">, если его нет то из тега <title>.
    Описание: <meta name="description" content="...">.
    Картинка: <link rel="image_src" href="...">, если его нет, то первые 8 тегов <img src="..."> на странице не превышающие 100x100.

    Документация Документация » Сайты » Публикация ссылок, Документация » Сайты » Open API.

    Иконки:
    LiveJournal

    Адрес перехода на LiveJournal:
    http://www.livejournal.com/update.bm...__АДРЕС__

    Пример ссылки:

    <a href="#"
    onclick="this.href='http://www.livejournal.com/update.bml?mode=full&subject=test&event='+window.location.href+window.location.hash">
    Добавить в LiveJournal</a>

    Документация lj_dev.

    Иконки:
    LinkedIn

    Адрес перехода на LinkedIn:
    http://www.linkedin.com/shareArticle...rce=htmlweb.ru

    Документация docs.
    Buzz

    Адрес перехода на Buzz:
    http://www.google.com/buzz/post?mess...РЕС__&hl=ru

    Документация apis.
    Pinterest Pin

    Поделиться медиа-файлом и URL на Pinterest.

    http://www.pinterest.com/pin/create/...=url&media=URL на картинку или видео&description=Описание страницы сайта

    Surfingbird Surf!

    Поделиться (“расшарить”) URL. Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению.

    http://surfingbird.ru/share?url=url&title=Название страницы сайта&description=Описание страницы сайта&screenshot=URL на изображение со скриншотом сайта

    Яндекс

    Адрес перехода на Яндекс:
    http://wow.ya.ru/posts_share_link.xm...РАНИЦЫ__

    Блок "поделиться"

    Поделиться…

    <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
    <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button"
    data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug">
    </div>

    Документация share, блок "поделиться".

    Иконки:
    Мой мир

    Адрес перехода на Мой мир:
    http://connect.mail.ru/share?url=__А...ion=&imageurl=

    Кнопка "Нравится"
    Нравится

    <a target="_blank" class="mrc__plugin_like_button"
    href="http://connect.mail.ru/share"
    data-mrc-config="{'type' : 'button',
    'width' : '550',
    'show_text' : 'true',
    'show_faces' : 'true'}">Нравится</a>
    <script src="http://cdn.connect.mail.ru/js/loader.js"
    type="text/javascript" charset="UTF-8"></script>

    Система авторегистрации в каталогах

    Документация share, кнопка "нравится".

    Иконки:
    Google Plus

    +1 к URL
    https://apis.google.com/_/+1/fastbutton?url=url &usegapi — Принимает значения true/false. Используется для включения/выключения показа дополнительного окна “расшарить” &size — Принимает значения: small, medium, standard (по умолчанию), tall &hl — Язык, список доступных языков С полным списком принимаемых параметров можно ознакомится — тут https://developers.google.com/+/web/...tag_parameters

    Поделиться (“расшарить”) URL.
    https://plus.google.com/share?url=
    Готовый блок кода:

    <script language="JavaScript"><!--
    function addSoc(a) {
    h=encodeURIComponent(window.location.href+window.location.hash);
    t=encodeURIComponent(document.title);
    if(a==1)h='vkontakte.ru/share.php?url='+h+'&title='+t;
    else if(a==2)h='odnoklassniki.ru/dk?st.cmd=addShare&st.s=1000&st._surl='+h+'&tkn=3009';
    else if(a==3)h='www.livejournal.com/update.bml?mode=full&subject='+t+'&event='+h;
    else if(a==4)h='twitter.com/timeline/home?status='+t+'%20'+h;
    else if(a==5)h='www.facebook.com/share.php?u='+h;
    else if(a==6)h='wow.ya.ru/posts_share_link.xml?url='+h+'&title='+t;
    else if(a==7)h='connect.mail.ru/share?url='+h+'&title='+t+'&description=&imageurl=';
    else if(a==8)h='moikrug.ru/share?ie=utf-8&url='+h+'&title='+t+'&description=';
    else return;
    window.open('http://'+h,'Soc','screenX=100,screenY=100,height=500,width=500,location=no,toolbar=no,directories=no,menubar=no,status=no');
    return false;
    //--></script>
    <a href="#" onclick="return addSoc(1);" title="Twitter"><img src="/pic/ico_twitter.gif" width=8 height=12></a>
    <a href="#" onclick="return addSoc(2);" title="Facebook"><img src="/pic/ico_facebook.gif" width=12 height=12></a>
    <a href="#" onclick="return addSoc(3);" title="Vkontakte"><img src="/pic/ico_vk.gif" width=12 height=12></a>
    <a href="#" onclick="return addSoc(4);" title="Одноклассники.ru"><img src="/pic/ico_odno.gif" width=12 height=12></a>
    <a href="#" onclick="return addSoc(5);" title="livejournal"><img src="/pic/ico_lj.png" width=12 height=12></a>
    <a href="#" onclick="return addSoc(6);" title="Яндекс"><img src="/pic/ico_ya.png" width=12 height=12></a>
    <a href="#" onclick="return addSoc(7);" title="Мой мир"><img src="/pic/ico_mymail.gif" width=12 height=12></a>


    Более сложное, но красивое решение.

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

    Представлено два варианта с иконками:
    16x16:

    12x12:

    <style type="text/css">
    .social-net-buttons-16 a{
    background-image: url(/pic/social-net-16.png);
    width: 16px;
    height: 16px;
    display: block;
    float: left;
    margin-right: 5px;
    }
    .social-net-buttons-16 a.icon-vk-16{background-position: 0 0;}
    .social-net-buttons-16 a.icon-ok-16{background-position: 0 -16px;}
    .social-net-buttons-16 a.icon-lj-16{background-position: 0 -32px;}
    .social-net-buttons-16 a.icon-twitter-16{background-position: 0 -48px;}
    .social-net-buttons-16 a.icon-facebook-16{background-position: 0 -64px;}
    .social-net-buttons-16 a.icon-yaru-16{background-position: 0 -80px;}
    .social-net-buttons-16 a.icon-moimir-16{background-position: 0 -96px;}
    .social-net-buttons-16 a.icon-moikrug-16{background-position: 0 -112px;}
    .social-net-buttons-12 a{
    background-image: url(/pic/social-net-12.png);
    width: 12px;
    height: 12px;
    display: block;
    float: left;
    margin-right: 5px;
    }
    .social-net-buttons-12 a.icon-vk-12{background-position: 0 0;}
    .social-net-buttons-12 a.icon-ok-12{background-position: 0 -12px;}
    .social-net-buttons-12 a.icon-lj-12{background-position: 0 -24px;}
    .social-net-buttons-12 a.icon-twitter-12{background-position: 0 -36px;}
    .social-net-buttons-12 a.icon-facebook-12{background-position: 0 -48px;}
    .social-net-buttons-12 a.icon-yaru-12{background-position: 0 -60px;}
    .social-net-buttons-12 a.icon-moimir-12{background-position: 0 -72px;}
    .social-net-buttons-12 a.icon-moikrug-12{background-position: 0 -84px;}
    </style>
    <div class="social-net-buttons-16">
    <a href="#" onclick="return addSoc(1);" title="Vkontakte" class="icon-vk-16"></a>
    <a href="#" onclick="return addSoc(2);" title="Одноклассники.ru" class="icon-ok-16"></a>
    <a href="#" onclick="return addSoc(3);" title="livejournal" class="icon-lj-16"></a>
    <a href="#" onclick="return addSoc(4);" title="Twitter" class="icon-twitter-16"></a>
    <a href="#" onclick="return addSoc(5);" title="Facebook" class="icon-facebook-16"></a>
    <a href="#" onclick="return addSoc(6);" title="Я.ру" class="icon-yaru-16"></a>
    <a href="#" onclick="return addSoc(7);" title="Мой Мир" class="icon-moimir-16"></a>
    <a href="#" onclick="return addSoc(8);" title="Мой Круг" class="icon-moikrug-16"></a>
    </div>
    <br />
    <div class="social-net-buttons-12">
    <a href="#" onclick="return addSoc(1);" title="Vkontakte" class="icon-vk-12"></a>
    <a href="#" onclick="return addSoc(2);" title="Одноклассники.ru" class="icon-ok-12"></a>
    <a href="#" onclick="return addSoc(3);" title="livejournal" class="icon-lj-12"></a>
    <a href="#" onclick="return addSoc(4);" title="Twitter" class="icon-twitter-12"></a>
    <a href="#" onclick="return addSoc(5);" title="Facebook" class="icon-facebook-12"></a>
    <a href="#" onclick="return addSoc(6);" title="Я.ру" class="icon-yaru-12"></a>
    <a href="#" onclick="return addSoc(7);" title="Мой Мир" class="icon-moimir-12"></a>
    <a href="#" onclick="return addSoc(8);" title="Мой Круг" class="icon-moikrug-12"></a>
    </div>
    </br>


    Яндекс предлагает готовый скрипт для блока "Поделиться". Но незабывайте, что используя скрипты от яндекса, Вы также делитесь с ним всем своим внутренним "хозяйством".
    Последний раз редактировалось Alivan; 02.11.2015 в 05:43.

  2. #2
    Заказывал у админа хайп проект, все было сделано на очень высоком уровне и в срок, хотя если честно я не очень торопился с выполнением заказа, для меня было очень важно качество выполнения.

    Кроме того я узнал, что админ делал очень известные в рунете проекты, которые до сих пор помнят.

  3. #3
    Так это же круто!

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •  

Индекс цитирования