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

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

下面是代碼，我試過，但我便無法使用自定義圖標

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

來源

2015-04-17 Viraj Kaulkar

請，張貼所有關於你嘗試更改圖標你的代碼。 –

JavaScript代碼：

\t –

編輯您的問題並使用正確的標籤格式化代碼。沒有人會在評論中查看代碼。 –

有款式數量有限，取代默認的標誌，你可以使用Facebook的API選擇。您可以更改「佈局」，而不是「圖標」。其中一種和默認佈局是「icon_link」。

如果你想用你自己的風格/圖片：Can I use the Share Dialog without using the Share Button?

其他簡單，但是原始的方式來做到這一點：

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

來源

2015-04-17 12:38:59 Tymek

謝謝，它爲我工作 –

創建自定義的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

來源

2016-01-23 07:45:33 stakantin

我掙扎了幾個小時做一些針對性的份額只是一個形象和一個彈出，而這僅僅是它爲我工作的方式。

從在上面「Facebook的社交鍵式插件」
崗位將調整的元數據中列出的鏈接按鈕配置以代碼顯示，配置如下
重寫css

`.fb-share-button，.fb_iframe_widget，#facebook { width：70px！important; 身高：70px！重要; margin：0 auto; margin-top：-46px！important; background：url（../ img/like.png）no-repeat！important; background-size：contains！important; }

.fb-share-button a { width：70px; height：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 background：transparent！important; 顏色：透明！重要; border-radius：35px！important; 寬度：70px！重要; 身高：70px！重要; }

路徑[Attributes Style] { fill：transparent！important; }`
刪除錨「共享」（我的佈局只是一個圖片）或者改變它
可選：如果要顯示引用的文本只是將它加入像鏈路結束這個（你也可以更改標題和這樣的鏈接的描述）

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例如：

<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，但沒有奏效。

我希望這可以幫助別人！

Button looked like this

來源

2017-03-21 16:26:15 martina

請確保在這裏包含示例，而不是發佈鏈接（這是違反SO policy_）。試着解釋你做了什麼（_with related snippets_），以及你如何來到這個分辨率 –

對不起，我不知道，我是新來的。感謝提示:)我已經編輯它。我認爲既然它也是這樣，所以不要兩次寫同樣的東西。 – martina

不用擔心，看起來不錯！我只是建議看[StackOverflow Editing Markdown]（http://stackoverflow.com/editing-help）來編輯語法 –

這就是我done.I用在這個頁面中的信息：Make Your Own Social Media Sharing Buttons。但我無法實現彈出窗口中打開共享對話框。在這個頁面中，在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>

來源

2017-03-22 19:56:46 ibomi

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

回答

相關問題