creative web design and development studio

Tarpipe is a great little tool to update your status with various social networking sites all at once.

Whether you want to update your status with twitter, facebook, tumblr or want to send pictures to flickr, twitpic etc. it is now so easy with tarpipe. It is a 2 step process to set up. You just have to 1. create some workflows for certain tasks you do regularly 2. prepare bookmarklets for them and let tarpipe do the rest for you.

Create a Workflow

Here is an example workflow that is used to update my tumblr and twitter accounts.

In order to get this workflow perform for us, first we need to setup our accounts for those social networking sites authorised with tarpipe.

This is relatively easy. All you have to do is select the accounts you wish tarpipe to access and authorise them. You will need to login to those accounts and approve tarpipe application to access them. Once done you will see those accounts as configured with tarpipe like the image on the right.

Now that we have the accounts setup, lets create our first workflow.

Select workflows tab and click on "create a new workflow" link.

Enter workflow details and make sure "REST API" option is selected from the dropdown menu.

Select as many connectors as necessary and join them depending how you want to construct the flow.

What my setup above does is to

• Get title and body elements from the bookmarklet
• Pass them to tumblr
• Use is.gd service to shorten tumblr post URL
• Pass that url to twitter with the title from the start

Saving workflow will trigger tarpipe to give an API key which we will need to setup our browser bookmarklet.

Create Bookmarklet

All right, we've got the workflow setup done but now what! How is that going to help the process.

Well, common scenario for me is, when I like a website that deserves publishing on tumblr and twitter I do this with one click on the bookmarklet -two clicks if you count the submit button!

Here is what the dialogue window looks like

Bookmarklet gets the current URL and title which I can further edit if I wish and upon submit it uses that API key we've talked about before to find the workflow and passes the data.

So to get started, first of all we need to construct a form just like any other web form.

<form action="http://rest.receptor.tarpipe.net:8000/?key=PUTYOURKEYHERE" method="POST" enctype="multipart/form-data">
<table width="600" border="0" cellspacing="5" cellpadding="10" style="font-family:Tahoma, Geneva, sans-serif;">
  <tr>
    <td>Title</td>
    <td><input type="text" size="100" name="title" value="'+document.title+'"/></td>
  </tr>
  <tr>
    <td>Link</td>
    <td><input type="text" size="100" name="body" value="'+location.href+'"/></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="Submit" value="Send to Twitter" style="height:50px; width:100%; font-size: 2em"/></td>
    </tr>
</table>
</form>

In form action, make sure you change where it says "PUTYOURKEYHERE" with your API key.

Second part is to put this together with javascript

javascript:
popw=window.open('','Tarpipe micro-post','width=720,height=180');
popw.focus();
popd=popw.document;

popd.write('<form action="http://rest.receptor.tarpipe.net:8000/?key=PUTYOURKEYHERE" method="POST" enctype="multipart/form-data">');
popd.write('<table width="600" border="0" cellspacing="5" cellpadding="10" style="font-family:Tahoma, Geneva, sans-serif;">');
popd.write('  <tr>');
popd.write('    <td>Title</td>');
popd.write('    <td><input type="text" size="100" name="title" value="'+document.title+'"/></td>');
popd.write('  </tr>');
popd.write('  <tr>');
popd.write('    <td>Link</td>');
popd.write('    <td><input type="text" size="100" name="body" value="'+location.href+'"/></td>');
popd.write('  </tr>');
popd.write('  <tr>');
popd.write('    <td colspan="2"><input type="submit" name="Submit" value="Send to Twitter" style="height:50px; width:100%; font-size: 2em"/></td>');
popd.write('  <tr>');
popd.write('</table>');
popd.write('</form>');

And encode URI component in popd.write sections.

javascript:
popw=window.open('','Tarpipe micro-post','width=720,height=180');
popw.focus();
popd=popw.document;

popd.write('%3Cform%20action%3D%22http%3A%2F%2Frest.receptor.tarpipe.net%3A8000%2F%3Fkey%3DPUTYOURKEYHERE%22%20method%3D%22POST%22%20enctype%3D%22multipart%2Fform-data%22%3E');
popd.write('%3Ctable%20width%3D%22600%22%20border%3D%220%22%20cellspacing%3D%225%22%20cellpadding%3D%2210%22%20style%3D%22font-family%3ATahoma%2C%20Geneva%2C%20sans-serif%3B%22%3E');
popd.write('%20%20%3Ctr%3E');
popd.write('%20%20%20%20%3Ctd%3ETitle%3C%2Ftd%3E');
popd.write('%20%20%20%20%3Ctd%3E%3Cinput%20type%3D%22text%22%20size%3D%22100%22%20name%3D%22title%22%20value%3D%22'%2Bdocument.title%2B'%22%2F%3E%3C%2Ftd%3E');
popd.write('%20%20%3C%2Ftr%3E');
popd.write('%20%20%3Ctr%3E');
popd.write('%20%20%20%20%3Ctd%3ELink%3C%2Ftd%3E');
popd.write('%20%20%20%20%3Ctd%3E%3Cinput%20type%3D%22text%22%20size%3D%22100%22%20name%3D%22body%22%20value%3D%22'%2Blocation.href%2B'%22%2F%3E%3C%2Ftd%3E');
popd.write('%20%20%3C%2Ftr%3E');
popd.write('%20%20%3Ctr%3E');
popd.write('%20%20%20%20%3Ctd%20colspan%3D%222%22%3E%3Cinput%20type%3D%22submit%22%20name%3D%22Submit%22%20value%3D%22Send%20to%20Twitter%22%20style%3D%22height%3A50px%3B%20width%3A100%25%3B%20font-size%3A%202em%22%2F%3E%3C%2Ftd%3E');
popd.write('%20%20%3Ctr%3E');
popd.write('%3C%2Ftable%3E');
popd.write('%3C%2Fform%3E');

You can use an online URI Encoder / Decoder such as this or that or learn more about it here.

Finally get rid off all line breaks

javascript:popw=window.open('','Tarpipe micro-post','width=720,height=180');popw.focus();popd=popw.document;popd.write('%3Cform%20action%3D%22http%3A%2F%2Frest.receptor.tarpipe.net%3A8000%2F%3Fkey%3DPUTYOURKEYHERE%22%20method%3D%22POST%22%20enctype%3D%22multipart%2Fform-data%22%3E');popd.write('%3Ctable%20width%3D%22600%22%20border%3D%220%22%20cellspacing%3D%225%22%20cellpadding%3D%2210%22%20style%3D%22font-family%3ATahoma%2C%20Geneva%2C%20sans-serif%3B%22%3E');popd.write('%20%20%3Ctr%3E');popd.write('%20%20%20%20%3Ctd%3ETitle%3C%2Ftd%3E');popd.write('%20%20%20%20%3Ctd%3E%3Cinput%20type%3D%22text%22%20size%3D%22100%22%20name%3D%22title%22%20value%3D%22'%2Bdocument.title%2B'%22%2F%3E%3C%2Ftd%3E');popd.write('%20%20%3C%2Ftr%3E');popd.write('%20%20%3Ctr%3E');popd.write('%20%20%20%20%3Ctd%3ELink%3C%2Ftd%3E');popd.write('%20%20%20%20%3Ctd%3E%3Cinput%20type%3D%22text%22%20size%3D%22100%22%20name%3D%22body%22%20value%3D%22'%2Blocation.href%2B'%22%2F%3E%3C%2Ftd%3E');popd.write('%20%20%3C%2Ftr%3E');popd.write('%20%20%3Ctr%3E');popd.write('%20%20%20%20%3Ctd%20colspan%3D%222%22%3E%3Cinput%20type%3D%22submit%22%20name%3D%22Submit%22%20value%3D%22Send%20to%20Twitter%22%20style%3D%22height%3A50px%3B%20width%3A100%25%3B%20font-size%3A%202em%22%2F%3E%3C%2Ftd%3E');popd.write('%20%20%3Ctr%3E');popd.write('%3C%2Ftable%3E');popd.write('%3C%2Fform%3E');

Show Me the Result!

To save you all this work, add this tarpipe bookmarklet for twitter to your bookmarks, make sure you've got the API key correct and enjoy speed twittering or tarpiping should I say! Either way it is quite addictive :)

For further information and examples you can visit tarpipe development guide.

email | follow | peak

Cem Meric

Cem runs a creative web design and development studio called Webunder, specialising in ExpressionEngine CMS and he is an active member of the ExpressionEngine forums.

When he's not working, he enjoys being a hero with friends.

 

• next
• previous