自定义Facebook分享按钮 [英] customize facebook share button

问题描述

大家好



i想要自定义facebook分享按钮，我从facebook开发者网站获得它



[ ^ ]



它的工作但是我想选择图像和我分享的页面描述



请帮我按钮反映我的共享页面的描述和图像

Hi all

i want to custom facebook share button that i had got it from facebook developer site

[^]

its work but i want to choose the image and description of the page i share it

please help me to make the button reflects the description and image of my shared page

推荐答案

分享一个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>

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