Build your own social media sharing buttons

I cobbled together a couple of share buttons for Facebook and Twitter for a WordPress site. I'm, obviously (as I still use the Blogger platform), not the biggest fan of WordPress - although it is huge, so... anyway. The idea was to get some consistent looking buttons into some part of a theme. I put the following into a 'Text widget', which allows you to inject arbitrary Text or HTML within some container within a theme:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <ul style="padding:0"> <li> <button onclick="window.open('https://www.facebook.com/dialog/share?app_id=YOUR_APP_ID_NUMBER&display=popup&href=' + encodeURIComponent(document.URL) + '&redirect_uri=' + encodeURIComponent(document.URL), '_blank', 'width=550,height=420')" onmouseenter="this.style.color='#999'" onmouseover="this.style.cursor='pointer'" onmouseout="this.style.color=''" style="border:0;background:none;padding:0"><i class="fa fa-facebook-official" aria-hidden="true" style="font-size:48px"></i></button> </li> <li> <button onclick="window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(document.URL) + '&text=' + encodeURIComponent(document.title) + '&via=YOUR_TWITTER_USER_NAME', '_blank', 'width=550,height=420')" onmouseenter="this.style.color='#999'" onmouseover="this.style.cursor='pointer'" onmouseout="this.style.color=''" style="border:0;background:none;padding:0"><i class="fa fa-twitter" aria-hidden="true" style="font-size:48px"></i></button> </li> </ul>
So in order to use the above you are going to need to sign up for the Facebook apps service and if you want to prepopulate your Twitter handle, you will need your Twitter username as well.

It looks something like this: