How to Share Your Pages on Social Media

Let's do it with just HTML and CSS

0 Comments

Sharing your content on social media is pretty easy, but be careful if you use a script based solution as it can increase your page’s load-time. When it comes to adding the ability to share your content on social media with others there are generally two methods:

Javascript Includes

Keeping your website load-times low is very important as users will often leave webpages that have to wait too long for things like social media scripts or advertisements to load. If you are using a Javascript include then you must keep in mind that it is going to lead to at least one additional Internet call and possibly slowdowns in the browser due to the running of the Javascript. Normally this is not a big deal, but for some users with aging computers or limited resources it could keep them from using your site at all.

What about setups that use images? There is no doubt that images afford web designers a way to make beautiful parts or additions to webpages, they can even give you a way to do things that we wish we could, but are currently not possible. Anyone remember when rounded corners were done with images? Ultimately, while this does make it easier to write your own share buttons by allowing you to use images to design the button, this leads to many extra calls to images that need to load. In a perfect situation this would be mitigated by browser caching, but this is not always the case.

HTML, CSS and FontAwesome to the rescue

At this point you are probably reading along asking yourself, “if these options have problems what should I do to share my content?” The answer is use the tools we already have, HTML, CSS and FontAwesome. Since HTML and CSS are rendered by your browser, it only makes sense to leverage the power of your browser to make these icons. It will also keep your load-time much lower than the other options. “What is FontAwesome”, you ask? It is a very popular and flexible way put highly scalable images on your webpage. It is basically a font that has many different images in it that are commonly used. I encourage you to take a look at it FontAwesome as it is a must for the modern web designer. The only downside to using FontAwesome is, as with the Javascript option, that it has to make an additional Internet call. However, unlike the Javascript option, there is no need to engage the scripting engine and the slowdowns that can come with it.

Remember to customize it!

These buttons are just a base to start from, while they are completely functional in their current form, you should take some time and make them fit better into your site’s design. The share buttons at the bottom of this post are based on the same exact buttons, just with a few css tweaks to make them my own.

CSS and Font Awesome

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<style>
  .share-btn-row {
    margin: 24px;
  }

  .share-btn-row .share-btn {
    display:inline-block;
    height:25px;
    width:25px;
    border: solid 1px black;
    text-align:center;
    line-height:25px;
    cursor:pointer;
    box-shadow:inset 0px 0px 1px 1px rgba(255,255,255,0.15);
    text-shadow: 0px 2px 3px black;
    color: white;
  }

  .share-btn-row .share-btn:hover {
    box-shadow:inset 0px 0px 1px 1px rgba(255,255,255,0.15);
    text-shadow: none;
    border: solid 1px rgba(255,255,255,0.33);
  }

  .share-btn-row .share-btn:active {
    text-shadow: none;
    box-shadow: inset 0px 0px 2px 2px rgba(51,51,51,0.5);
  }

  .share-btn-row .share-btn.twitter{
    background-color:#00aced;
  }

  .share-btn-row .share-btn.facebook{
    background-color:#3b5998;
  }

  .share-btn-row .share-btn.google-plus{
    background-color:#dd4b39;
  }

  .share-btn-row .share-btn.linkedin{
    background-color:#007bb6;
  }

  .share-btn-row .share-btn.digg{
    background-color:#777777;
  }

  .share-btn-row .share-btn.envelope{
    background-color:orange;
  }

  .share-btn-row .share-btn.print{
    background-color:orange;
  }

  .share-btn-row .share-btn.pinterest{
    background-color:#cb2027;
  }

  .share-btn-row .share-btn.reddit{
    background-color:#777777;
  }

  .share-btn-row .share-btn.stumbleupon{
    background-color:#EB4823;
  }

  .share-btn-row .share-btn.tumblr{
    background-color:#32506d;
  }
</style>

HTML

<div class="share-btn-row">
  <a href="http://www.digg.com/submit?url=LINK" target="_blank" title="Share on Digg"><div class="share-btn digg"><i class="fa fa-digg"></i></div></a><!--
  --><a href="http://www.facebook.com/sharer.php?u=LINK" target="_blank" title="Share on Facebook"><div class="share-btn facebook"><i class="fa fa-facebook"></i></div></a><!--
  --><a href="https://plus.google.com/share?url=LINK" target="_blank" title="Share on Google+"><div class="share-btn google-plus"><i class="fa fa-google-plus"></i></div></a><!--
  --><a href="http://www.linkedin.com/shareArticle?mini=true&url=LINK" target="_blank" title="Share on LinkedIn"><div class="share-btn linkedin"><i class="fa fa-linkedin"></i></div></a><!--
  --><a href="mailto:?subject=TITLE&body=I thought you might like this: LINK" target="_blank" title="Share via Email"><div class="share-btn envelope"><i class="fa fa-envelope"></i></div></a><!--
  --><a href="https://www.pinterest.com/pin/create/button/?url=LINK&media=IMAGE&description=TITLE" target="_blank" title="Share via Pinterest"><div class="share-btn pinterest"><i class="fa fa-pinterest"></i></div></a><!--
  --><a href="javascript:window.print();"><div class="share-btn print" title="Print this page"><i class="fa fa-print"></i></div></a><!--
  --><a href="http://www.reddit.com/submit?url=LINK&title=TITLE" target="_blank" title="Share via Reddit"><div class="share-btn reddit"><i class="fa fa-reddit"></i></div></a><!--
  --><a href="http://www.stumbleupon.com/submit?url=LINK&title=TITLE" target="_blank" title="Share via StumbleUpon"><div class="share-btn stumbleupon"><i class="fa fa-stumbleupon"></i></div></a><!--
  --><a href="http://www.tumblr.com/share/link?url=LINK&title=TITLE" target="_blank" title="Share on Tumblr"><div class="share-btn tumblr"><i class="fa fa-tumblr"></i></div></a><!--
  --><a href="https://twitter.com/share?url=LINK&text=TITLE" target="_blank"><div class="share-btn twitter" title="Share via Twitter"><i class="fa fa-twitter"></i></div></a>
</div>

To use the buttons you will need to change the HTML section so that the hyperlinks, the “<a>” tags, point to your page or the page you wish to share. In each hyperlink you will see placeholders, change them as noted below and your buttons are ready to share your content:

Share Button Generator

If you would prefer to have the HTML code generated for you instead of filling in the placeholders yourself or if you want to change the placeholders to something that suits your needs better then use the form below.

113 characters left in title
    Nothing here yet,
    fill out the form above
  
- By: Posted on:

Comments

Small ad here
Select a size at which to preview the size