Facebook Social Button插件

Question

所以我一直在嘗試整合Facebook提供的Facebook-Social-Button-Plugin插件

它甚至提到要復制/粘貼給定的代碼，以查看實際效果：-

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

但是它沒有在頁面中顯示任何內容。因此，我是否缺少該插件或該插件有任何問題，例如我需要在運行的Web服務器中而不是在本地主機中獲取它，或者它與在fb中創建應用有關？使用此功能，因為它們的文檔中都沒有提到。

是的，當我在laravel框架中構建Web應用程序時，我已經嘗試根據本地主機放置正確的元屬性和data-href。

Answer 1

您必須在本地主機上啟動服務器或將其置於實時服務器上，否則它將無法正常工作。 注釋中提到的錯誤消息告訴我，您嘗試直接打開HTML文件。

您也可以將https添加到URL（ https://connect.facebook.net ..。），但是我寧願在本地主機上使用服務器。 另外，該頁面必須公開可用以使OG標簽正常工作。 Facebook需要能夠解析其服務器中的數據。

順便說一句，您應該始終使用App並添加App ID-使用生成器中的代碼： https : //developers.facebook.com/docs/plugins/share-button

Answer 2

嘗試了代碼，但出現錯誤VM114 sdk.js:99 Uncaught Error: invalid version specified似乎是他們代碼上的錯誤，或者該示例無意被復制和粘貼，但是如果您通過單擊獲取代碼按鈕，您將得到一個稍微不同的代碼，其中包含具有您的appID和版本的不同URL，如下所示：

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

這似乎有效

Answer 3

不知道這是否有幫助，但是我花了幾個小時來制作一個沒有文本的自定義共享鏈接，只是一個自定義圖像，而工作方式是：

從“ Facebook-Social-Button-Plugin”頂部文章中列出的鏈接中的按鈕配置器中獲取代碼
添加在配置器下方顯示的調整后的元數據
重寫CSS
`.fb-share-button，.fb_iframe_widget，＃facebook {width：70px！important; 高度：70px！重要； 保證金：0自動; margin-top：-46px！important; 背景：url（../ img / like.png）不重復！重要； 背景大小：包含！重要； }
.fb-share-button a {width：70px; 高度：70px； }
.fb_iframe_widget span {display：inline-block; 職位：相對 垂直對齊：底部； 寬度：70px！重要； 高度：70px！重要； 文本對齊：對齊； }
.fb_iframe_widget iframe {位置：絕對； 寬度：70px！重要； 高度：70px！重要； }
.fb_iframe_widget iframe #facebook .inlineBlock {display：inline-block; 縮放：1； 背景：透明！重要； 寬度：70px！重要； 高度：70px！重要； }
._2tga._3e2a {背景：透明的！重要； 顏色：透明！重要； border-radius：35px！important; 寬度：70px！重要； 高度：70px！重要； }
path [屬性樣式] {填充：透明！重要; }`
刪除錨點中的“共享”（我的布局只是一張圖片）或進行更改
可選：如果要顯示帶引號的文本，只需將其添加到鏈接的末尾（這樣，您也可以更改鏈接的標題和描述）

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函數添加到錨點

完整的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，但是沒有用。

希望對您有所幫助！

按鈕看起來像這樣

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>

嘗試這種方式。

Facebook Social Button插件

問題描述

4 個解決方案

解決方案1
2 2016-09-08 15:19:06

解決方案2
1 已采納 2016-09-08 15:15:58

解決方案3
1 2017-03-21 16:05:56

解決方案4
0 2016-09-08 15:13:09

Facebook Social Button插件

問題描述

4 個解決方案

解決方案1 2 2016-09-08 15:19:06

解決方案2 1 已采納 2016-09-08 15:15:58

解決方案3 1 2017-03-21 16:05:56

解決方案4 0 2016-09-08 15:13:09

解決方案1
2 2016-09-08 15:19:06

解決方案2
1 已采納 2016-09-08 15:15:58

解決方案3
1 2017-03-21 16:05:56

解決方案4
0 2016-09-08 15:13:09