Adding Share Buttons to your Site & Flash Files
Sharing is caring and if you've ever wondered how to spread messy, digital love all over the internet, wonder no more. I'm going to show you how to implement share buttons for your PHP and Flash content for Facebook, Twitter, Google Buzz, Digg, Delicious and StumbleUpon.
Why those particular 6? While you could be a social whore and implement everything under the sun, generally you only need to cover a few major ones. The chances of someone not using one of the above 6 (which are just my personal choice btw) is low enough for me to live with. Plus, my motivation died while testing Digg, so 6 is enough.
On a side note, most sites will provide you code and images to automatically implement sharing. The images used in this tutorial were the result of some searching on Google (look for press packs on the respective sites for high-quality logos or hit up Wikipedia) and a few minutes in Photoshop. If you want to use the ones here, you can download them here.
On another side note, for all the Flash examples, assuming that m_url, m_title and m_image are all Strings containing the page URL, title and an image URL that you want to use.
Why share?
Because people thinking that your opinion matters is so cool. You can also use it to get into VIP clubs or when there's a big line.
Also, if you're planning on making a hit Flash game, making it easy for people to share it (like, say, a link inside the SWF) makes it easier for you to get rich. This becomes important if your game is passing through a distribution site where it could potentially be on thousands of sites.
Getting your URL
First things first – finding out what page you're on. If you use Drupal and have already implemented the Open Graph Protocol, this is super easy, otherwise a simple piece of PHP:
function currPageURL()
{
$pageURL ='http';
if ($_SERVER["HTTPS"] == "on") { $pageURL .= "s"; }
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80")
{
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
}
else
{
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}will work for your site.
On the Flash side, things get a little tricky. There's no 100% method for getting the current page URL unless you have some sort of control over where the SWF is placed. Using the loaderURL property only gives the SWF URL, and most of the time it's the address of the preloader SWF that game sites use to load your game. You could try JavaScript, but that only works if it's enabled and sometimes you'll get the address of an iFrame, rather than the main page URL. Ditto for calling a PHP file.
If you have a exclusive license for your game (which I'll talk about in a later post), you can use that, but otherwise the safest thing is to link back to a central area, like your site.
Facebook are leaning more towards the Like button rather than Share, but I still like it as it lets your friends comment, like and re-share your content. For your site, if you want the easy way out, you can just head here and copy and paste the code provided. Of course, that's unchallenging and unfulfilling, so all you need to know is that you can make your own implementation of it as long as it follows the form of:
http://www.facebook.com/sharer.php?u=<URL to share>&t=<Title of content>In terms of the URL, it doesn't seem to matter if it's encoded or not, but it didn't seem to harm either, so I left it that way. For the title, Facebook seems to ignore whatever you put and take the title from either the <title> metatag, or the <og:title>if you've added the Open Graph Protocol. In any case, leave it out if you want to live dangerously.
PHP:
$my_url = urlencode( currPageURL() );
$my_title = urlencode( $title );
print "<a href='http://www.facebook.com/sharer.php?u=".$my_url."&t=".$title."' title='Share on Facebook'><img src='https://divillysausages.com/files/shareButtons/facebook.png' width='16' height='16' /></a>";AS3:
var url:String = encodeURI( this.m_url );
var title:String = escape( this.m_title );
var request:URLRequest = new URLRequest( "http://www.facebook.com/sharer.php?u=" + url + "&t=" + title );
navigateToURL( request, "_blank" );Finding out the link to set someone's Twitter status requires a little Googling on the side. Once you find it, it's pretty easy. They also provide a plethora of buttons that you can use as graphics if you want.
As Twitter is limited to 140 characters, you can also set up an optional url shortening convert using TinyURL or Bit.ly. If you want to
include this behaviour in Flash, then you can go with the JavaScript/ExternalInterface option if you have control over the HTML page, or with AMFPHP and call a PHP file on your server if you don't.
PHP:
$my_url = urlencode( currPageURL() );
$my_title = urlencode( $title );
print "<a href='http://twitter.com/home?status=".$my_url." ".$my_title."' title='Share on Twitter'><img src='https://divillysausages.com/files/shareButtons/twitter.png' width='16' height='16' /></a>";AS3:
var url:String = encodeURI( this.m_url );
var msg:String = escape( this.m_title );
var request:URLRequest = new URLRequest( "http://twitter.com/home?status=" + url + " " + msg );
navigateToURL( request, "_blank" );Google Buzz
Google Buzz comes with a whole host of optional parameters that we're pretty much going to ignore. The only required one is the page URL. For the sake of argument, I'll implement the ability to add an image to your Buzz as well.
Google, being super helpful, also provided this page for simple configuration and posting of a share button. Given that I don't like adding 100 JavaScript files to my site, and that this has to work in Flash as well, we'll just go with the bespoke URL implementation route.
Buzz is pretty straight forward, so I'm just going to copy the code.
PHP:
$my_url = urlencode( currPageURL() );
$my_title = urlencode( $title );
$my_image = urlencode( "https://divillysausages.com/files/photoImages/playing_with_light.jpg" ); // replace with your own image here
print "<a href='http://www.google.com/buzz/post?url=".$my_url."&message=".$my_title."&imageurl=".$my_image."'
title='Share on Google Buzz'><img src='https://divillysausages.com/files/shareButtons/buzz.png' width='16' height='16' /></a>";AS3:
var url:String = encodeURI( this.m_url );
var msg:String = escape( this.m_title );
var image:String = encodeURL( this.m_image );
var request:URLRequest = new URLRequest( "http://www.google.com/buzz/post?url=" + url + "&message=" + msg + "&imageurl=" + image );
navigateToURL( request, "_blank" );Digg
Ah, Digg. I'd almost not implement it as it's a pain in the ass to test, as every time you post a link, it crawls through all the other submissions to find similar ones, meaning one simple tweak = one minute wait. This isn't helped by the fact that the docs explicitly tell you to encode your URL and title, while doing this will blatantly screw you in the ass.
Also, in Flash, passing the title normally (escaped or not) will give you %20 in Digg rather than the space character. So we set up a RegExp and replace all the " " characters with "+". Digg doesn't seem to play nice with escaping the title in Flash, so I'd avoid doing it, and keep the title simple (i.e. no special characters).
Digg also includes about 16 hundred optional parameters for setting type, media, body description etc. but with the length of time it took to test the basics, I completely wasn't bothered.
PHP:
$my_url = currPageURL();
$my_title = $title;
print "http://www.digg.com/submit?url=".$my_url."&title=".$my_title."' title='Share on Digg'><img src='https://divillysausages.com/files/shareButtons/digg.png' width='16' height='16' /></a>";AS3:
var url:String = encodeURI( this.m_url );
var pattern:RegExp = / /g;
var title:String = this.m_title.replace( pattern, "+" );
var request:URLRequest = new URLRequest( "http://www.digg.com/submit?url=" + url + "&title=" + title );
navigateToURL( request, "_blank" );Delicious
Delicious is a nice simple one after the pain-in-the-ass Digg. They also provide some simple buttons (including a copy and paste Wordpress piece) if you want to use those. So without further ado:
PHP:
$my_url = urlencode( currPageURL() );
$my_title = urlencode( $title );
print "<a href='http://delicious.com/save?url=".$my_url."&title=".$my_title."' title='Share on Delicious'><img src='https://divillysausages.com/files/shareButtons/delicious.png' width='16' height='16' /></a>";AS3:
var url:String = encodeURI( this.m_url );
var title:String = escape( this.m_title );
var request:URLRequest = new URLRequest( "http://delicious.com/save?url=" + url + "&title=" + title );
navigateToURL( request, "_blank" );StumbleUpon
StumbleUpon was a late addition to this post, coming in an entire 4 months after the original entry. Some Google Analytics on the side showed me that I was getting traffic from them however, and the cool thing about it is that it can send a huge boost to your site, so I figured, why not? If you head to the main StumbleUpon badge page, you can copy and paste a script tag that will add the button to your page with an option to show the current “stumble count”. If this is something that you don't care about, then there's no need for this as you only need a URL. If it is something you care about, then you'll need to use their API to get the share count.
PHP:
$my_url = urlencode( currPageURL() );
print "<a href='http://www.stumbleupon.com/submit?url=".$my_url."' title='Share on StumbleUpon'><img src='https://divillysausages.com/files/shareButtons/stumbleupon.png' width='16' height='16' /></a>";AS3:
var url:String = encodeURI( this.m_url );
var request:URLRequest = new URLRequest( "http://www.stumbleupon.com/submit?url=" + url );
navigateToURL( request, "_blank" );Testing it all in Flash
Most of the PHP code in this page can just be copy & pasted, and for the Flash side, I've done up this small app:
You can hover over any of the buttons at the bottom and get the relevant code in the TextField – hit the Copy Code button if you want to copy it. Clicking on the buttons will do the share, so feel free to change the URL, title, or image URL TextFields to see what happens.
Comments
Submit a comment