mxstbr / sharingbuttons.io

Quickly generate social sharing buttons with a tiny performance footprint

sharingbuttons.io

A web app to quickly generate social sharing buttons that do not track the user.

Built using React.js and utilising the Flux application architecture.

Getting up and running

After cloning this repository, run npm install in the root directory to install the dependencies. As soon as all of them are installed, you can npm start in the root directory and open 0.0.0.0:3000 in your browser to see your local copy of the app.

Structure

The main part of the application is rendered in the App component found at js/components/App.react.js. All of the components can dispatch actions to change things.

Actions

The following actions are available:

• AppActions.toggleNetwork(network) - Toggles a social network on/off

• AppActions.setURL(url) - Sets the shared URL

• AppActions.setText(text) - Sets the shared text

• AppActions.changeSize(size) - Changes the size of the buttons

• AppActions.changeIcon(type) - Changes the icon type

For a more in-depth documentation of the available actions, have a look at the AppActions found at js/actions/AppActions.js. All of these actions get picked up by the AppStore, found at js/stores/AppStore.js. The AppStore then changes the data and emits that it changed, which prompts the app to rerender with the new data.

To define a new action, first add the action type to the AppConstants (js/constants/AppConstants.js), then pick up the dispatched action in the AppStore.AppDispatcher.register() function and change something according to the action.

Components

The app is split up across 6 components, all found in js/components. The following components are rendered:

• App.react.js - The root component that renders the rest of the application. Contains most of the static text found on the page.

• Generator.react.js - Renders the Generator.

• SelectionButton.react.js - Renders the options of the Generator.

• GeneratorCode.react.js - Renders the code to be copied.

• GeneratorPreview.react.js - Renders the preview page.

• Header.react.js - Renders the header.

• PreviewButton.react.js - Renders a preview button.

• Footer.react.js - Renders the footer.

Contributing

sharingbuttons.io loves community involvement! Take a look at the unassigned open issues, especially the unassigned open requests for help, or open a new issue/make a PR!

Help

If you need help with anything regarding this app, contact me on twitter and I will try to help you as quickly as possible.

License

This project is licensed under the MIT license:

The MIT License (MIT)

Copyright (c) 2015 Maximilian Stoiber

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

sharingbuttons.io's Issues

Nearly impossible to select generated code

Description

Because the generated code uses DOM elements to highlight the syntax and not a <textarea>, selecting this code is extremely difficult on touch-screen devices.

Steps to reproduce

1. Open (http://sharingbuttons.io/) in Mobile Safari on iOS 9.3.3
2. Generate code and try to select text with one finger while scrolling the highlighted syntax with the other.

Expected behavior: I expected the entire output to be selected on focus or at least be selectable.

Actual behavior: Extreme difficulty selecting generated code.

Link to an example: (http://sharingbuttons.io/)

Versions

• Browser: Mobile Safari
• OS: iOS 9.3.3 on iPhone 6+

Adding Whatsapp share

Hey mxstbr, thanks for sharing a nice solution. It would be nice if you add Whatsapp too.

More icon types

Depends on #12, as IcoMoon doesn't offer anymore. Maybe use IcoMoon + something else?

why the borders?

The buttons all have a border, which adds a lot of border-color: … styles. Is this necessary or can it be dropped?

A11y

• Add title aria-label attributes to buttons. (See here: https://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/)
  More ideas how to improve accessibility?

0.4em of whitespace to the right of the icon on small "size" setting

Set the icons to "small" and you will notice that there is a small amount of whitespace in the container of the icon to the right of the icon itself. This is due to the .resp-sharing-button span css selector and it's padding-left. When there is no text, this whitespace causes the icon itself to look askew. I can think of two remedies for this:

• Remove the padding on the class, adding padding right to the icon class with an offset on the possible span, or make the classes used slightly more specific on the span inside of the icon container instead of just by tag span
• Do not render the span when there is no text: https://github.com/mxstbr/sharingbuttons.io/blob/master/js/components/PreviewButton.react.js#L27

It seems like this issue related to this PR: #55

Likely the latter is the better of the two options: you can simply replace

{shareText}

with

{shareText || null}

or something very similar to that, like pulling all of the logic for text out to another function:

getIconText(name) {
    let shareText = null;

    switch (this.props.size) {
    case 'large':
        // GitHub does not like my updates to this line...but I do...
        // shareText = `Share ${/^e-?mail$/i.test(this.props.network.name) ? "by" : "on"} ${name}`;
        shareText = "Share " + (this.props.network.name.toLowerCase() === "e-mail" ? "by " : "on ") + name;
        break;
    case 'medium':
        if (this.props.network && this.props.network.name) {
            shareText = this.props.network.name;
        }
        break;
    default:
    }

    return shareText;
}

Website not loading in Safari using private mode

Safari’s private mode does not support localStorage and breaks with:

setItem — bundle.js:3832:106
QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.

Result: You’ll see the loading spinner (actually first I thought this might be a website against using any sharing buttons, but then I had a second look)

Maybe at least catch this error and display a notification to load it without using the private mode?

Minor Tweaks to Large/Medium Layouts

Large Layout

Instead of "[icon] Share on Twitter" it should just say "[icon] Twitter".

Medium Layout

Instead of "Twitter" it should say "[icon] Twitter".

Get Rid of Large/Medium?

Infact, I think medium and large should merge to "normal". Then "small" should have its own layout with just the icons.

Support for templating engines

E.g. let users add a php/liquid/.. tag instead of the text.

Tumblr Link broken

!important styles

could add !important to _share-buttons:css:8, 9, and 10

– @olets

I think this would be nice, could it have any unintended side effects?

Without the "Oval" icons selected and visible, the HTML code block is not long enough

Include notice for the icons, as per the IcoMoon license

Missing Facebook and Google+ buttons

Can't see anymore the buttons for Facebook and Google+ if selected

Whatsapp icon is all white in solid circle mode

Check out this share button - The whatsapp icon is all white.

This is because the whatsapp logo has white instead of transparent. Compare it with the twitter logo.

Digging deeper, it seems the way it is structured. The whatsapp logo has an extra white path on it.

There are two things I can think of -

1. Make another svg which only is only made of black strokes leaving the icon in transparent. (Sorry, I can't help you with that)
2. Use a png instead.

@mxstbr, What do you think?

Missing a Comma in CSS for e-mail button on Hover

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #2B2B2B !important;
  border-color: #2B2B2B !important;
}

The comma between the two classes is missing in the generated code so e-mail button wont change colour on hover unless you put this one in instead.

Add Hacker News

Would be awesome to add Hacker News as an option. Sharing link is in the format below

https://news.ycombinator.com/submitlink?u=URL&t=TITLE

Add onClick with popup

Allow onClick popup instead to open the link in the current window. This help to maintain the focus and allows multiple actions at the same time.

DEMO

<a class="resp-sharing-button__link"
   href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
   target="_blank"
   aria-label="Facebook"
   onclick="window.open(this.href,'','scrollbars=yes,menubar=no,width=700,height=600,resizable=yes,toolbar=no,location=no,status=no');
 return false;">

Show how much money users are saving by using these sharingbuttons

I.e. integrate with https://whatdoesmysitecost.com/

AppCache manifest attribute missing from index.html

Async analytics, launched only when the app is actually finally rendered

See here for a full implementation: https://github.com/mxstbr/personal-website/blob/master/js/app.js#L25-L37

Drag & drop to reorder the button appearance

Save current config to localStorage

Switch to different icon pack with more version and more social networks

If you have a suggestion let me know! Needs to have some sort of license that allows me to distribute them.

add Telegram sharing button

Telegram is a popular messaging app in Iran, Russia, and Arab countries. Please add Telegram too.

http://telegram.wiki/tips:websharing

SVG data in CSS?

If there is more than 1 webpage using the same social icons, I think SVG would be better in the CSS?

mailto: links should not open in a new window.

It opens a new empty web browser tab even when the links are handled by the OS (e.g. native mail client).

Get rid of jQuery

Custom text on buttons

Let users choose the text that's displayed on the buttons themselves. (Maybe add "Advanced Options"?)

optimize svgs

The svgs could be optimized. My favorite tool for this is https://jakearchibald.github.io/svgomg/. I use precision:1 or precision:2 (check each svg, and use precision:1 if it still looks good), and turn on all features except for "remove viewBox." Because width and height are removed, they must be added back in the css (like .resp-sharing-button__icon svg {width: 24px; height:24px})

For example, I tested logo-circle-pinterest.svg. I used SVGOMG with precision:2 (looked the same as the original) and the size dropped 19%. Then I removed the stroke-miterlimit and stroke-linejoin (these are not really necessary, but SVGOMG does not remove them). Delete the fill and stroke - they can be in css. The result is 579b, down 30% from the original.

Of course, 300b is not a lot. But it is easy to do, and then you know your icons are the smallest possible!

Add FB Messenger send

Hi, FB has e Send button for its Messenger. It would be great if you add this feature to the sharing buttons. Thanks.

https://developers.facebook.com/docs/plugins/send-button

Google+ no preview

Thanks for the cool project.

I just included your project on my super recently released project (half an hour ago to be precise) http://wpdemoserver.com/

When sharing on Google+ there's no preview.

no-js fallback

Users with JavaScript disabled won't see anything, which is a shame. A no-js fallback using a form would be nice...

More social networks

• E-Mail (mailto:?subject=TITLE&body=DESCRIPTION:URL)
• Pocket (https://getpocket.com/save?url=URL&title=TITLE) (No icon in IcoMoon, depends on #12)
• Xing
• Instapaper (No icons, see Pocket)
• Evernote (No icons, see Pocket)
• Ello (Can't find sharing link)

Between 700px and 850px width, the radio-bullet is mispositioned

On layouts smaller than 850px and before the mobile layout kicks in at 700px, the radio button bullet is wrongly positioned.

Remove target-blank from email button

Hi, I have a small suggestion - for generated buttons that send an email, remove target="_blank" from them so a blank window isn't opened each time a user clicks the button. A blank window shouldn't be required for sending the email.

A bit more space between buttons

I updated the margin on my css version but a bit more space between buttons would do good on SEO/mobile friendliness tests for tap targets for the small button size.

I think they recommend minimum 8 or 10 pixels space between buttons on mobile right?

I could be wrong, the issue might be the size of the buttons themselves but I like the small ones.

Love this tool btw!

Button missing a colon in CSS

The active and hover styles do not get applied to the email button, because there is simply a missing colon after the :hover

.resp-sharing-button--email:hover
.resp-sharing-button--email:active {
  background-color: #2B2B2B;
  border-color: #2B2B2B;
}

After checking the generated CSS, this is also an issue in the Xing button.

Add ServiceWorker

Add WeChat (China), Kaotalk (Korea) please?

Would love to include these two as standard... or can anyone guide me how to include them? Many thanks, keep up the good work!

div inside anchor tag is invalid according to w3c

Why not convert div tag into span? or some tag that valid on w3c standard?

Pinterest working?

Not able to successfully share an image with the Pinterest button. Not a user of the service, so I'm not sure of the details, but perhaps something has changed in how sharing works. Generated url from sharingbuttons.io is this: https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fanneklein.com%2Fak-content%2Fuploads%2F2016%2F02%2Fak-color-front.jpg&summary=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.

Attached is a screenshot of the Pinterest error.

Move CSS out of JS

Massive performance problem when changing the URL or the Text

This is due to the syntax highlighting with highlight.js (these LoC). Anybody got a better solution? Going to try react-highlight.

EDIT: react-highlight is also using highlight.js under the hood and is none the faster.

Test in email

Looking for someone with access to an Email On Acid account and/or Litmus account to test sharingbuttons.io code in an email. Is that you? 😁

Cross-browser testing

• OSX Chrome Canary
• OSX Chrome
• OSX Firefox
• OSX Safari
• OSX Opera

• Windows Firefox
• Windows Chrome
• Windows Internet Explorer 11
• Windows Internet Explorer 10
• Windows Microsoft Edge

• Android Chrome
• Android Chrome Beta
• Android Firefox
• Android Dolphin Browser
• Android Opera
• Android UC Browser
• Android UC Browser Mini (w/o speed mode)

• iOS Chrome
• iOS Safari
• iOS Opera Mini

WordPress Plugin

Would love to see a WordPress plugin. Most WP plugins are either slow or just clunky with bloated code and unnecessary frills. Since page load time is a big concern for websites these days, would be great to have a WP plugin built that has no JS and loads fast without using much resoruces.

Add VK.com

VK (old name VKontakte, "in contact") is a very active social network of Russian origin, it's audience size is ~5% of that of Facebook, which is still incredibly huge.

API docs: https://new.vk.com/dev/share_details

The icons in the preview are too small

Nicer loading animation

Maybe get rid of it altogether?