0

Так что я пытался в течение некоторого времени, чтобы интегрировать этот плагин предоставленный Facebook в Facebook-Social-Button-PluginFacebook Social Button плагин

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

<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> 

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


И да я пытался ставить правильные мета свойства и данные-HREF в соответствии с моей локального хоста, как я строю свой веб-приложение в рамках Laravel.

+0

любые ошибки/предупреждения/информация о в консоли браузера? localhost в порядке, так как вы не просто открываете html-файл в браузере без сервера. но вам обязательно нужно создать приложение для него и включить идентификатор приложения в код js sdk. – luschn

+0

Ах, да, я никогда не думал проверять консоль, поскольку я доверял FB API, но вот проблема: 'GET file: //connect.facebook.net/en_US/sdk.js net :: ERR_FILE_NOT_FOUND' Хотя я удивляюсь, почему, так как я копирую свой код без добавления чего-либо только для проверки. – Drazxier

+0

Код предназначен для использования на веб-сайте, который вы вызываете через 'http: //' или 'https: //' в своем браузере. URL-адрес, начинающийся с '//', относится к протоколу, то есть он завершается с использованием того же протокола, который использовался для запроса самой страницы. Это, конечно, не может работать, если вы тестируете свою страницу через локальную файловую систему, а не «правильно» через (локальный) веб-сервер. – CBroe

ответ

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 

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

+0

Да, я должен был использовать APP и APP ID для подключения к facebook, но об этом ничего не написано в документации. – Drazxier

0

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

<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

Я уже пробовал этот код, и да, он работает, но я хочу реализовать метатеги, чтобы настроить мой шаблон. – Drazxier

2

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

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

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

+0

хорошо ... я не уверен, что вы делаете, но попробуйте на реальном сервере. прочитайте мои правки, вам все равно нужен реальный, чтобы заставить og-теги работать. – luschn

+0

что-то не так с вашим сервером. он должен просто добавить протокол, а не «localhost» тоже: //connect.facebook.net/en_US/sdk.js автоматически станет https://connect.facebook.net/en_US/sdk.js – luschn

+0

Интересно, что случилось, так как я попробовал еще раз, и на этот раз я получаю эту ошибку 'sdk.js: 99 Uncaught Error: недопустимая версия указана'. – Drazxier

1

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

  • Принимая код с кнопки конфигуратора из ссылки, указанной в сообщении на верхнем «Facebook-Social-Button-Plugin»

  • Добавление настроил меня данные ТА показали ниже конфигуратор

  • Переписывая CSS

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

    .fb-share-button a { ширина: 70px; высота: 70px; }

    .fb_iframe_widget span { дисплей: встроенный блок; позиция: относительная; вертикально-выровненный: нижний; ширина: 70px! Important; высота: 70px! Important; text-align: justify; }

    .fb_iframe_widget iframe { позиция: абсолютная; ширина: 70px! Important; высота: 70px! Important; }

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

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

    путь [Атрибуты Стиль] { fill: transparent! Important; } `

  • Удаление«Share»в анкер (мой макет был просто картинка) или изменить его

  • Дополнительно: если вы хотите, чтобы отобразить текст в кавычках просто добавить его в конце ссылки, как это (вы можете также изменить название и описание ссылки подобных)

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

-Дополнительных 2: если вы хотите поделиться/открыть ссылку как всплывающее окно, добавьте window.open OnClick functi на якорь

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

<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> 

(данные размера и данных верстки не важная причина КНБ перезаписана)

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

Я надеюсь, что это поможет кому-то!

Button looked like this

Смежные вопросы