A Steemit button next to Facebook, Twitter and Google +? Let's do it.

in #steemit8 years ago

I've been working on making myself a button to possibly implement below blog posts which where readers could automatically share the content onto steemit. It's just a first try and pretty flawed right now, but I'll be working on improving it.

Features

  • Grabs all needed data, such as:
    • Title
    • Text
    • Tags
  • Further, it also grabs the source URL and adds it at the bottom

And yeah that's it already. Sadly, it still has a lot of problems though:

Flaws

  • Does not put title and tags at the right spot, so the user has to copy them manually
  • Does not automatically input the text but only puts it in the users dashboard, so he has to paste it manually

Source Code

This is the "steemitshare" function:

        function steemitshare(title, text, tags) {
            alert("You will now be redirected to Steemit. The article is in your clipboard, just paste it.");
            var title_content = document.getElementById(title).innerHTML;
            var text_content = document.getElementById(text).innerHTML;
            var tags_content = document.getElementById(tags).innerHTML;
            var url = window.location.href;
            var article =   "Title: "+title_content+"\n\n"+text_content+"\n\nSource: "+url+"\n\nTags: "+tags_content;
            if (window.clipboardData && window.clipboardData.setData){
                clipboardData.setData("Text", article); }
            else if (document.queryCommandSupported && document.queryCommandSupported("copy")){
                var textarea = document.createElement("textarea");
                textarea.textContent = article;
                textarea.style.position = "fixed";
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand("copy");
                document.body.removeChild(textarea);}
            window.open("https://steemit.com/submit.html");}

To run it, you need an element (like a button with the steemit logo) and add this attribute in the tag:

onclick="steemitshare('title', 'text', 'tags')"

Where
'title' => The ID of the element containing the title, most likely a <h1> element
'text' => The ID of the element containting the text, most likely a <p>element
'tags' => The ID of the element containing the text

Full example Site

The code of a working example site can be found here. For some reason steemit wouldn't let me post a whole html page.

To Do

Well basically all the flaws need to be removed, that's it already. I'm giving my best and will keep you guys updated. Any feedback or helpful comment is very appreceiated.
#steemit #steemhelp #steem

Sort:  

I upvoted You

Imagine if every blogger would be able to put steemit upvotes and payout price directly to their own website? Adoption would be increase right away. I wonder if it is actually possible to do?

well it would be technically possible but I suppose there would be some work on the developers side needed. That probably can't be done by a 3rd party developer.

Not sure though :P We got some really good coders on here.

That's awesome, I can't wait to regularly see the Steemit symbol as a clickable share. Keep at it, you'll get those kinks worked out, and we'll all be grateful for it :)