Learn hacking online with SAMHACKERSWORLD free ethical hacking course. We will teach you everything you need to start your career in penetration testing. If you are a beginner and need to learn how to hack, the information provided in this post can surely help you out. Why wait? Become a hacker today!

Breaking

LightBlog

Thursday 22 February 2018

HTML Share Buttons

First things first (although you may have thought it last), you need to style your buttons. Here is some pretty basic CSS code that will apply the default settings, best placed within your <head> tags (it’ll work just before the buttons though if you can only place it there). Obviously feel free to add to/amend any of this.


<style type="text/css"> #share-buttons img {width: 35px;padding: 5px;border: 0;box-shadow: 0;display: inline;} </style>

view rawshare-buttons.css hosted with  by GitHub

With your CSS in place, you then need to add the HTML script for the buttons…

<!-- I got these buttons from simplesharebuttons.com --><div id="share-buttons"> <!-- Buffer --> <a href="https://bufferapp.com/add?url=https://simplesharebuttons.com&amp;text=Simple Share Buttons" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/buffer.png" alt="Buffer" /> </a> <!-- Digg --> <a href="http://www.digg.com/submit?url=https://simplesharebuttons.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/diggit.png" alt="Digg" /> </a> <!-- Email --> <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com"> <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" /> </a> <!-- Facebook --> <a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /> </a> <!-- Google+ --> <a href="https://plus.google.com/share?url=https://simplesharebuttons.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" /> </a> <!-- LinkedIn --> <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://simplesharebuttons.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /> </a> <!-- Pinterest --> <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"> <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /> </a> <!-- Print --> <a href="javascript:;" onclick="window.print()"> <img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" /> </a> <!-- Reddit --> <a href="http://reddit.com/submit?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /> </a> <!-- StumbleUpon--> <a href="http://www.stumbleupon.com/submit?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" /> </a> <!-- Tumblr--> <a href="http://www.tumblr.com/share/link?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" /> </a> <!-- Twitter --> <a href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /> </a> <!-- VK --> <a href="http://vkontakte.ru/share.php?url=https://simplesharebuttons.com" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/vk.png" alt="VK" /> </a> <!-- Yummly --> <a href="http://www.yummly.com/urb/verify?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/yummly.png" alt="Yummly" /> </a> </div>

view rawhtml-share-buttons.html hosted with  byGitHub

That will get your share buttons up and running! You’ll be sharing this website though, so there’s still more to be done…

Start by changing all instances of ‘https://simplesharebuttons.com’ with the URL of the site/page you wish the buttons to act for.

Note that you will need to include the http:// or https:// for the links to be shared correctly. All share buttons, bar Pinterest, will need this changing.

Next, change the four instances of ‘Simple Share Buttons’ to the title of the page or website that the buttons will be displayed. These are present for the following share buttons:

Twitter


Reddit


StumbleUpon


Email


There are further customisable options available for some of these share buttons, but let’s keep things simple for now.

Last, but by no means least, the images. The HTML code above will use buttons located on this website, which you are more than welcome to use. The buttons will load more quickly however if you upload them and change the image sources accordingly.

You can download a zipped folder of the ones in this example here.

No comments:

Post a Comment

Adbox