Facebook Sharer

Question

I am trying to set up facebook sharer.php Can someone give me some direction on this. How do I get an image and text to appear? I am trying to achieve a similar effect to the share link on espn.com.

Many Thanks

Answer 1

Did you try the documentation?

http://developers.facebook.com/docs/share

Placing meta tags in your page's head makes the right thumbnail and description show up in that dialog. As a bonus, if someone just pastes a link to your page in their Facebook status, it'll work there too.

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Answer 2

Not sure if it is this kind of sharing you want to achieve. I'll toss it out for you anyways.

Text link:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>

Small icon and text:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>

Icon only:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; text-decoration:none; } </style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a> 

Answer 3

Just a note on FB images you want to appear in the 'like'. They must NOT have spaces in the image name, otherwise the image will not come across to FB. Took me a while to work out why I couldn't get images across using the FB link debugger ( https://developers.facebook.com/tools/debug ), and the error messages were of no help at all. But removing the spaces from the image name solved the problem.

If you can't get your images to display in FB, despite using the og:image tags correctly etc. check the image name to ensure it has no spaces (other non [A-Za-z0-9_-] may not work too).