<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Murten Saerbi&#039;s blog &#187; share images on facebook</title>
	<atom:link href="http://www.murtensaerbi.be/blog/index.php/tag/share-images-on-facebook/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.murtensaerbi.be/blog</link>
	<description>Maarten Serneels, Actionscript 3 and golden oldies.</description>
	<lastBuildDate>Mon, 24 Oct 2011 16:25:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Share on facebook without fbconnect: fb sharer</title>
		<link>http://www.murtensaerbi.be/blog/index.php/2009/10/08/the-great-facebook-sharing-tutorial-part-i-facebook-sharer/</link>
		<comments>http://www.murtensaerbi.be/blog/index.php/2009/10/08/the-great-facebook-sharing-tutorial-part-i-facebook-sharer/#comments</comments>
		<pubDate>Wed, 07 Oct 2009 22:39:12 +0000</pubDate>
		<dc:creator>Murten</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[ExternalInterface]]></category>
		<category><![CDATA[facebook connect api]]></category>
		<category><![CDATA[share images on facebook]]></category>

		<guid isPermaLink="false">http://www.murtensaerbi.be/blog/?p=268</guid>
		<description><![CDATA[The intro: Let&#8217;s say you do not want to incorporate the whole facebook connect as3 lib (check my excellent copy of an excellent post by Steven Van Hissenhoven) in your flash project but do want people to interact with facebook through your website. For instance, by posting pictures or generated images from within flash. Totally [...]]]></description>
			<content:encoded><![CDATA[<p><strong>The intro:</strong><br />
Let&#8217;s say you do not want to incorporate the whole facebook connect as3 lib (check my <a href="http://www.murtensaerbi.be/blog/index.php/2009/10/07/steven-van-hissenhoven-as3-and-facebook-connect/">excellent copy</a> of an excellent post by <a href="http://www.stevenvh.be/blog/">Steven Van Hissenhoven</a>) in your flash project but do want people to interact with facebook through your website.</p>
<p>For instance, by posting pictures or generated images from within flash. Totally doable and easy, even! Just use facebooks <a href="http://www.facebook.com/sharer.php">sharer</a> page!<br />
<br/><br />
<strong>The (javascript) code:</strong><br />
First you need a javascript function that can trigger the sharer. I always go for a popup, but you can ofcourse open the sharer anyway you want. A fairly easy to understand javascript snippet I made that looks like this should be pumped somewhere in your html:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> facebookme<span style="color: #009900;">&#40;</span>pictid<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	url <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;http://www.your-url-here.com/images/&quot;</span> <span style="color: #339933;">+</span> pictid<span style="color: #339933;">;</span>
	title <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Add a picture to facebook!&quot;</span><span style="color: #339933;">;</span>
	window.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://www.facebook.com/sharer.php?u='</span><span style="color: #339933;">+</span>encodeURIComponent<span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;t='</span><span style="color: #339933;">+</span>encodeURIComponent<span style="color: #009900;">&#40;</span>title<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'sharer'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'toolbar=0,status=0,width=626,height=436'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><br/></p>
<p>This function can be addressed out of flash by the External Interface class and expects a pictid, basically the name of the image you want to share on facebook. This can be a generated image or one already on the server. Like I said: the function is pretty simple: it only expects an image and will open a sharer popup that will show you the image and the page title. </p>
<p>Now, let&#8217;s assume you want to have a description. A little more tricky, but still quite easy: Facebook has certain meta tags that you can use to populate the sharer. It will automatically pick these things up if they are present in your html page:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;meta name=&quot;title&quot; content=&quot;Your page title here.&quot; /&gt;
&lt;meta name=&quot;description&quot; content=&quot;A description here. Can be quite long even and will appear under the title next to the picture if provided.&quot; /&gt;
&lt;link rel=&quot;image_src&quot; href=&quot;thumbnail_image&quot; / &gt;</pre></div></div>

<p><br/></p>
<p>This works great and could be a nice add-on for your website that on top of that is supereasy to do and requires no facebook connect api knowledge at all. All you need to do now is the flash part which is even more easy!<br />
<br/><br />
<strong>the (flash) code:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">external</span>.<span style="color: #006600;">ExternalInterface</span>;
&nbsp;
ExternalInterface.<span style="color: #0066CC;">call</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;facebookme&quot;</span>, picture_path_here<span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p><br/></p>
<p>&#8220;facebookme&#8221; is the name of our javascript function we placed in the html. &#8220;picture_path_here&#8221; is a variable that holds something like &#8220;2.jpg&#8221; (or the full url to the image, but then be sure to change the javascript function!). Also don&#8217;t forget to import the ExternalInterface class which can be found in the &#8220;external&#8221; package.<br />
<br/><br />
<strong>The outro:</strong><br />
Boom, that&#8217;s it. It&#8217;s a nice step to loads more posts about facebook and flash even if I say so myself. Now go forth once again, young flash vampires!<br/></p>
]]></content:encoded>
			<wfw:commentRss>http://www.murtensaerbi.be/blog/index.php/2009/10/08/the-great-facebook-sharing-tutorial-part-i-facebook-sharer/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

