This is a lightweight, simple solution for adding sharing buttons to your site. Like many things, there are many ways to achieve this but the main goal of this solution is performance.
Every major social network provides an easy way to add sharing buttons to your site, but the downside of many of these is each button loads various scripts and stylesheets increasing the page weight. Generally speaking, say you wanted to have 4 sharing buttons (Twitter, Facebook, Google+ and LinkedIn) it’s more than likely you will be loading 8+ extra resources.
Using the provided solutions from the major networks is convenient, but less then ideal if performance is a main priority.
A few things to keep in mind with this basic solution is you won’t get the full pop-up experience which has become a common pattern for most sharing buttons. But adding the _blank value to the target attribute to open the links in the new tab kinda gives you the same effect in my opinion.
So our goal is to share the current page and not bloat the page. Thankfully, each major social network provides a URL that we can pass in some arguments to archive just this.
For the last few years Brad Vin has been keeping an up to date list of the most useful Sharing URL’s. Brad has 12+ URL which you might find helpful but for this article we are only going to explore 3. Facebook, Google+ and Twitter.
http://ift.tt/1d2xeZT}
Google+
http://ift.tt/NzFl4g}
https://twitter.com/share?url={url}&text={title}&via={via}
To kick things off you will see the above require some arguments.
- URL (dynamic)
- Title (dynamic)
- Via (static)
There are a few ways to dynamically pass values into the URL. It really depends on how your site is built. The examples below will utilise WordPress’s built in functions.
Creating the Twitter share URL using WordPress’s built in functions:
https://twitter.com/share?url=<?php echo get_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=wdweekly
The above uses get_permalink(), which gets the current page URL and get_the_title() which gets the title of the article. Also the passed in via argument is the Web Design Weekly twitter handle wdweekly.
So the next thing we need to do is add this in the desired location within our site and create the appropriate markup like so:
<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo get_permalink();?>&via=wdweekly" target="_blank" title="twitter"> Twitter</a>
To take the links to the next level all we need to do is add some SVG icons within our link markup and we have our super speedy sharing buttons.
Twitter SVG Icons added
<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo get_permalink();?>&via=wdweekly" target="_blank" title="twitter">
<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://ift.tt/nvqhV5"><title>Twitter</title><g fill="none" fill-rule="evenodd"><path d="M.106.183h55.127V55.31H.106V.183z" fill="#00ACED"/><path d="M37.09 21.016c-.728.352-1.504.58-2.325.685.837-.538 1.48-1.387 1.784-2.404-.784.497-1.65.852-2.575 1.06-.735-.85-1.79-1.38-2.95-1.38-2.234 0-4.045 1.946-4.045 4.354 0 .338.035.673.102.988-3.355-.174-6.34-1.914-8.336-4.544-.346.642-.545 1.388-.545 2.19 0 1.506.714 2.848 1.8 3.617-.663-.026-1.287-.21-1.832-.54v.06c0 2.105 1.395 3.862 3.245 4.27-.34.097-.698.143-1.07.143-.258 0-.505-.018-.755-.078.513 1.737 2.008 2.998 3.777 3.023-1.385 1.174-3.128 1.864-5.023 1.864-.328 0-.65-.02-.966-.06 1.79 1.24 3.912 1.964 6.2 1.964 7.44 0 11.51-6.638 11.51-12.39 0-.186-.004-.372-.013-.558.79-.623 1.476-1.39 2.018-2.262" fill="#FFF"/></g></svg>
</a>
Facebook SVG Icons added
<a href="http://ift.tt/1cFNY44 echo get_permalink(); ?>" target="_blank" title="Facebook">
<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://ift.tt/nvqhV5"><title>Facebook</title><g fill="none" fill-rule="evenodd"><path d="M.32.183h55.127V55.31H.32V.183z" fill="#3B5998"/><path d="M32.446 24.287h-3.108V22.25c0-.766.507-.945.865-.945h2.192V17.94l-3.02-.01c-3.352 0-4.114 2.508-4.114 4.114v2.243h-1.938v3.467h1.94v9.81h4.076v-9.81h2.75l.358-3.467" fill="#FFF"/></g></svg>
</a>
Google+ SVG Icons added
<a href="http://ift.tt/IIZSQS echo get_permalink(); ?>" target="_blank" title="Google+">
<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://ift.tt/nvqhV5"><title>Google+</title><g fill="none" fill-rule="evenodd"><path d="M.5.18h55.127v55.127H.5V.18z" fill="#DD4B39"/><path d="M28.49 29.307c-.54-.38-1.57-1.31-1.57-1.855 0-.64.18-.954 1.144-1.707.986-.77 1.685-1.855 1.685-3.115 0-1.5-.67-2.963-1.924-3.446h1.89l1.336-.965h-5.966c-2.674 0-5.19 2.026-5.19 4.372 0 2.4 1.822 4.335 4.543 4.335.19 0 .372-.004.552-.017-.176.338-.303.72-.303 1.113 0 .667.358 1.208.81 1.65-.342 0-.673.01-1.032.01-3.314 0-5.864 2.11-5.864 4.297 0 2.155 2.796 3.503 6.108 3.503 3.777 0 5.863-2.143 5.863-4.298 0-1.728-.51-2.763-2.086-3.878zM25.3 26.32c-1.537-.047-2.998-1.72-3.263-3.74-.266-2.017.765-3.562 2.3-3.517 1.538.047 3 1.665 3.264 3.684.265 2.02-.765 3.618-2.302 3.572zM24.7 36.53c-2.29 0-3.944-1.45-3.944-3.19 0-1.707 2.052-3.128 4.342-3.103.534.006 1.032.09 1.484.238 1.243.864 2.134 1.352 2.386 2.338.047.2.073.405.073.615 0 1.742-1.12 3.1-4.34 3.1z" fill="#FFF"/><path d="M34.846 26.494v-2.322h-1.87v2.322h-2.32v1.87h2.32v2.322h1.87v-2.322h2.323v-1.87h-2.324" fill="#FFF"/></g></svg>
</a>
All going well you should now have some nice looking buttons.
To see a working example just click on the sharing icons at the end of this article.
If you are still not convinced and are still keen to use the provided code snippets from the major networks, Nicolas Gallagher and Mathias Bynens have worked together to create a handy async script that could be helpful.
The post Basic Performant Sharing Buttons appeared first on Web Design Weekly.
by Jake Bresnehan via Web Design Weekly
No comments:
Post a Comment