How to add a sharing & tweet option to your html pages

Today it’s very important to allow others to easily share your content on social media. The different social media platforms provides code you can use to make your page share-ready. Unfortunately these codes sometimes also add code you don’t need. Here’s a simple tutorial on how to manually add share links to your html code.

Let’s start

Start by creating your anchor tags for the different Social media platforms (Facebook,Twitter,Google+,Pinterest) and style them via css as you like.
If you have one of my html templates, they should already exist with a styling.

<div id="share">
 <ul>
  <li class="facebook"><a href="#">Share</a></li>
  <li class="twitter"><a href="#">Tweet</a></li>
  <li class="googleplus"><a href="#">Share</a></li>
  <li class="pinterest"><a href="#">Pin it</a></li>
 </ul>
</div>

Facebook

<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebook-share-dialog','width=626,height=436');return false;">

The encodeURIComponent(location.href) will retrieve the url it is on. You can of course add a custom url if needed. Facebook needs the Open Graph tags to take control on how your content appears. Add the og tags to the head of your page. For more information please have a look at the Facebook devoloper guide.

Twitter

<a href="#" onclick="window.open('https://twitter.com/intent/tweet?text=Tweet%20this&url='+encodeURIComponent(location.href),'','width=650, height=350, toolbar=no, status=no'); return(false);">

Google +

<a href="#" onclick="window.open('https://plusone.google.com/_/+1/confirm?hl=en-US&url='+encodeURIComponent(location.href)+'&image=YOURIMAGE.jpg','','width=900, height=500, toolbar=no, status=no'); return(false);">

Replace YOURIMAGE.jpg with your custom image url.

Pinterest

<a href="#" onclick="window.open('http://pinterest.com/pin/create/bookmarklet/?media=YOURIMAGE.jpg&url='+encodeURIComponent(location.href),'','width=650, height=350, toolbar=no, status=no'); return(false);">

Replace YOURIMAGE.jpg with your custom image url.