Add new service Buffer

[richard67]

This pull request (P) adds the new service "Buffer" for buffer to Shariff.

Buffer is something very similar to AddThis.

The URL for the button I found here: https:/bradvin/social-share-urls#buffer.

Buffer also provides share counts. A PR to add the "Buffer" service to Shariff-Backend-PHP can be found here: heiseonline/shariff-backend-php#155.

Dependencies

This PR requires PR #360 in order to have an icon for Buffer.

About button colors

The original sharing button of Buffer has black logo on grey background, and their sharing count has some kind of green background, see here: https://buffer.com/extras/button:

This design does not really fit to Shariff.

On their website, buffer.com have sharing buttons on their own pages.
They look as follows:

There is no hover effect.

Another thing I found was a Wordpress plugin with buttons looking as follows:

(Buffer button is the leftmost one in both examples).

So I've decided for following button colors, with color numbers picked from the official buffer icon:

Standard theme:

Grey theme:

Standard or grey theme hovered:

White theme:

White theme hovered:

How to test:

The test is done with a branch which includes the changes from PR #360 and this PR here.

Run the shariff demo site locally on a Linux host which has git and npm installed with the branch of this PR as follows:

$ mkdir shariff-test-pr361
$ cd shariff-test-pr361
$ git clone https:/richard67/shariff-plus.git
$ cd shariff-plus
$ git checkout upstream-test-buffer
$ git pull origin upstream-test-buffer
$ npm install
$ npm run dev

Check the result in the browser, URL=http://localhost:3000/.

Check the result

Verify that a new button for Buffer has been added at the end of examples 2, 3 and 4 of the demo, that the buffer icon fits to the brand icon on https://buffer.com/, that the button colors are as described above, and that the sharing links work and use the right title and URL.

Clean up after the test

$ cd ../..
$ rm -rf ./shariff-test-pr361

[richard67]

@compeak @liayn Do you think I should change colors of the button so they fit to the original button, see secion "About button color: Suggestions are welcome" in description above?

[liayn]

I think the color is fine, especially as they mention it in their styles guide

[richard67]

Well, they mention it, but not for their sharing button, that’s why I am not sure.
Thanks for the feedback.

[richard67]

@liayn @compeak I just noticed that buffer.com have sharing buttons on their own pages.
They look as follows:

There is no hover effect.

Another thing I found was a Wordpress plugin with buttons looking as follows:

(Buffer button is the leftmost one in both examples).

So it seems the blue color I have chosen is not the right one for people to recognize the Buffer button.

First example is a very dark grey, second one looks a little bit lighter (or transparent?).

Colors could be picked from official Buffer icon which I have downloaded, e.g. #555555 for the very dark grey.

Hovering effect I would have to chose some lighter grey on my own.

Guys what do you think? Should I go this way?

[richard67]

@liayn @compeak I've decided myself and changed colors. I'll update description above.

[compeak]

Thank you.