Simple Sharing Buttons Generator is an online generator tool that lets you create simple, HTML-based (no JavaScript), mobile-friendly sharing buttons for many popular social networks, including Facebook, Twitter or Google+.
(See more tweets here. Also featured on Product Hunt as #3 Product of the Day.)
Social networks, such as Twitter or Facebook, provide you with a JavaScript code that lets your user share your website on these social media sites. These scripts, however, do a lot more than that. Fortunately, there is a very simple alternative that’s privacy-friendly and doesn’t require slowing down your site while external JavaScript files are loaded.
The solution is implementing sharing buttons as regular HTML links. These links take your user back to the social media websites and pre-fill the sharing dialogue with options you can set for your users and site visitors.
You can read my blog post about how to create these buttons yourself. I also created the Simple Sharing Buttons Generator to automate the code generation to make this process really simple.
Tutorials¶
The website’s users created tutorials in the following languages:
Also, here are some other useful tutorials in English:
- WordPress Speed Optimization with Custom Social Sharing Icons
- How to use a custom share button on your Squarespace site
How to use the site¶
Start by choosing from a variety of icon styles – the generator offers a few different icon sets and the popular Font Awesome (for attributions see the Attributions section).
Next, choose the networks to which you want your users or site visitors share your content.
Then fill out the information about your website. If your website has the necessary markup, you will be able to use the Magic Wand icon next to the URL field to retrieve the information automatically.
Note that there are two versions of the code: the default, that uses no JavaScript at all and the code for blogs which uses JavaScript to automatically get the URL of the current page. You can put these buttons in your blog’s footer and they will let your readers share the current page. Be sure to fill out the URL so that if JavaScript is disabled in your user’s browser, they will still be able to at least share your main blog.
Also, if you want to use the code for Pinterest, you will have to provide a URL to an image you want to share.
As I am writing this I am realizing that this will make it harder to use the Pinterest button on blogs with the JavaScript option, something I will try to fix ASAP!
As a temporary solution, you will need to add an Open Graph image meta tag. Basically it’s just this:
<meta property=“og:image” content=“URL-to-your-image” />
If you’re using WordPress, you can try something like this to add it automatically to each page.
Now you can preview and test your buttons.
If everything looks good, you can copy the generated HTML and CSS code and use it on your site.
If you chose one of the image icons, you will see a download button. I don’t host the images myself (my generator website itself gets a moderate amount of traffic, but hosting the images myself would mean having to support traffic of everyone who uses the code, which I’m guessing would add up to a lot).
If you notice, the code looks something like this:
<img src="images/Facebook.png">
Now, you will have to upload the images somewhere and then use the full URL for the src attribute.
So for example, you could upload the images to a site like TinyPic, which gives you the following direct URL:
And the combined code would look like this:
<img src="http://i62.tinypic.com/30mohat.png">And you’re done! The generator is and will remain completely free to use. I do provide a few options to send me a small tip, but I am also very happy to get a “Thank you” email or a friendly tweet. Feel free to use these channels for feature requests or to report a problem 🙂
You can follow me on Twitter or subscribe to my blog for updates.
