Hack of the Tumblr Button WordPress

• SOLVED

I am needing some help hacking the code of the new Tumblr button to include the first image of the post (which i use for my thumbnail) followed by the excerpt of text similar to how the Tumblr button works on Mashable.com.

Below is the code of my button:

<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink()) ?>&name=<?php echo urlencode(get_the_title()) ?>&description=<?php echo urlencode(the_excerpt()) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

I hovered over Mashable's button and this is the URL they create for their button. (example is from this page -> http://mashable.com/2011/05/26/google-mobile-payment-system-liveblog/)

http://www.tumblr.com/share/link?url=http%3A%2F%2Fmashable.com%2F2011%2F05%2F26%2Fgoogle-mobile-payment-system-liveblog%2F&name=Google+Reveals+Mobile+Payment+System%3A+Google+Wallet&description=%3Cimg+src%3D%22http%3A%2F%2Fmashable.com%2Fwp-content%2Fuploads%2F2011%2F05%2Fgoogle-wallet-360x225.jpg%22+alt%3D%22Google+Reveals+Mobile+Payment+System%3A+Google+Wallet%22+width%3D%22125%22+%2F%3E%3Cbr+%2F%3EAt+Google%27s+media+event+Thursday+in+New+York+City%2C+the+company+unveiled+Google+Wallet%2C+its+mobile+payment+system%2C+as+well+as+more+details+about+Google+Offers.+Mashable+was+at+the+event+for+the+announcements.+Here+is+a+recap+of+what+happened.+%0D%0A%0D%0AAnnouncements+Recap%3A+Google+Wallet+%26+Offers%0D%0A%0D%0A11%3A5...

Thanks!

Answers (2)

2011-05-26

Kailey Lampert answers:

Try this and let me know if that's what you're after:

<?php
preg_match('/<img[^>]+>/i', $post->post_content, $match_array );
$img = count($match_array) > 0 ? $match_array[0] : '';
?>

<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink()) ?>&name=<?php echo urlencode(get_the_title()) ?>&description=<?php echo urlencode($img . get_the_excerpt()) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>


2011-05-26

Ivaylo Draganov answers:

Hello,

use this snippet to get the first image attached to a post:
[[LINK href="http://snipplr.com/view/12513/display-the-first-image-attachment-of-a-wordpress-post/"]]http://snipplr.com/view/12513/display-the-first-image-attachment-of-a-wordpress-post/[[/LINK]]

And then use the result in your link attribute:

<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink()) ?>&name=<?php echo urlencode(get_the_title()) ?>&description=<?php echo urlencode(wp_get_attachment_image($first_attachment->ID)); ?><?php echo urlencode(the_excerpt()) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>


You could also get the first image of a post with the excellent plugin - [[LINK href="http://wordpress.org/extend/plugins/get-the-image/"]]Get the Image[[/LINK]]

With that plugin in order to get the first attached image you could just use:

<?php get_the_image( array( 'image_scan' => true ) ); ?>