Monday, November 11, 2013

Customize facebook's sharer.php

Facebook Share button, or commonly known as sharer.php is the easiest way to share link on Facebook. It is easy to use. You don't need an App ID, and you don't need to include any Facebook dependencies.

Simply : 
http://www.facebook.com/sharer.php?u=http://yoursite.com&t=Here's my customized title

I could dynamically generate customized og tag, but due to Facebook caching mechanism there's almost no point of doing that.

Customize :
http://www.facebook.com/sharer.php?s=100
&p[url]=http://yoursite.com
&p[images][0]=http://yoursite.com/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary


open-graph-protocol-examples:
https://github.com/niallkennedy/open-graph-protocol-examples


Debugger:
Debug your url and check everything fine .
Input URL, Access Token, or Open Graph Action ID

https://developers.facebook.com/tools/debug/

og tags:
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>Structured audio property</title>
<meta property="og:title" content="Structured audio property">
<meta property="og:site_name" content="Open Graph protocol examples">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<link rel="canonical" href="http://examples.opengraphprotocol.us/audio-url.html">
<meta property="og:url" content="http://examples.opengraphprotocol.us/audio-url.html">
<meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/50.png">
<meta property="og:image:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/images/50.png">
<meta property="og:image:width" content="50">
<meta property="og:image:height" content="50">
<meta property="og:image:type" content="image/png">
<meta property="og:audio:url" content="http://examples.opengraphprotocol.us/media/audio/250hz.mp3">
<meta property="og:audio:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3">
<meta property="og:audio:type" content="audio/mpeg">
</head>

No comments:

Post a Comment