If you’re looking for a cool way to implement some refreshing share buttons for your site then you’re in luck — today’s post is just for you! This featured tutorial shared by Stacy Summers from Webdesign.org will show you how to create a basic and elemental pair of buttons that you can use to share your site’s contents.

Oh, and if you consider yourself a little rusty in the web programming language department, do not fret, for this tutorial only requires minimal coding. It only involves 2 steps, which is copy/pasting an HTML code and creating a .js file.

Here are the steps:

• Copy/paste the following snippet below into your HTML file.

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
or
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>     

• Create a .js file and copy/paste this in.

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};     

• You can use the following share buttons here or better yet, check out Stacy’s post to get more button choices.

Enjoy your new buttons and have a nice day!

Incoming search terms for the article:

• background image css
• html code facebook twitter buttons
• share on twitter button