Last week we had a series of interviews with a number of candidates for a junior frontend developer position and at the end of each session we gave them a “code challenge” to complete in their spare time, only if they wanted to. Nothing special, just a simple responsive prototype so as to take a peak at the quality of their code.
One thing we had in this prototype was a Facebook share button to see how they could deal with it. There was no restriction to it, they could use any library, service or code snippet they could think of.
Almost a 40% of the candidates used a simple link which redirected you to a facebook share page, a 30% used a third party library and a 30% used Facebook’s default share button.
The first thing that comes to my mind is: Don’t use social network’s share buttons, it’s bad for the page’s performance.
There is always a simple solution to this. With some lines of code you can share your content without loading all these resources that come with the official share buttons.
I know this subject has been covered by many people but here is an example for facebook and twitter share buttons without messing with external libraries.
Here is the HTML code for the buttons. We are just creating simple links. We use the js-share-button class in our script to select all the share buttons. And the data-service attribute gives us the services we are going to use.
I wanted to create a module for this script so I can use it to ajax elements too.
This could be better, for example the window_open function could be in another module with global small utilities but this is good for now. The only difference for the user is that the URL comes from the link and not from the current page. This is great when you got an ajax list you want to share each item.
Just use shareButtons.init(); when you want to parse the DOM.
You can check the demo of these buttons, will give you a share to the current page url.