Click here to Skip to main content
15,882,329 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
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
Posted

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

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>


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 :

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

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 ?
 
Share this answer
 
HTML

use meta tags of facebook

HTML
<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>
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900