How to post to the steem blockchain remotely from any webpage

Posting remotely to the steem blockchain might come handy in any situation and that is the more reason why I am posting this tutorial to give guidelines on how that can be done.

All you need for this to be possible is just some javascript , html, a little php and that's all. You don't even necessarily need a server, it can all be done from your home browser, if you exempt the php variables and write directly.

We will only be making use of a single html.

So the steps below explains how to create the different sections of the file after you have created an empty html file that I suggest you name "Index.php" because I will be giving a little php addition to the script though it is not necessary for all situations.

Step1: Create the HEAD.

Copy the codes below as HEAD for the html

<html>
<head>
<title>steem-js posting example</title>
<script src="jquery.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script language="JavaScript">
function postArticle()
{
  steem.broadcast.comment(
    '<?=$postingKey?>',
    '<?=$author?>', 
    '<?=$mainTag?>',
  '<?=$userName?>', 
   '<?=$permLink?>' , 
   '<?=$title?>' ,
    '<?=$body?>', 
    { tags: [<?=$xtraTag?>], app: '<?=$appName?>' },
    function (err, result) {
      if (err)
        alert('Failure! ' + err);
      else
        alert('Success!');
    }
  );
}
</script>
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
</head>

This above codes contains the javascript functions that will control the whole process of posting , so read attentively as I explain the codes.

steem.broadcast.comment

This is the steemjs function that is used for posting and commenting as both posting and commenting as seen as same thing on the steem blockchain

$postingKey

This refers to your Posting Key, not your master key . There is a posiibility of error occuring if you used other keys apart from posting key. The posting key can found in the transfer (permission)section of your steemit profile page

$author

This can be left empty. Just pass an empty string

$mainTag

Ever noticed that every post on steem has a major tag section that can not be edited even while updating all already written post. That is what this variable represent so whatever you do, remember it is permanent.

$userName

This simply refers to your username

$permLink

Every Post created has a perm link attached to it. the permLink represent the structure of the url. In this case, you are allowed to pick how you want your permlink to look like. A permLink always look like this seperated by dashes.

how-to-make-php-powered-drag-and-drop-upload-page

Be careful what you pick here too because it can also not be changed. It'a permanent entry.

$title

This simply refers to the title of the article you are posting

$body

This simply refers to the body of the article you are posting. I will advise that you are careful of formatting here to avoid javascript error , always inspect the codes during error using the inspecting element of your browser.

$xtraTag

This is the extra tag that comes with an article apart from the main unchangeable tag I mentioned earlier.

$appName

This is just to state the app you are posting from. You could just use 'steemjs-test!' if you don't know what to write.

Mind you, all this php variables needs to be assigned certain values for your script to work effectively and if you prefer, you can remove the php variables and write directly.

STEP 2: Create the Body and close the HTML TAG

Just copy this code as follows:

<body onLoad="postArticle()">
</body>

The above codes means the javscript will automatically run when the page is loaded. This makes this script easy to sue as a cron job in case of absential and scheduled posting.

Then close the html tag with </html>.

When you run this page, you see a success alert , that means your post has been submitted to the blockchain and it is now visible on your profile.

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @akintunde 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!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

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

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

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