Share To Steem Website Widget

in #utopian-io7 years ago (edited)

share-to-steem.jpg

Details

Steem-share is a small javascript plugin that allows site owners to include a ‘share to Steem’ button similar to ‘share on facebook’ or ‘tweet this’. Slightly different on the Steem network as we only have the idea of a top-level post. It helps authors get more exposure and it helps Steemians share their favourite content for more rewards.

Check the live example running here.

Using Steem-share is as simple as including the CSS + HTML files and adding the HTML for a button where appropriate on a website.

<button class="ss-steem-share ss-steem-share-style"
data-title="This is a test from steem share"
data-category="testing-testing"
data-image="https://i.imgsafe.org/a7/a751d45421.jpeg"
data-content="Well would you look at that, I think this will be a pretty cool addition to the eco-system"
data-credit="<center>This post by @sambillingham was shared from [SteemShare](http://websitelink) Using Steem Share</center>"
>Share To Steem</button>

Screen Shot 2018-01-11 at 23.57.05.png

I've created a minified CSS and js file for production use. CSS is used to style the modal and buttons, the values are namespaced to .ss- prefix and can easily be overridden with user CSS. Javascript is used to open and close the modal, take the data from the Steem-share button and username input to construct the correct URL for Steemconnect.

View full setup instructions on the github Readme

Components

This is the initial release of Steem-share. The Repo contains the sources files along with the minified versions ready for distribution. To work on this project make edits to the /src/steem-share.html file, and open it in your browser to view changes.

There are no dependencies for this plugin.

Steem-share makes use of Steemconnects hotlinking feature, creating a link for users to sign the transaction that then posts the relevant information on their behalf. When clicking the 'share with Steem' button a modal opens for the user to enter their username, then go on to authenticate with Steemconnect.

Screen Shot 2018-01-11 at 23.55.05.png

Related issues

While there were no direct issues encountered I found a single limiting factor with the Steemconnect signing feature. Steemconnect allows you to sign a 'comment' transaction and a 'comment_options' transaction, the first being the content and the second allowing for adding of beneficiaries. It would have been pretty useful to combine those actions but with the current integration with Steemconnect this is not possible. While I could make this possible by asking for a posting key I prefer to rely on Steemconnect and let the user trust them instead.

Future enhancements and contributions

If anyone has any ideas for this project or wants to contribute feel free to submit a PR on Github or leave suggestions in the comments. My first thought is that it could be quite hard to distinguish original work. The upside is that this button is added by the author themselves, currently, there is also a credit link added at the very top of the post when sharing with this tool. Combined I feel pretty happy to release this idea into the wild.

In future, this could be a browser-extension or a Wordpress plugin. A way to allow a user to add commentary that is differentiated from the original post could make this a unique tool.

I had a sudden thought this needed to exist so thought I’d have a go at building it. Let me know what you think of the idea.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thanks for reviewing my project @mkt 💯

Hey @mkt, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

this is really great feature i want to share my steemian.

Nice one brother, great work! Very useful

Thank Derek, feels like this should totally be a thing as Steem grows. Everyone is used to 'share to facebook' so Steem should have the same

For sure it should be. I only use Facebook as a messenger service nowadays. Maybe could incorporate it into the shareaholic plugin for Wordpress.

Can it read share to Steemit, since steem is the blockchain, and steemit the web platform. You could also create for busy.org and utiopian.io. Nice Job!

Thanks. It possibly could read Steemit, the problem is that it's not posting to Steemit, it actually posts to the Steem blockchain. The platforms themselves choose whether to show 100% of the blockchain information or not. Using this tool it would show up on Steemit and Busy automatically because both of those platforms show 100% of the posts on the blockchain.

I've not checked if posting to utiopian.io through the blockchain is possible or not yet. It's only possible if they don't add internal tracking information to posts and store everything on the blockchain.

Looks good! What about making a plugin that lets you filter your feed by tag or something? I follow @steemsports but am only really interested in football, so I would like to not see other sports for example haha

Yeah that's totally possible, I've stayed away from making browser extensions so far which is what you'd want to do this. You could fairly easily have a list of tags to hide or a list of tags to only see. I'm not sure how much of this Steem-Plus already does and would rather request it as a feature on top of that to be honest rather than build another extension, but if it's not appropriate for that then sure i'll build it for you haha.

Hey @sambillingham I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Thanks Utopian 🤖 & Team 👨‍👩‍👦‍👦

Now could we get a chrome extension button to share things to steem? Maybe even an OS extension as well. This thing is way too insulated for real people.

Coin Marketplace

STEEM 0.17
TRX 0.16
JST 0.031
BTC 61586.28
ETH 2569.21
USDT 1.00
SBD 2.55