Плагин Facebook Social Button

Question

Итак, я уже некоторое время пытаюсь интегрировать этот плагин, предоставленный facebook, по адресу Facebook-Social- Кнопка-плагин

И там даже упоминалось, что нужно скопировать / вставить данный код, чтобы увидеть его в действии: -

<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Your Website Title" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your share button code -->
<div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
</div>

</body>
</html>

Но на странице ничего не отображается Так что мне что-то не хватает или есть какие-то проблемы с этим плагином, например, мне нужно получить его на работающем веб-сервере, а не на каком-то локальном хосте, или это связано с созданием приложения в fb для использования этой функции, поскольку ни один из этого не упоминается в их документации.

И да, я попытался установить правильные мета-свойства и data-href в соответствии с моим локальным хостом, поскольку я создаю свое веб-приложение в среде laravel.

javascript facebook facebook-graph-api facebook-javascript-sdk social-networking

0

slapbot 8 Сен 2016 в 18:03

Answer 1

Пробовал код, и я получаю сообщение об ошибке VM114 sdk.js:99 Uncaught Error: invalid version specified кажется, это ошибка в их коде, или пример не предназначался для копирования и вставки, однако, если вы сгенерируете код, нажав кнопку получения кода, вы получите немного другой код, который содержит другой URL-адрес с вашим appID и версией выглядит примерно так:

 connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXX

Это, кажется, работает

1

StackOverMySoul 8 Сен 2016 в 15:15

Answer 2

Вы должны запустить сервер на локальном хосте или поставить его на рабочий сервер, иначе он не будет работать. Сообщение об ошибке, упомянутое в комментариях, говорит мне, что вы пытались просто открыть файл HTML напрямую.

Вы также можете добавить https к URL-адресу (https://connect.facebook.net ...), но я бы предпочел использовать сервер на локальном хосте. Кроме того, страница ДОЛЖНА быть общедоступной, чтобы теги OG работали. Facebook должен иметь возможность анализировать данные со своих серверов.

Кстати, вы всегда должны использовать приложение и добавлять идентификатор приложения - используйте код из генератора: https://developers.facebook.com/docs/plugins/share-button

2

luschn 8 Сен 2016 в 15:22

Answer 3

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

Извлечение кода из конфигуратора кнопок по ссылке, указанной в сообщении сверху "Facebook-Social-Button-Plugin"
Добавление скорректированных метаданных показано под конфигуратором
Переписывая CSS

`.fb-share-button, .fb_iframe_widget, #facebook { ширина: 70 пикселей! важно; высота: 70px! важно; поле: 0 авто; margin-top: -46px! важно; background: url (../ img / like.png) no-repeat! важный; background-size: содержать! важный; }

.fb-share-button a { ширина: 70 пикселей; высота: 70 пикселей; }

.fb_iframe_widget span { дисплей: встроенный блок; положение: относительное; выравнивание по вертикали: снизу; ширина: 70 пикселей! важно; высота: 70px! важно; выравнивание текста: выравнивание; }

.fb_iframe_widget iframe { положение: абсолютное; ширина: 70 пикселей! важно; высота: 70px! важно; }

.fb_iframe_widget iframe #facebook .inlineBlock { дисплей: встроенный блок; зум: 1; фон: прозрачный! важный; ширина: 70 пикселей! важно; высота: 70px! важно; }

._2tga._3e2a { фон: прозрачный! важный; цвет: прозрачный! важный; border-radius: 35px! важный; ширина: 70 пикселей! важно; высота: 70px! важно; }

путь [Стиль атрибутов] { заполнить: прозрачно! важно; } `
Удаление «Поделиться» в привязке (мой макет был просто картинка) или изменение его
Необязательно: если вы хотите отобразить цитируемый текст, просто добавьте его в конец ссылки, как это (вы также можете изменить заголовок и описание ссылки, как это)

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"e=here+comes+the+quote

-Опциональный 2: если вы хотите поделиться / открыть ссылку как всплывающее окно, добавьте функцию onclick window.open к привязке

Пример полного div с всплывающим окном и цитатой без текста:

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse&quote=here+comes+the+quote','popup','width=600,height=500'); return false;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse&quote=here+comes+the+quote"></a></div>

(размер данных и расположение данных не важны, потому что CSS перезаписан)

Я уверен, что есть лучшие способы сделать это, но я не смог найти ни одного! Я пытался с FB.ui, но это не сработало.

Надеюсь, это кому-нибудь поможет!

Кнопка выглядела так

1

martina 21 Мар 2017 в 16:05

Answer 4

Если вы добавите данные и нажмете кнопку «Получить код», они вернут эту разметку.

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Share</a></div>

Попробуйте так.

0

Fábio Santos 8 Сен 2016 в 15:13

Плагин Facebook Social Button

4 ответа

Похожие вопросы

Новые вопросы

javascript