Интеграция виджетов социальных сетей в Oracle ADF (Social Media Integration with Oracle ADF)

Социальные сети сети окончательно и бесповоротно влились в нашу жизнь. И теперь любой сайт имеет их виджеты. В этой небольшой статье, я хочу  объяснить как встраивать виджеты социальных сетей в ADF приложения.

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

Facebook
Linkedin
Twitter (кнопка "Share")
ВКонтакте(VK)
Одноклассники(ok.ru)

В этих разделах обычно находится информация,  и даже код  для встраивания  различных  виджетов. Вот часть из них :

• Авторизация - авторизация  в соц.сети
• Комментарии (Comments)-  виджет позволяет установить на сайт блок для комментирования
• Запись на стене (Embedded Posts) - виджет позволяет встроить на свой сайт отдельную запись или комментарий пользователя соц.сети
• Мне нравится(Like button) - виджет позволяет пользователям выразить отношение к статье одним кликом или поделиться ссылкой на неё с друзьями
• Публикация (Share button) - виджет позволяет быстро разместить ссылку на материал с вашего сайта на странице в соц сети 
• Подписка(Follow) - виджет позволяет подписаться на пользователя или группу

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

В Facebook  формирования кода для разработчика выглядит немного по другому.Вы должны указать адрес с которым хотите поделиться и выбрать тип кнопки:

Если бы у нас была HTML страница, то можно было бы смело вставлять этот код  и кнопки бы появились.  В ADF не поддерживается часть HTML тэгов. Что бы вставить  сформированный ранее код в ADF, нужно использовать тэг  <f:verbatim> . Так же, если в сформированном коде есть ссылка на скрипты, их лучше подключать  при помощи <af:resource> в начале страницы .
Снизу пример кода  формирования кнопок Поделиться(Share it) для Facebook,Twitter и ВКонтакте(VK) :

           <af:resource type="javascript" source="http://vk.com/js/api/share.js?90" />
               <f:verbatim>          
                   <![CDATA[
                         <script>(function(d, s, id) {
                         var js, fjs = d.getElementsByTagName(s)[0];
                          if (d.getElementById(id)) return;
                          js = d.createElement(s); js.id = id;
                          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
                          fjs.parentNode.insertBefore(js, fjs);
                                }(document, 'script', 'facebook-jssdk'));
       document.write(VK.Share.button(false,{type: "round", text: "Поделиться (Share it)", ru: 1}));
       window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
      </script>
      <a class="twitter-share-button"
          href="https://twitter.com/share">
        Tweet
    </a>      
        <div class="fb-share-button" data-href="https://www.facebook.com/berascei/" data-layout="button_count"></div>
                <div id="fb-root"></div>
                ]]>    
                </f:verbatim>
     
Результат: