Posted on January 23, 2015 by Chris Harrington

Creating custom social share buttons

At the top of this post, you’ll be able to see the Twitter, Facebook, Google Plus and LinkedIn share buttons I’ve made for the blog. All of them work the same way, and that’s by opening a popup window that allow you to sign in and share the current page you’re on to the appropriate network. I spent some time trying to get this to work in an iframe in a fancypants modal dialog, but I had no luck with that due to security constraints. Each of the four networks has a url to point to that’ll let you prepopulate a share widget with the url of the current page. I wasn’t able to find a repository of these urls online, so here it is.

Twitter

Here’s the url to pull up an embedded tweet page. To set the text that gets prepopulated into the share window, use the text query string parameter, as such:

https://twitter.com/intent/tweet?text=The Dapper Developer – http://dapperdeveloper.com

If you’re not signed into Twitter when you click on the link, you’ll get a sign in page, which will then redirect you to the share tweet page once you’ve signed in. Twitter has a branding page that lists all of the colours you should be using for your custom button. At the time of writing for this post, the hex code for the Twitter blue is #55ACEE. Font Awesome has an up-to-date Twitter logo, so we’re using that in our link, too:

<a class="fa fa-twitter share-base share-twitter" onclick="window.open('https://twitter.com/intent/tweet?text=the text')"></a>

Then some quick styling:

.share-base { padding:4px; font-size:22px; cursor:pointer; width:20px; text-align:center; border-radius:3px; }
.share-twitter { background:#55ACEE; color:white; }

Facebook

The Facebook share button was the most complicated out of the four, but that’s not saying much. I had to sign up for an “app” with Facebook so I could get an app ID, as it’s a required parameter with the link to open in a new window. On top of that, I also had to specify the site url which would allow user logins, because the url would spit back an error of some sort if I hadn’t. Once I’d got that out of the way, though, it was a piece of cake. Here’s the url, which clearly won’t work due to my “your_app_id” entry for app ID:

https://www.facebook.com/dialog/share?app_id=your_app_id&display=popup&href=the_authorized_link&redirect_uri=the_authorized_link

I wasn’t able to quickly find a Facebook branding page which told me what the ubiquitous Facebook blue was, but a little inspect element gave me #3B5998, so that’s what I’m using. The Font Awesome Facebook icon is right up our alley, but I had to add some more specific padding to make it look centred within our button.

<a class="fa fa-facebook share-base share-facebook" onclick="window.open('https://www.facebook.com/dialog/share?app_id=your_app_id&display=popup&href=the_authorized_link&redirect_uri=the_authorized_link')"></a>
.share-facebook { background:#3B5998; color:white; padding:5px 4px 3px 4px; }

Google+

Google+ was a piece of cake, with an easy to discover share page, branding guidelines and a Font Awesome icon.

https://plus.google.com/share?url=http://dapperdeveloper.com

<a className="fa fa-google-plus share-base share-google-plus spacing-left-5" onclick="window.open('https://plus.google.com/share?url=http://dapperdeveloper.com')"></a>
.share-google-plus { background:#DD4B39; color:white; padding:6px 4px 2px 4px; }

LinkedIn

Same deal for LinkedIn: Font Awesome icon, colours on their branding page and share page as such:

https://www.linkedin.com/cws/share?url=http://dapperdeveloper.com

<a className="fa fa-linkedin share-base share-linked-in spacing-left-5" onclick="window.open('https://www.linkedin.com/cws/share?url=the_url')"></a>
.share-linked-in { background:#0077B5; color:white; }

Conclusion

That’s it! If you feel like it, you could use one of the fancy buttons I’ve created to share this article. As an aside, the detailed information that shows up for all of the buttons except Twitter is a result of optimizing meta tags, which I recently blogged about. Thanks for reading!

gisonline-me-gray