如何制作自定义分享按钮 [英] How to make custom share buttons

问题描述

我一直想要在我的应用程序中添加Facebook分享按钮，但是我遇到的问题是它们看起来都不一样。我看到像 这个 具有自定义设计的共享按钮。有没有人知道一个好的教程，还是有任何指针，关于如何解决这个问题？

解决方案

，这里是我的自定义分享按钮的HTML。

 < div id =share_div> 
< div id =share> 
< a class =clickhref =http://www.facebook.com/dialog/feed?app_id= {{fbapp_id}}& link = {{link_url}}& message = { {share_message | urlencode}}& display = popup& redirect_uri = {{link_url}}target =_ blank> 
分享
< / a> 
< / div> 
< / div> 
  

所有的{{variables}}将被正确的值替换：
fbapp_id 是您的Facebook应用程序的ID。
link_ur l是附加到共享内容的链接（如您的网站的链接）
和 share_message | urlencode 是被共享的消息，需要被urlencoded。

这里也有一些CSS样式，就像一个真正的Facebook按钮：

  #share {
 border：1px solid＃0D386F; 
 background-color：＃5D7DAE; 
 height：24px; 
 width：100px; 
} 
 
 #share a.click {
 font-size：13px; 
 font-weight：bold; 
 text-align：center; 
 color：#fff; 
 border-top：1px solid＃879DC2; 
 background-color：＃5D7DAE; 
 padding：2px 10px; 
 cursor：pointer; 
 text-decoration：none; 
 width：80px; 
 display：block; 
} 
  

但是，我可以让您随意自定义，重要的是标签的href

是否回答您的问题？

I have always wanted to add Facebook share buttons to my applications, but the problem that I have is that they all look different. I see sites like this that have custom designed share buttons. Does anybody know a good tutorial, or have any pointers, about how to tackle this?

解决方案

Sharing something one facebook is quite easy, here is the HTML for my custom share button.

<div id="share_div">
    <div id="share">
        <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
            Share
        </a>
    </div>
</div>

Where all the {{variables}} are to be replace by correct value : fbapp_id is the id of your facebook application. link_url is a link attached to the shared content (like a link to your site) and share_message|urlencode is the message that is shared and it needs to be urlencoded.

Also here some css to style this like a real facebook button :

#share {
    border:1px solid #0D386F;
    background-color:#5D7DAE;
    height:24px;
    width: 100px;
}

#share a.click {
    font-size:13px;
    font-weight:bold;
    text-align:center;
    color:#fff;
    border-top:1px solid #879DC2;
    background-color:#5D7DAE;
    padding: 2px 10px;
    cursor: pointer;
    text-decoration:none;
    width:80px;
    display:block;
}

But I let you the pleasure of customizing as you like, the important part being the href of the a tag

Does it answer your question ?

这篇关于如何制作自定义分享按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！