我可以為Facebook分享按鈕添加自定義Facebook圖標嗎？

Question

我可以為Facebook分享按鈕添加自定義Facebook圖標嗎？

以下是我試過的代碼，但我無法用自定義圖標替換默認徽標

<div class="fb-share-button"
  data-href="<?php echo SITE_URL;?>product/<?php echo $this->uri->segment(2);?>"  
  data-layout="link"></div>

Answer 1

樣式數量有限，您可以使用Facebook API進行選擇。 您可以更改“布局”，而不是“圖標”。 其中一個默認布局是“icon_link”。

如果您想使用自己的樣式/圖像： 我可以在不使用共享按鈕的情況下使用共享對話框嗎？

其他簡單但原始的方法：

<a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com">
    <img src="./youimage.png" alt="share icon">
    Link text
</a>

Answer 2

這就是我所做的。我使用了這個頁面上的信息：創建自己的社交媒體共享按鈕 。但是我無法在彈出窗口中打開共享對話框。 在這個頁面中，在Martina的回答中（可選2）我找到了解決方案。謝謝。我希望這個syntesis對人們有所幫助。

 <ul class="sharing-buttons"> <li> <a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdengdeney.blogspot.com.tr%2F&amp;src=sdkpreparse','popup','width=600,height=500'); return false; " href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdengdeney.blogspot.com.tr%2F&amp;src=sdkpreparse"> <img src=" https://drive.google.com/uc?id=0B6hjXoGtqTbPRDN0cG9BVnozdEk" border="0" /></a> </li> </ul> 

Answer 3

創建自定義html元素並通過單擊觸發facebook共享對話框。

<a href="#" class="facebook-bg"><i class="fa fa-facebook"></i></a>

$('a.facebook-bg').click(function(event){
        event.preventDefault();
        event.stopPropagation();
        FB.ui({
            method: 'share',
            href: 'http://url_of_your_page'
        }, function(response){});
    });

不要忘記以前加載fb SDK。

https://developers.facebook.com/docs/sharing/reference/share-dialog

Answer 4

我只是花了好幾個小時才用自己的圖像和彈出窗口進行自定義共享，這是它對我有用的唯一方式。

• 從頂部“Facebook-Social-Button-Plugin”帖子中列出的鏈接中獲取按鈕配置器中的代碼

• 添加調整后的元數據顯示在配置器下方

• 重寫CSS

  `.fb-share-button，.fb_iframe_widget，＃facebook {width：70px！important; 身高：70px！重要; 保證金：0自動; margin-top：-46px！important; background：url（../ img / like.png）no-repeat！important; background-size：包含！important; }

  .fb-share-button a {width：70px; 身高：70px; }

  .fb_iframe_widget span {display：inline-block; 位置：相對; vertical-align：bottom; 寬度：70px！重要; 身高：70px！重要; text-align：justify; }

  .fb_iframe_widget iframe {position：absolute; 寬度：70px！重要; 身高：70px！重要; }

  .fb_iframe_widget iframe #facebook .inlineBlock {display：inline-block; zoom：1; 背景：透明！重要; 寬度：70px！重要; 身高：70px！重要; }

  ._2tga._3e2a {背景：透明！重要; 顏色：透明！重要; border-radius：35px！important; 寬度：70px！重要; 身高：70px！重要; }

  路徑[屬性風格] {填充：透明！重要; }`

• 刪除錨點中的“共享”（我的布局只是一張圖片）或更改它

• 可選：如果要顯示帶引號的文本，只需將其添加到鏈接的末尾，就像這樣（您也可以更改鏈接的標題和說明）

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，但它沒有用。

我希望這有助於某人！

按鈕看起來像這樣