DABR Twitter Web Client Mini Blog Yo Mama Jokes Sports Bookmarklets About Us

November 24, 2009

Expanding DABR Photo-Upload options



 

One of the most underrated parts of Dabr IMO is the Twitpic upload page. It allows you to interact with a Twitter helper service that uses the same login information as your twitter account. And since Twitter has speced out how the uploadAndPost process works, lots of other Twitter helper services use it in their API – such as YFrog, Twitgoo, Twitvid, and Posterous (which slickly reverse matches your autopost-twitter information in order to validate your posterous account). But Posterous is pretty slick all around – probably the best tumble blog/micro blog/media blog service out there and certainly the most expandable. Perhaps in the future I might try to integrate some more later.

Dabr photo upload twitpic yfrog twitgoo twitvid posterous imgurAnyways, I figure I’d give it a go to add some more services to the twitpic page – keyed off a service dropdown. The hardest part in reality was managing the options allowed by each service (i.e. URL upload instead of file upload, additional message body). In addition, I wanted to add support for a site that I use all the time – Imgur. They didn’t implement the uploadAndPost spec so I had to make a few exceptions as well as add an extra step to post the tweet along with the uploaded image file. Took a while to work out all the kinks (one large kink remaining is that Twitvid uploads don’t work LOL) but this page pretty much saves me from ever having to go to those sites again to upload images!

function twitter_twitpic_page($query) {
  // Check for oAuth credentials
  if (user_type() == 'oauth') {
    return theme('page', 'Error', '<p>You can't do media uploads while accessing Dabr using an OAuth login.</p>');
  }

  //verify that we're entering this page from posting the form  
  if ($_POST['service']) {
  
    // format and shrink/truncate associated status message
    $status = prepare_status($_POST['message'],120);
     
    // set the  api url based on the service name (all similar except imgur)
    $postUrl = 'http://'.$_POST['service'].'.com/api/uploadAndPost';

     // prepare the fields array with the common elements
    $postData = array(
      'username' => user_current_username(),
      'password' => $GLOBALS['user']['password'],
      'message' => $status,);
       
     // perform service-specific tasks
     switch ($_POST['service']){
         case 'imgur':
               if (!defined('IMGUR_API_KEY')){
                    twitter_refresh('twitpic/fail/'.$_POST['service'].'/'.urlencode('API KEY undefined'));
               }
               
               // imgur doesn't use the Twitter standard uploadAndPost spec
               $postUrl = 'http://imgur.com/api/upload.xml';
               
               //if URL is provided, send URL for imgur to rehost, otherwise use selected file
              if (empty($_POST['url'])){
                   $postData = array(
                         'key' => IMGUR_API_KEY, 
                         'image' => '@'.$_FILES['media']['tmp_name']);
              } else {
                   $postData = array(
                         'key' => IMGUR_API_KEY, 
                         'image' => $_POST['url']);
              }
               break;
          case 'yfrog': 
               if (!defined('YFROG_API_KEY')){
                    twitter_refresh('twitpic/fail/'.$_POST['service'].'/'.urlencode('API KEY undefined'));
               }
               $postData['key'] = YFROG_API_KEY;
               
              // Yfrog can also accept a URL as the media source
              if (!empty($_POST['url'])){
                   $postData['url'] = $_POST['url'];
              } else {
                    $postData['media'] = '@'.$_FILES['media']['tmp_name'];
               }
               break;
          case 'posterous':
              // Posterous has an additional comments element and will fall through to the default
               $postData['body'] = stripslashes($_POST['body']);
         default:
               $postData['media'] = '@'.$_FILES['media']['tmp_name'];
     }

     // make the api call
    $response = twitter_process($postUrl,$postData);

     // check response XML for associated IDs
     // for uploadAndPost supporting services
    if (preg_match('#mediaid>(.*)</mediaid#', $response, $matches)) {
      $id = $matches[1];
       
       // Twitvid allows crossposting to Youtube
      if (preg_match('#youtube_id>(.*)</youtube_id#', $response, $matches)) {
           $altid = $matches[1];
      }
       
       // Posterous sends back a separate shortened URL code
      if (preg_match('#mediaurl>http://post.ly/(.*)</mediaurl#', $response, $matches)) {
           $altid = $matches[1];
      }
       
       // show success messsage and pass IDs to create links to media
      twitter_refresh("twitpic/confirm/".$_POST['service']."/$id/$altid");
    } 
     // response for imgur uses different element names
     elseif (preg_match('#image_hash>(.*)</image_hash#', $response, $matches)) {
      $id = $matches[1];
       
       // the secret delete link/code is offered only once and should be shown in the confirmation
      if (preg_match('#delete_hash>(.*)</delete_hash#', $response, $matches)) {
           $deleteid = $matches[1];
      }
       
       // we need the actual imgur link in order to post status to Twitter 
      if (preg_match('#original_image>(.*)</original_image#', $response, $matches)) {
           $imglinkid = $matches[1];
      }

       // update status with the image link
      $status .= " $imglinkid ";

       // post the status to twitter
      $response = twitter_process('http://twitter.com/statuses/update.json',
           array('source' => 'dabr', 'status' => $status));

       // show success message, link to image, and hidden delete link
      twitter_refresh("twitpic/confirm/".$_POST['service']."/$id/$deleteid");
    } else {
          // collect errors from response
         if (preg_match('#error_code>(.*)</error_code#', $response, $matches)) {
              $error = "Error Code: $matches[1]. ";
         }
         if (preg_match('#error_msg>(.*)</error_msg#', $response, $matches)) {
              $error .= "Error Msg: $matches[1]. ";
         }
         if (preg_match('#err.code="(.*)" msg="(.*)" />#', $response, $matches)) {
               $error = "Error Code: $matches[1] Error Msg: $matches[2]";
         }
            
          // show failure messages
         twitter_refresh('twitpic/fail/'.$_POST['service'].'/'.urlencode($error));
    }
  } 
  // Page mode to show confirmation and media links
  elseif ($query[1] == 'confirm') {
    $postedlink = "Media: http://$query[2].com/$query[3]";
    if ($query[2] == 'imgur' && !empty($query[4])){
         $postedlink .= " // Hidden delete link: http://imgur.com/delete/$query[4]";
    }
    if ($query[2] == 'twitvid' && !empty($query[4])){
         $postedlink .= " // Youtube:  http://www.youtube.com/watch?v=$query[4]";
    }
    if ($query[2] == 'posterous' && !empty($query[4])){
         $postedlink = "Post: http://post.ly/$query[4]";
    }
     
     // show formatted confirmation to add thumbnails
    $content = "<p>Upload success.</p><p>".twitter_parse_tags($postedlink)."</p>";
  } 
  // page mode for failure - show errors
  elseif ($query[1] == 'fail') {
    $content = "<p>$query[2] upload failed: $query[3]</p>";
  } 
  // otherwise show form
  else {
    $content = '<style type="text/css">.disabletrue{background:#ddd;}.disablefalse{background:#fff;}</style>
          <script type="text/javascript">function disable(sel){service=sel.options[sel.selectedIndex].value;sel.form.url.disabled= (service != 'yfrog' && service != 'imgur');sel.form.body.disabled= (service != 'posterous');sel.form.url.className= 'disable'+(service != 'yfrog' && service != 'imgur');sel.form.body.className= 'disable'+(service != 'posterous');}</script>
          <form name="twitpic" method="post" action="twitpic" enctype="multipart/form-data"><br />Service: <select name="service" onChange="disable(this);"><option value="twitpic">Twitpic</option><option value="twitgoo">Twitgoo</option><option value="yfrog">Yfrog</option><option value="imgur">Imgur</option><option value="twitvid">Twitvid</option><option value="posterous">Posterous</option></select><br />Upload: <input type="file" name="media" /><br />Message: <input type="text" name="message" maxlength="120" /><br />Image Url: <input type="text" name="url" maxlength="120" /><br />Body:<br><textarea style="position:relative;top:-14px;left:67px;" cols=50 rows=3" name="body"></textarea><br /><input type="submit" value="Upload" /></form>
          <script type="text/javascript">disable(document.forms['twitpic'].service);</script>';
  }
  return theme('page', 'Twitpic Upload', $content);
}

I also had to update the twitter_photo_replace function, which I use to show the thumbnail of the image on the confirm page, to add the imgur regexes

    '#imgur.com/([w]{5})[s.ls][.w]*#i' => 'http://imgur.com/%ss.png',
    '#imgur.com/gallery/([w]+)#i' => 'http://imgur.com/%ss.png',
    '#imgur.com/delete/([w]+)#i' => 'images/trash.gif',

A lot of code, but to me it’s worth it!

Bookmark and Share Email This Print This PDF This Blog This Facebook Twiit Google Google Yahoo! Buzz Ping StumbleUpon LinkedIn MySpace

Popularity: unranked [?]

November 15, 2009

Integrating Ping.fm and Wordpress (quick and dirty)



 

More social networking script goodness – this time with Ping.fm. Ping.fm is a very slick service that allows you to ping, or update all your blogs, social networks or other presence apps at once via the web, IM, SMS, email, and a variety of other ways. For example, you can update your Facebook and Twitter with the same status from IM, post new photo blogs to your Flickr and your Tumble blog from your Cell phone, or update your Blogger, LiveJournal and Wordpress.com blogs via email. It’s extremely flexible and customizable with groups, directives. link tracking and more. It could very well be the glue that keeps all our online identities in sync.

The one hole it does have (that affects me) is the self-hosted Wordpress blog. There are lots of cleaner alternatives to this problem and surely this little code exercise of mine isn’t meant to be a replacement for a good wordpress plugin like Matt Jacob’s Ping.fm WordPress Plugin. It’s just a quick and dirty way to get things working in a hurry.

I cobbled it together based on some code to post to the WP database that I found from DanBrown on SitePoint Forums as well as the Ping.fm Developer docs. It’s a page that also allows for some testing with form inputs. Place it in the root of your Wordpress installation and set up the page link in Ping.fm as a Custom URL. Hope it helps someone!


Bookmark and Share Email This Print This PDF This Blog This Facebook Twiit Google Google Yahoo! Buzz Ping StumbleUpon LinkedIn MySpace

Popularity: unranked [?]

Improved Sharing and Twitter Bookmarklet



 

Since my last forays with Mini-blogging (or microblogging) and bookmarkletting, lots of things have changed. Specifically for this purpose, the url-shortening service urlTea was yanked. It forced me to switch to tinyurl and then to tr.im – which also almost went down. Along with increasingly sharing more links on sites other than Twitter, I combined some of my other bookmarklets into an all-in-one server-driven bookmarklet bonanza.

This new server side script will facilitate sharing links via Twitter, Facebook, email, BB Code forums, blogs/Myspace. Since the Twitter explosion this year – many more cool url shortening services have opened and offered API’s like is.gd and u.nu. Twitter now uses bit.ly/j.mp but since it needed a login, I didn’t bother. There is no more JSON, just straight API calls.

This new code still solves the problem of allowing you to provide context for your tweet or other form of sharing – and also integrates flexibility amongst using shortened URLs or not, and which shortening service to use. It can be used as a stand-alone script, or as a bookmarklet. The bookmarklet still captures the link, title, and any selected text on the page you want to share. It can be set to automatically forward to Twitter, or to stay on the helper popup. In the case of the latter, there is still a button that allows you to forward the link, title, and any selected text to Twitter where you handle editing and the character count.

The beauty of this approach is – if you don’t want to share on Twitter, or also want to share on other sites, you can get the code needed to post on MySpace or Facebook or by email or on sites that use BBCode. Here is the bookmarklet. As usual – drag it to your Bookmarks or Links bar, or simply bookmark it.

Twiit or Auto-Twiit

As always, the bookmarklet is a simple link that contains javascript. You click it whenever you’re on a web page that you want to share. Again, I offer no appologies or warranties. Take it and make it yours if you like it. Or just use the bookmarklet here and let me know how it works.

The PHP:

Bookmark and Share Email This Print This PDF This Blog This Facebook Twiit Google Google Yahoo! Buzz Ping StumbleUpon LinkedIn MySpace

Popularity: unranked [?]

Powered by WordPress

Blog Information