Бутон „Сподели във Facebook“ – как да го поставим в сайта си в съответствие с Open Graph

Предлагам ви няколко готови решения за интеграция на бутон „Сподели във Facebook“ с такъв дизайн, размери и форма, каквито вие прецените, и каквито ще са удачни за визията на страниците от сайта ви.

Вариантите по-долу са два типа: за WordPress и за всички други сайтове.

Ако имате необходимите Open Graph тагове и те работят за сайта ви, можете да добавите много бързо и лесно бутон „Сподели“, който да взима информация от тези тагове:

<div class="fbsharer" onclick='postToFeed(); return false;'>Сподели във Facebook</div>
    <p id='thankyoumsg'></p>
    <script> 
      function postToFeed() {

        // Извикване на Facebook Javascript API
        var obj = {
          method: 'feed',
          link: 'http://ivosiliev.com',
        };

        function callback(response) {
          document.getElementById('thankyoumsg').innerHTML = "Благодаря ти за подкрепата! Споделения пост е с ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }
    </script>

Както виждате по-горе, имате само две неща за променяне:

• link параметъра, където трябва да зададете URL на страницата, която ще се споделя (в момента е зададено http://ivosiliev.com)
• callback параметъра – това е благодарственото съобщение в края на кода. То се появява след като потребителят сподели страницата

Можете да зададете css class с име „fbshare“, чрез който да зададете на този бутон каквито цвят, фон и шрифт поискате – хубавото в случая е, че можете да му направите дизайн по свой вкус. Все пак трябва този дизайн да не ползва лога и copyright елементи на Facebook, така че имайте това предвид.

<p id=’thankyoumsg’></p> – в този таг се появява благодарственото съобщение, което може да промените като дизайн отново чрез CSS

Асинхронно зареждане на javascript от Facebook

За да сработи този бутон ви трябва асинхронно зареждане на Javascript SDK от Facebook (в случай, че нямате). За тази цел във футъра на сайта добавете следния код, в случай, че ви е необходим:

<div id="fb-root"></div><!-- FB изискват тази част, за да си зареждат фреймовете -->

<!-- Не забравайте да промените appID по-долу в кода! -->
<script>(function(d) {
  var js = d.createElement('script');
  js.src = "//connect.facebook.net/bg_BG/all.js#xfbml=1&appId=0000000000000000000000";
  (d.head || d.getElementsByTagName('head')[0]).appendChild(js);
}(document));</script>

В кода по-горе добавете на мястото на многото нули своето appID, което обслужва сайта ви. Също така може да смените езиковата версия, променяйки bg_BG частта с абревиатурата на друг език (за английски е en_US).

За WordPress ползвателите

Кодът за бутон „Сподели“ е почти същия, с разликата, че викаме the_permalink чрез php:

<div class="fbsharer" onclick='postToFeed(); return false;'>Сподели във Facebook</div>
    <p id='thankyoumsg'></p>
    <script> 
      function postToFeed() {

        // Извикване на Facebook Javascript API
        var obj = {
          method: 'feed',
          link: '<?php the_permalink(); ?>',
        };

        function callback(response) {
          document.getElementById('thankyoumsg').innerHTML = "Благодаря ти за подкрепата! Споделения пост е с ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }
    </script>

В случай, че нямате Open Graph Protocol

Ако нямате Open Graph за сайта, и ако не сте сигурни, че имате зареждане на facebook connect през Javascript SDK, ползвате този код, но имайте предвид, че трябва да настроите повече неща в него (описани са в самия код):

<!-- необходимите за FB тагове -->
    <div id='fb-root'></div>
    <script src='http://connect.facebook.net/bg_BG/all.js'></script>
<!-- бутонът за споделяне и съобщението за благодарност -->
<div class="fbsharer" onclick='postToFeed(); return false;'>Сподели във Facebook</div>
<p id='thankyoumsg'></p>
<!-- скриптът за функционалността относно споделянето -->
    <script> 
      FB.init({appId: "ЗАПИШЕТЕ APP ID НА САЙТА", status: true, cookie: true});

      function postToFeed() {

        // Викаме API-тo, но подаваме повече информация за обекта на споделяне
        var obj = {
          method: 'feed',
          link: 'ЗАДАЙТЕ URL, който ще се споделя',
          picture: 'ЗАДАЙТЕ URL ДО СНИМКА, която ще се споделя - минимален размер 180х180 px',
          name: 'ЗАГЛАВИЕ, което ще се споделя',
          caption: 'ПОДЗАГЛАВИЕ, което ще се споделя',
          description: 'КРАТКО ОПИСАНИЕ, което ще се споделя - до 200 символа'
        };

        function callback(response) {
          document.getElementById('thankyoumsg').innerHTML = "Благодаря ти за подкрепата! Споделения пост е с ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Код за WordPress, ако нямате Open Graph

За да сработи по-ефективно кодът, трябва да сте задали featured image (изображение към публикацията), макар, че ако не сте – скрипта дава възможност да зададете твърдо алтернативно изображение за споделяне.
Поставете този код в single.php в темата на WordPress, която ползвате, там, където искате да е бутонът:

<!-- необходимите за FB тагове -->
    <div id='fb-root'></div>
    <script src='http://connect.facebook.net/bg_BG/all.js'></script>
<!-- бутонът за споделяне и съобщението за благодарност -->
<div class="fbsharer" onclick='postToFeed(); return false;'>Сподели във Facebook</div>
<p id='thankyoumsg'></p>
<!-- скриптът за функционалността относно споделянето -->
    <script> 
      FB.init({appId: "ЗАПИШЕТЕ APP ID НА САЙТА", status: true, cookie: true});

      function postToFeed() {

        // Викаме API-тo, но подаваме повече информация за обекта на споделяне
        var obj = {
          method: 'feed',
          link: '<?php the_permalink(); ?>',
          picture: '<?php if ( has_post_thumbnail() ) { ?><?php $thumbnail_id=get_the_post_thumbnail($post->ID, 'thumbnail'); preg_match ('/src="(.*)" class/',$thumbnail_id,$link); echo $link[1]; ?><?php } else { ?>ЗАДАЙТЕ URL ДО СНИМКА, в случай, че не сте задали featured image<?php } ?>',
          name: '<?php the_title(); ?>',
          caption: 'от дата: <?php the_date(); ?>',
          description: '<?php the_content(); ?>'
        };

        function callback(response) {
          document.getElementById('thankyoumsg').innerHTML = "Благодаря ти за подкрепата! Споделения пост е с ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Скриптът споделя следното:

• за снимка – или featured image, който сте задали за съответната публикация, или друго изображение, което може да настроите в самия скрипт
• за заглавие – заглавието на публикацията
• за подзаглавие – датата на създаване на публикацията
• за описание – текста от публикацията, който Facebook ще съкрати до максималния брой позволени символи

Полезен ресурс

Има една доста добра JQuery разработка, която подава и counter за общ брой споделяния. Казва се Sharrre и може да я разгледате тук

Надявам се приложените примери да са полезни за вас и вашите посетители!

Успех!