如何制作自定义共享按钮

时间:2011-04-22 07:18:16

标签: facebook

我一直想在我的应用程序中添加Facebook共享按钮,但我遇到的问题是它们看起来都不一样。我看到像this这样的网站有自定义设计的共享按钮。有没有人知道如何解决这个问题的好教程,或者有任何指示?

1 个答案:

答案 0 :(得分:10)

分享一个Facebook很容易,这是我的自定义共享按钮的HTML。

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

所有{{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

它能回答你的问题吗?