Кнопку поделиться будем вставлять в несколько этапов.
1. Рассказать фейсбуку про ваш сайт и получить APP ID
Сначала нужно добавить приложение в фейсбук и получить его id. Добавить приложение можно на странице https://developers.facebook.com/apps/
Нажимаем там на кнопку AddNweApp, в открывшемся окне выбираем веб-сайт, далее вводим имя приложения (ЛЮБОЕ, какое нравится, не обязательно повторяющее название сайта) и заполняем все поля. Обязательно заполняем поле с e-mail адресом, иначе приложение будет недоступно широкой публике.
После этого переходим на страницу Status&Review и активируем приложение. Кружочек рядом с заголовком закрасится в зеленый цвет.
Получить APP ID можно, перейдя на страницу Dashboard (1-ый пункт в меню слева)
2. Получить свой User ID в фейсбуке
Если Вы не заморачивались с красивым адресом, свой id вы легко возьмете из адреса своей страницы:
https://www.facebook.com/profile.php?id=100001234567890&fref=ts
Тут id такой: 100001234567890
Если же адрес Вашей страницы выглядит так https://www.facebook.com/mypage
где mypage - это название страницы, которое вы задали, получить id будет посложнее.
Нажмите на треугольничек на верхней синей полоске и выберите "Настройки":
В меню слева выберите "Приложения". Наведите мышь на любое приложение, появится карандашик - щелкните по нему, откроется окно для редактирования приложения. В самом низу списка Вы найдете свой id
Альтернативный вариант: воспользоваться сервисом: http://findmyfbid.com
В сети можно найти и такой способ: перейти по ссылке http://graph.facebook.com/mypage
Но у меня этот способ не сработал.
3. Вставляем мета-тэги фейсбука
<meta property="fb:admins" content="- тут ваш id -"/> <meta property="fb:app_id" content="- тут номер приложения -"/>
Первый из этих тэгов позволит модерировать комментарии фейсбука на страницах вашего сайта.
Есть еще мета-тэги:
<meta property="og:type" content="profile"/> <meta property="profile:first_name" content="Имя"/> <meta property="profile:last_name" content="Фамилия"/> <meta property="profile:username" content="Ник"/> <meta property="og:title" content="Название страницы"/> <meta property="og:description" content="Описание"/> <meta property="og:image" content="https://website.com/image250X250.png"/> <meta property="og:url" content="http://www.site.com"/> <meta property="og:site_name" content="Название сайта"/> <meta property="og:see_also" content="http://www.website.com"/>
Они позволяют выбрать правильное содержимое на странице для отображении в фейсбуке, например, при нажатии на "Поделиться в фейсбуке".
Но эти тэги хороши для стационарных страниц. Для страниц с динамическим содержимым, особенно если содержимое формируется ява-скриптом, эти мета-тэги не очень подходят. Пример такой страницы: он-лайн тест.
Правильность разметки можно протестировать на странице https://developers.facebook.com/tools/debug
4. Собственно код кнопки
Вариант 1. Использование диалога share
Этот способ позволяет постить в группы, чат, а также делиться материалом у себя на странице.
Необходимо создать ссылку, оформить ее как кнопку и задать ей
https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
Параметры:
display=popup или page (всплывающее окно или страница)
href - ссылка на страницу, которой надо поделиться
rect_uri - куда перенаправлять пользователя, после того, как он поделился материалом в фейсбуке.
Чтобы оформить то, как материал будет выглядеть в фейсбуке, необходимо использовать og-тэги (open graph meta tags ) - см. выше.
Вариант 2. Использование диалога feed
Постить можно только в ленту, а не в группу или чат. Но зато можно явно задать внешний вид поста.
Пример:
$name=urlencode(iconv('windows-1251', 'UTF-8', $row['title']));
$caption = urlencode(iconv('windows-1251', 'UTF-8', 'Блог питомника АСИН'));
$description = urlencode(iconv('windows-1251', 'UTF-8',strip_tags($row['post_txt'])));
$link = urlencode("http://asin-abik.ru/Blog/fullpost.php?id=".$id);
$pattern = "/<img\ssrc=\"([^\"]+)\"[^>]*>/i";
$picture = "";
if(preg_match($pattern, $row['post_txt'], $matches)) $picture = urlencode("http://asin-abik.ru/Blog/".$matches[1]);
<a class="facebookpubl" href="https://www.facebook.com/dialog/feed?app_id=147550538768324&display=page&link=<?php echo $link; ?>&redirect_uri=<?php echo $link; ?>&name=<?php echo $name; ?>&caption=<?php echo $caption; ?>&description=<?php echo $description; ?>&picture=<?php echo $picture; ?>" target="_blank">Опубликовать у себя в Facebook</a>
Параметры:
name - заголовок
caption анкор ссылки на оригинальный материал
description - аннотация
picture - ссылка на картинку
link - url материала, которым делятся
source - ссылка на swf или mp3 файл. Необходимо задать и picture - картинка будет замещать видио или аудио-файл.
to, from - в чью ленту и кто постит. По умолчанию пользователь постит в свою и от своего имени.
См. документацию
https://developers.facebook.com/docs/sharing/web
https://developers.facebook.com/docs/sharing/reference/share-dialog
https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5
=============================================================
Когда результат формируется динамически и записывается в div c #my_quiz-res
$quiz_name = urlencode('Викторина: '.$this->quiz->getName());
$quiz_description = urlencode('Мой результат: ');
$quiz_url = urlencode(get_permalink());
$quiz_image = urlencode('http://best-moscow-guide.ru/wp-content/themes/moscow/images/m5.jpg');
?>
<a id="fbButton" onclick="var winhref='https://www.facebook.com/dialog/feed?app_id=914852551916711&display=page&link=<?php echo $quiz_url; ?>&redirect_uri=<?php echo $quiz_url; ?>&name=<?php echo $quiz_name; ?>&picture='+$('#picture_for_socnet_share').text()+'&description=<?php echo $quiz_description; ?>'+$('#my_quiz-res').text(); window.open(winhref,'_blank'); return false;" href="#"><i class="fa fa-facebook"></i>Facebook</a>
Кнопка "Поделиться в контакте" выглядит аналогично:
<a id="vkButton" onclick="var winhref='http://vkontakte.ru/share.php?url=<?php echo get_permalink(); ?>&noparse=true&title=<?php echo $quiz_name; ?>&description=<?php echo $quiz_description; ?>'+$('#my_quiz-res').text()+'&image='+$('#picture_for_socnet_share').text(); window.open(winhref,'_blank'); return false;" href="#"><i class="fa fa-vk"></i>В Контакте</a>
5. Вариант, часто встречающийся в сети, не работает:
<?php
$title=urlencode('Заголовок вашей вкладки или веб-страницы');
$url=urlencode('http://bit.ly/FBshareArticle');
$summary=urlencode('Текстовое описание, которое вкратце рассказывает, зачем пользователям переходить по этой ссылке.');
$image=urlencode('http://www.masterskayafanstranic.com.ua/wp-content/uploads/2012/05/share-icon.png');
?>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title; ?>&p[summary]=<?php echo $summary; ?>&p[url]=<?php echo $url; ?>&&p[images][0]=<?php echo $image; ?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)">
<img src="http://www.masterskayafanstranic.com.ua/wp-content/uploads/2012/05/button4.png" />
</a>
Оставить комментарий