Simple Sharing Buttons Generator
Posted 5 years ago
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.
The website’s users created tutorials in the following languages:
Also, here are some other useful tutorials in English:
- Make Your Own Social Media Sharing Buttons
- 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.
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 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:
Now, you will have to upload the images somewhere and then use the full URL for the
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:
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 🙂