Simple Sharing Buttons Generator updates

Posted on June 09 2014

Integrating these buttons on a blog would require either generating code for every page separately or using JavaScript or a server-side language (PHP, Python, etc).

I’ve already been asked by a few users of my tool to consider adding an option to generate code that would get the URL of the current page automatically and this is something I am already working on for the next version of the tool.

Until then, here’s how you can easily get the buttons to work for Facebook, Twitter and Google+ with JavaScript (note that there is no non-JavaScript fallback as that would require generating the code for each page separately):

<ul class="share-buttons">
  <li>
    <a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURI(document.URL)); return false;" target="_blank">
      <i class="fa fa-facebook-square fa-2x"></i>
    </a>
  </li>
  <li>
    <a href="#" onclick="window.open('https://twitter.com/intent/tweet?source=' + encodeURI(document.URL) + '&amp;text=' + encodeURI(document.title)); return false;" target="_blank" title="Tweet">
      <i class="fa fa-twitter-square fa-2x"></i>
    </a>
  </li>
  <li>
    <a href="#" onclick="window.open('https://plus.google.com/share?url=' + encodeURI(document.URL) + ')" target="_blank" title="Share on Google+">
      <i class="fa fa-google-plus-square fa-2x"></i>
    </a>
  </li>
</ul>

This is the code for buttons that use Font Awesome, other buttons will look similarly (notice the highlighted parts, everything else stays the same).

If you want to know when this feature is available in the generator, follow me on Twitter or subscribe to this blog’s RSS.