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

December 25, 2009

Upgur – an Imgur bookmarklet

Filed under: Code, Javascript, PHP, Twitter, bookmarklets, social networking — webadmin @ 7:43 am


 

This bookmarklet eases the chore of uploading an image to an image hosting site (in this case Imgur) for you to share socially or use in a website or html comment. No more downloading and re-uploading. Simply drag this bookmarklet to your links/bookmarks bar

Upgur

Point your browser to an actual image file (In Firefox you can right click and open the image in it’s own tab), then click on the bookmarklet and voila!

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

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 Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

November 23, 2009

Ping.fm PingDash Bookmarklet



 

I may have stumbled on a great workaround for the PingOut problem. When last I addressed this:

Ping.fm PingPlus Bookmarklet | myopiclunacy.com

UPDATE (Nov 18, 2009): Commenter Andy pointed out another Ping.fm Bookmarklet on Mentoliptus that uses the PingOut popup. This popup is a hell of a lot nicer than the Ping This interface and gives you all the options of posting to single services or groups. Only thing is that it’s context insensitive. I tried passing parameters to it but it ignored them all. So for now I’ll continue using PingPlus as it is for context sensitive stuff until hopefully they update the PingOut interface to allow URL parameters. That would be the holy grail Ping bookmarklet!

Well, the Pingout page doesn’t accept URL parameters, but it seems the Dashboard page does! So a quick change to the PingPlus bookmarklet and we’re a lot closer to the holy grail:

PingDash

Works the same way except it takes you to the Ping.fm Dashboard with status already filled in and you have complete control over the services, groups, or whatever you want to Ping.

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

November 19, 2009

Google Images Bookmarklet



 

A cool little script I cobbled together for making Google Images thumbnails link directly to the image instead of going to the split-frame of the page it came from. I did it partly because the CustomizeGoogle extension to Firefox seems to have lost this feature and partly so I can use it on other browsers as well. It’s spaghetti code (for javascript), but it’ll do.

GoogleImages

Helpful when looking up pictures of Megan Fo… I mean the Green Bay Packers! :)

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

November 18, 2009

Ping.fm PingPlus Bookmarklet



 

UPDATE: Better bookmarklet here? Check it out!


One more Ping.fm goodie. I wrote before about 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.

I’m one who doesn’t like browser-specific toolbars but adores bookmarklets because they’re portable across browsers/systems (most of the time). Well Ping.fm has a basic bookmarklet that grabs the page name and title:

Ping this! Bookmarklet

Drag this link to your browser’s bookmark toolbar or other area where you save bookmarks and grasp the power of Ping.fm with the click of a button! Instantly post links to your social networks with the Ping this! bookmarklet.

Ping this!

But as I did with the Twiit bookmarklet I think it’d be nice to capture some selected text along with the page title . It makes even more sense for Ping.fm as you’re not necessarily constrained by a character count as you are in Twitter. So here it is:

PingPlus

Drag it to your links/bookmarks bar and when you get on page you want to Ping, click the bookmarklet. As with Twiit, this bookmarklet captures the link, title, and any selected text on the page you want to share and forwards it to the Ping this! page.

Happy pinging.

UPDATE (Nov 18, 2009): Commenter Andy pointed out another Ping.fm Bookmarklet on Mentoliptus that uses the PingOut popup. This popup is a hell of a lot nicer than the Ping This interface and gives you all the options of posting to single services or groups. Only thing is that it’s context insensitive. I tried passing parameters to it but it ignored them all. So for now I’ll continue using PingPlus as it is for context sensitive stuff until hopefully they update the PingOut interface to allow URL parameters. That would be the holy grail Ping bookmarklet!

I’ve also added a Ping button to the Twiit bookmarklet page

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

November 17, 2009

Blip.fm Embed Code Bookmarklet



 

If you’re a longtime user of Blip.fm for social music networking, you’ll know that this awesome service has been redesigned recently with new functionality. More access to stuff, more options – great, right? Unfortunately in the changes it seems the embeddable player was left out.

Not to worry, with this little bit of javascript bookmarklet you can get that functionality back. Just drag this bookmarklet link:

BlipEmbed

to your Links/Bookmarks bar and click it when you’re on an individual blip page. If you’re not sure you’re on the individual page, click the date and time of the blip as seen here:

Single Blip

When you activate the bookmarklet it will pop up a message with the HTML Embed code in the text box, just copy that all and paste it in your favorite web site, social networking site, etc and it will look something like this:

Easy Peasy. At least until they change this feature too – ha! Let’s hope not anytime soon.

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

November 15, 2009

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 Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

February 20, 2008

Quoting in Multiply Comment Fields



 

Ever wanted to quote more than one person in a reply comment field on social networking side Multiply? This bookmarklet might help:

QuoteIt

Just drag it to your Links or Bookmarks bar (or right-click it and bookmark/favorite it). It works on Firefox, but I haven’t tried IE or Safari.

What I do is highlight from the end of the response all the way back to the picture of the person on the left (that should select everything including their name), click the shortcut, and it adds the selected text and HTML code to your reply box at the bottom. You can do this as many times as you want – it’ll just keep adding to the reply box.

It’s not smart enough to know if you highlight 2 replies at once (do it one at a time – remember it all adds to the box before you hit “Submit”). Also if you only highlight a part of reply without highlighting who the reply was from, it’ll only quote the text you highlighted. Try it out. Of course, it may stop working if they upgrade the system.

Here are 2 other bookmarklets for:

Sharing/Blogging on the page you’re currently on: Share This
switching between mobile and regular versions of the page: unMultMobilize

Check out some other bookmarklets.

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: unranked [?]

November 6, 2007

Microblogging With urlTea – My Twitter Bookmarklet



 

UPDATE: Improved Sharing and Twitter Bookmarklet | myopiclunacy.com


As you know I’m trying the whole Mini-Blog thing now as a way of microblogging my thoughts – mostly on links to pages/stories I come across. Using a Twitter account and a plug-in called Twitter Tools from Alex King, I can show my Mini Blog on the left side, and then all the mini-blog entries/tweets for the day (using GMT time, unfortunately) get posted into a daily blog entry the next day. It’s a real cool tool.

Using Twitter for microblogging has become popular especially because Twitter will take any link it finds in your tweet and HTMLize it. One problem that I came across, though, was the cumbersome way of getting links and context into the tweet – a lot of copying and pasting going on. Because of the 140 character limit, Twitter has some kind of feature where it uses TinyUrl to shorten the urls posted into the status, but I couldn’t find a bookmarklet that would include the page title and a selection of text. Reason being, probably, this isn’t a highly requested feature. So I tried writing my own.

I did it in a somewhat cumbersome way, by using a bookmarklet to get the page URL, title, and selected text and call a PHP form that uses JSON to connect to the urlTea url shortening service. It then autoposts the form to the Twitter status window ready to be updated. All of this in a pop-up window and, of course, assuming you’re already signed into Twitter. I let Twitter handle the character count and any additional editing – especially when the page title and selected text become too long. The page title, the urlTea shortened link, and any selected text are copied in that order separated by a space.

TwitIt or TwrimIt

The bookmarklet is a simple link that contains javascript. You drag it to your link toolbar (or just bookmark it from the right-click menu) and click it whenever you want to microblog. (If you’re new to bookmarklets – they’re an awesome timesaver. Check out the other bookmarklets I use.) I’m sure this smacks of hackery and is rife with style infractions. 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.

Update (11/14/07): So after looking over a few pages, and the inexplicable problems I had with the JSON api, I’ve updated the script to use the regular API. Which I can switch to use TinyUrl if I need to. I suppose I could then have it use the twitter API but I want the intermediate editing step.

Update (1/17/09): Fixed issues with slashes and escaped code. Also added an option for using tr.im URL shortening service – which is shorter than tinyurl. Works much better. If you want to use tr.im, choose the TwrimIt bookmarklet. All this is pending an API key from the good folks at tr.im. BTW – urlTea is now defunct in case you were wondering!

The PHP page is real simple and portable:

<?php

$url = $_GET["url"];
$r1 = array(’”‘);
$r2 = array(”“”);
$title = str_replace($r1,$r2,stripslashes(htmlspecialchars(urldecode($_GET["title"]))));
$text = str_replace($r1,$r2,stripslashes(htmlspecialchars(urldecode($_GET["text"]))));
$urlt = file_get_contents(”http://tr.im/api/trim_simple?url=” . $url);
$urlt = file_get_contents(”http://tinyurl.com/api-create.php?url=” . $url);
// $urlt = file_get_contents(”http://tr.im/api/trim_simple?url=” . $url);
$status = “$title $urlt $text”
?>

<html>
<head>
<title>myopiclunacy.com’s Twitter TinuURl/tr.im submitter</title>
</head>
<body>
<form name=twit id=twit method=”get” action=”http://twitter.com/home”>
<input type=”hidden” name=”status” value=”<?php echo $status; ?>”>
</form>
<script type=”text/javascript”>
document.forms[0].submit();
</script>
</body>

If you’re looking for something for the Blackberry – check out this article from Tao of Mac.

Bookmark and Share Blog This Facebook Twiit Google Yahoo! Buzz Ping StumbleUpon Fark Propellor Netvouz Newsvine reddit Simpy Blinklist Blogmarks Mr Wong Startaid Segnalo Wists Boxed Up

Popularity: 4% [?]

Powered by WordPress

Blog Information