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 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.
- You need to create an App in your Facebook Developer section that has your website added to it for this to work
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.
- 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.
- 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
- 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…)
With the SDK in place, we can now add our button.
- 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.
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.