Krueger Designs Web designer with the developer know-how.

Standard Social Share Buttons

2 Comments

Let’s share, like mother taught us to.

Sharing content on the Web is HUGE, literally everyone is doing it! At the same time, it’s a bit overrated. There’s a lot of half-baked ideas and lemmings regurgitating things they’ve read all over the place. Thankfully there are some awesome places to find quality information and content. Once you find it, you would hope it’s easy enough to share.

So here’s a share snippet, feel free to share it!

This is a new snippet I created for templates I build at work. I thought it could come in handy to others. Like the title says, these are your standard social share buttons from the big dogs: Facebook, Twitter, Google+, and Pinterest.

<!-- This next bit goes where you want the buttons to appear -->
<div class="social">
  <iframe class="fb-like" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
  <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <!-- Place this tag where you want the +1 button to render. -->
  <div class="g-plusone" data-size="tall" data-annotation="none" data-width="300" style="margin-top:3px;"></div>
  <!-- Place this tag after the last +1 button tag. -->
  <script type="text/javascript">
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
  </script>
  <a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
</div>Check out this Pen!

I hope this turns out useful, see a live demo on CodePen

  • Subhash Kapil

    The Design of your site is very nice & beautiful.

    • http://twitter.com/KruegerDesigns Adam Krueger

      Thank you Subhash, I appreciate your feedback. Is there anything in particular you liked about it? Or anything you didn’t like?