Click here to generate for facebook:
https://developers.facebook.com/docs/plugins/share-button

https://fourtonfish.makes.org/thimble/make-your-own-social-media-sharing-buttons

 

Introduction

So you just finished your very first web app and you’d like to let other people share it on Twitter, Facebook, Pinterest or any other social network they use. This is really easy to do — most social media websites provide a code you can put on your website that takes care of everything for you. But you might be concerned about performance — typically this code involves loading JavaScript from the social media sites. There could also be privacy issues. And lastly — each code is a little different and produces different buttons. It may be quite a bit of work getting them all fit into your website. You start wondering about alternatives.

As luck would have it, most (well, actually pretty much all) of the social media sites do provide a very simple alternative: sharing websites through a URL. Let’s look at what this means.

Let’s say I just made a web app that generates the code necessary to add simple sharing buttons to your site and now I want to let other people share it on Facebook without loading tons of JavaScript and slowing down my own site.

Learning objectives

We are going to implement very simple social media sharing buttons and customize them using the Font Awesome icon font.

Screenshot of the finished exercise
The finished exercise

Note: If you don’t know what icon fonts (or web fonts in general) are, check out my previous tutorial which gives you a quick introduction.

Preparation

Let’s head to Facebook’s share button page over here. We see their share button generator, but let’s dig a little deeper to find this part:

Can I use the Share Dialog without using the Share Button?

Great, this is exactly what we need:

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
   Share on Facebook
</a>

The really important part is the URL for Facebook’s sharing script. The u parameter is going to take the URL of the page you want to share. Let’s just try something real quick. Let’s copy this URL and try to open it in our browser:

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffacebook.com

I simply replaced the example URL with Facebook’s own URL and opening this page let’s me share the actual Facebook website on Facebook. So if we replace the URL with our own page anyone who clicks on such a link will see the sharing dialog with our website.

One little note: Facebook expects the URL of our page to be encoded. You can read more about URL encoding on Wikipedia, but all this means is that some characters in the URL need to be replaced. There is a really neat online tool that will do this automatically for you, so keep this page open for now.

I will spare you having to look up the sharing code for other social media sites, here it is for Twitter and Google+:

<a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>

<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

You can see that the code from Twitter has a few parameters:

  • url — the URL of the page you want to share
  • text — the default message that will be shared, your user will be able to change this (this also needs to be encoded)
  • via — optionally you can include your Twitter handle

If you want to use other social media networks, you can look up the code for them yourself. I wrote a pretty in-depth blog article some time ago that covers quite a few sites, if you’re interested.

The Coding Part

Alright, so we have our website and the necessary code. Let’s open a new Thimble and add the code for the sharing buttons from above between your <body> tags:

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
   Share on Facebook
</a>

<a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>

<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

Now let’s replace the example values. First go back to the URL encoding tool I told you about, paste the URL to a page you want to share and click the Encode button.

The original URL should have looked like this:

http://www.fourtonfish.com/simple-sharing-buttons-generator//After conversion you should have something that looks like this:

http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2FTake this encoded URL and replace the example URLs in the code. In the Twitter code you can also add your Twitter user name and write the default sharing message (remember to encode it). When you’re done, your code should look like this:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F" target="_blank">
   Share on Facebook
</a>

<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F&text=Simple%20sharing%20buttons%20generator.&via=fourtonfish" target="_blank">Tweet</a>

<a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F" target="_blank">Share on Google+</a>

If you don’t want to use the extra fields for Twitter, simply leave them out.

You can see that the result doesn’t look very good yet. Let’s clean up the code a little bit and add some classes so we can style our buttons. I’m going to wrap the <a> links in a list. You could also wrap the list in a <div> or even better an <aside>, but I’ll just keep it simple for now. This is what my code looks like now:

<ul class="sharing-buttons">
  <li>
    <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F" target="_blank">Share on Facebook</a>
  </li>
  <li>
    <a class="twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F&text=Simple%20sharing%20buttons%20generator.&via=fourtonfish" target="_blank">Tweet</a>
  </li>
  <li>
    <a class="google-plus" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F" target="_blank">Share on Google+</a>
  </li>
</ul>

Next, let’s load Font Awesome by adding this code to our <head> element:

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Once we do this, we can go on the Font Awesome website and find the code for the icons we need. You can choose between the default (for example fa-facebook) or the alternative version (fa-facebook-square). Our own code should then look like this:

<ul class="sharing-buttons">
  <li>
    <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F" target="_blank"><i class="fa fa-facebook-square"></i>Share on Facebook</a>
  </li>
  <li>
    <a class="twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F&text=Simple%20sharing%20buttons%20generator.&via=fourtonfish" target="_blank"><i class="fa fa-twitter-square"></i>Tweet</a>
  </li>
  <li>
    <a class="google-plus" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.fourtonfish.com%2Fsimple-sharing-buttons-generator%2F" target="_blank"><i class="fa fa-google-plus-square"></i>Share on Google+</a>
  </li>
</ul>

Now this looks more readable but we can do better with some CSS. Add this to your <head> element

<style>
.sharing-buttons{

}

.sharing-buttons li{

}

.sharing-buttons a{

}

.facebook{
  
}

.twitter{
  
}

.google-plus{
  
}

.fa{

}
</style>

And the next step is up to you. Experiment with CSS, see what looks good. I added the fa class so that you can also style the icons separately. Here is a little example of what I came up with if you need an inspiration:

<style>
body{
  box-sizing: border-box;
  font-family: sans-serif;
}

.sharing-buttons{
  list-style: none;
  text-decoration: none;
  text-align: center;
}

.sharing-buttons li{
  display: inline;
}

.sharing-buttons a{
  border: 1px solid;
  padding: 0.5em;
  color: #fff;
  text-decoration: none;
}

.sharing-buttons a:hover{
  color: #eee;
  text-decoration: none;
}

.fa{
  padding: 0.5em;
}

.facebook{
  background: #3B5998; 
}

.twitter{
  background: #00ACED;
}

.google-plus{
  background: #D14836
}
</style>

I removed the bullets from the list, added some spacing, set the font to the browser’s default sans-serif font and I’m also using the official colors of each social network (as compiled by this guy). If the CSS looks complicated to you, go ahead and search for each attribute to see what it does and play with it a little bit to get the look you want.

Conclusion

Using links to share your website may be a little bit more work, but the result is extremely light-weight and you have full control over the presentation. One big downside is that you can’t see how many times your content was shared (this would require some JavaScript — or back-end work). If you prefer performance and customization, this should be a very useful technique for you. If not — at least you got a little exercise in using web fonts 🙂

Source: https://fourtonfish.makes.org/thimble/make-your-own-social-media-sharing-buttons

liked this article?

  • only together we can create a truly free world
  • plz support dwaves to keep it up & running!
  • (yes the info on the internet is (mostly) free but beer is still not free (still have to work on that))
  • really really hate advertisement
  • contribute: whenever a solution was found, blog about it for others to find!
  • talk about, recommend & link to this blog and articles
  • thanks to all who contribute!
admin