I’m not a fan of the stock Facebook social tools – they are slow to load, are a hideous design / look and never match the sites design. I know Facebook is trying to maintain their branding, but seriously? How many people have found ways around your code and custom built what they want? Let the grips go a bit Facebook. Even stupider, is their default tools for generating a sharing button for your site is some rather bullet proof code that you can’t really tweak the image on… However if you dig a bit deeper into their developer site, you’ll find that they give you all of the SDK (software development kits) and code to custom rebuild their tools. So yes, it takes effort to rebuild, but why two opposite extremes? The easy way offers NO customization and slow load times, or the harder way is slow to code but super awesome from a load time, UI design, etc. And seriously Facebook – do you see Twitter or Pinterest dying off because they let developers customize their icons? Anyway, rant over… lets get on to solving the worlds social sharing problems.
The Problem:
The default Facebook share button plugin builder does not allow for custom icons. It is also slow to display the share button on your site’s page load.
The Solution:
If you read a bit further down on the page, they do link to the solution, using the Share Dialog. What this means is that we will need to create a custom Javascript function to trigger the share dialog to display. Fairly straight forward actually. But there are a few requirements to this:
- You need to create an App in your Facebook Developer section that has your website added to it for this to work
- You need to load the Facebook Javascript SDK (software development kit) on your page
Create you App
You may have a Facebook App already. Regardless, lets check the settings to ensure it’s all set to go.
- Go to: https://developers.facebook.com/
- Click on the Apps drop down in the main navigation. If you have an app for your brand already, choose it. If not, you’ll want to create an app.
- Once on your App Dashboard page, click on the Settings option in the left hand navigation.
- What we are looking for on the Basic tab is that there is a platform listed for the platform you are working with. In my case I’m working on a website, but this could work for other platforms like mobile, gaming stations, etc. as well so choose accordingly. If the platform you’re working on isn’t listed, simply click the Add Platform button and add it.
Facebook Developers App Settings Page - Fill in the appropriate information for that platform. In my case, I need to ensure that I have the site URL set correctly.
- Click Save Changes.
Get Coding
The first thing we need is the Facebook Javascript SDK. If you are already loading this on your page, then great – lets skip this step. You can view the source code of your page and look for it – a search for connect.facebook.net should be a good indicator if it’s there or not. If not, lets do this to add it:
- Go to: https://developers.facebook.com/docs/plugins/share-button/
This is actually the page for the Share Button that we don’t want to use, but it’s an easy way to get the SDK code. - Click the Get Code button
- Ensure that the dropdown for Initialize the JavaScript SDK using this app: is set to the App that we just set up above.
- Copy the code from the top box only and add it to your page. Facebook recommends that it be just after the opening <body> tag, but it should work as long as it’s loading anywhere before your buttons. (You might be able to get it to work if you load it later on the page if you use a doc.ready method, but try to get it higher up if possible. It shouldn’t affect load times too bad…)
Your code will look something like this:12345678<div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=<em><strong>YOUR APP ID HERE</strong></em>&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script> - Note: If you’re working in Javascript only and that pesky <div> tag is holding you up, just leave it out. Facebook will actually detect if it’s on the page or not and create it if needed.
With the SDK in place, we can now add our button.
- Create your button as an HTML element. In my case, I’m using an <a> tag that has a Font Awesome icon font in it. Here is what I’m using:123<a href="javascript:facebookshare();" class="btn btn_follow" title="Facebook"><i class="fa fa-facebook"></i></a>
- Notice the href is a Javascript function – lets create that as well. I put it above the <a> tag to ensure that it was loaded in time for when the user clicks it. But this function NEEDS to be loaded AFTER the Facebook Javascript SDK we put in just above. This function of Facebook looks for the current pages URL – the href parameter. If you ONLY wanted to share one page on your site you could hard code it, but generally you’ll want to dynamically generate it which is why I have the window.location.href added.123456function facebookshare() {FB.ui({method: 'share',href: window.location.href,}, function(response){});}
- Go test! One potential gotcha is if you are working in a development environment and your dev sites URL doesn’t match that of what is in your Facebook App from above, you’ll get an error. Technically that error is a good sign as it means that you are talking with Facebook correctly and their security settings are working. But still not a great thing to get… There are two ways around this that I’ve used:
a. You could hard code in the live site’s domain name and then dynamically add in the current pages URI. This way you are always sharing the live site and never the dev site.
b. You can tweak your code above just a bit and use the debugger console on your live site to test that your code is working. But this will really only work for you in a one-off scenario and won’t allow for other stakeholders to see this working right in dev.
The Facebook Share Dialog requires your Website URL in your App Settings to match that of the domain that you are sharing from.
I hope this helps. Let me know if you have any issues or good success stories to share. I love seeing what others can do with the Facebook tools aside from the plane-jane tools.
