且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

自定义Facebook分享按钮

更新时间:2023-12-04 22:29:10

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



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>





全部 {{variables}} 将替换为正确的值: fbapp_id 是您的Facebook应用程序的ID。 link_url 是附加到共享内容的链接(如指向您网站的链接), share_message | urlencode 是消息这是共享的,它需要被urlencoded。



这里也有一些css来设计这个真正的facebook按钮:





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





但是我让你随心所欲地定制,重要的部分是标签的href



O等等......



也可以分享一些好的按钮,你可以选择可以在这里定制的不同视觉效果...: addtoany





它能回答你的问题吗?



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

O and something more....

Also some good button to share to anything, and you have a choice of different visuals that can be customized here ... : addtoany


Does it answer your question ?



使用facebook的meta标签



use meta tags of facebook

<meta property="og:site_name" content="sitename" />
      <meta property="og:url" content="your url" />
   <meta property="og:title" content="What an Embarrassing moment? - Sachin Tendulkar" />
   
<meta property="og:image" content="image url" />
      <meta property="og:description" content="Would you believe it!!! What an Embarrassing moment? for Sachin Tendulkar SACHIN TENDULKAR THE MASTER BLASTER, EXPLAINATION review IN 12 min Sachin tendulkar..." />

for more please have look on this link<a href="https://developers.facebook.com/docs/reference/opengraph/object-type/video.other/">metatags</a>