oEmbed plugin

[scaza]

oembed
Version: 0.3
Author: shawn caza
Created on: 2011/01/28
updated on: 2011/02/02
Tested on: Hotaru 1.4.2
Plugins Required: bookmarking
Plug & Play: Yes

Description
Will automatically embed media from select sites if a link to the media file web page appears on it's own line using parameters provided by oembed.

Instructions
1. Upload
2. Install
3. include a link on it's own line in a post.

note:
-photo links will also automatically include a 'photo by: *author* link under the photo
-the plugin checks for host matches of the form http://www.host.com which is less specific than much of the other oembed code i've seen but should be fine in most instances, However, this code does add object and embed tags for 3rd party content. I make no promises about how secure this is.
-if host is not on safe list or no oembed info is returned the link is displayed unchanged.
-to add sites to the supported list simply modify the array with the domain name and the json oembed link and replace the specific image/video page url reference with $1

Revision History
v.0.3 2011/02/02 - Shawn - now keeps trailing tags in final output for valid html, fix to include case of a trailing <br /> tag, more commented code
v.0.2 2011/01/29 - Shawn - strips any trailing html tags, support for image media, added nfb.ca and flickr to supported site list.

[seekyt]

I really wish I would have waited 4 days. I uploaded some plugins and changed a good part of the inspekt and htmlawed to be able to basically do something similar, but with buttons in the CKEditor plugin. Thanks for the awesome plugin, I'm sure this will come in handy for quite a few people.

[scaza]

fixed a few of the problems and added photo suppport.

[angolanmade]

Hey scaza,

The readme.tx file needs an update it currently has information for the tags plugin.

Great plugin by the way!

[scaza]

thanks angolanmade. I've re-uploaded the files.

Note I still haven't figured out the regular expression problem. At the moment the ckeeditor if not hotaru's content checking adds in <p></p> tags.
Even if you manually enter a <P> tag on the same line in source edit it seems to automatically separate the link onto a new line which is great for this plugin, however, it leaves the </p> without a space after the link. To work around this I use the strip_tags() function. This means when using this plugin some closing tags might be missing in the final render.

[scaza]

now keeps trailing tags, but if trailing tags contain too many spaces it won't work.

for example: mylink<br /> and mylink</p><p> are both fine

but mylink<br /><br /> won't be replaced.

[seekyt]

I'm trying to configure this plugin to allow amazon links via embed.ly

I'm using the following code, added to the end of OembedUrls array in oembed.php:


'www.amazon.com' => 'http://api.embed.ly/1/oembed?url=$1'

This seems to be the only one that does not work for some reason. I can get it to work using the oohembed version, but it doesn't look very nice. Have you been able to get embed.ly to work yet, and am I doing something wrong?

[scaza]

Are you trying to get an image or the oembed info for the whole amazon page? The 'http://api.embed.ly/1/oembed?url=$1' link is returning json info for the whole page. The plugin is currently only designed to handle photo or video info returned in the json format.

I'm not sure what you mean by doesn't look very nice. Wouldn't the image be the same image no matter where the oembed info comes from? If you mean the credit text that follows the image, that comes from this plugin, it can be left out or have the formatting changed on line 78
return '<a href="' . $html[1] . '" target="_blank"><img src="' . $oembedData->url . '" alt="' . $oembedData->title . '" width="' . $oembedData->width . '" height="' . $oembedData->height . '" /></a><br><span style="font-size: 10px;">Photo by: <a href="' . $oembedData->author_url . '" target="_blank">' . $oembedData->author_name . '</a></span>'. $tags;

[seekyt]

Thanks scaza. What I meant by "doesn't look very nice" was that the image which was being returned was blown up a little large, and I couldn't find the information to resize the content that was coming through. I read the oohembed documentation, and though it seems possible, I don't know how I should be changing it.

Anyway, now I'm curious about something:

Why is it that this code works

'http://www.oohembed.com/oohembed/?url=$1'

but the api.embed.ly version does not? I'm interested in learning whatever I can because there is a lot of really great potential with this plugin. Actually, I think the only thing similar on another CMS I once used was a paid "module" and so I'm very grateful you've built this free of charge.

[scaza]

well 'http://www.oohembed.com/oohembed/?url=$1' in the array get's updated when you send the function a specific url to check.

oohembed.com provides an oembed info for many different sites. Actually the array portion of the code could be simplified a great deal if we just used that site to check all the other sites. For better or worse I chose to link directly to host sites when possible. If we used ooembed for flickr in the array than if you have http://www.flickr.com/photos/7953357@N06/5414449509/ on it's own line it will check:

'http://www.oohembed.com/oohembed/?url=http://www.flickr.com/photos/7953357@N06/5414449509/'

which will return

{"version":"1.0","type":"photo","author_url":"http:\/\/www.flickr.com\/photos\/7953357@N06\/","cache_age":3600,"provider_name":"Flickr","provider_url":"http:\/\/www.flickr.com\/","title":"bee finger","author_name":"Shawn Caza","width":"450","height":"263","url":"http:\/\/farm5.static.flickr.com\/4113\/5414449509_4f332a1b57.jpg"}

The width and height are specified. So you should not get a image that is blown up beyond it's actual image dimensions. around 500px seems to be the standard for flickr and that fits fine into my hotaru site.

If this is not true for amazon or your site, oembed allows you to specify the max width and have the height data returned be based on your specified width.
By adding the size specification part to the array 'http://www.oohembed.com/oohembed/?url=$1&maxwidth=300' returns the following for that above link

{"version":"1.0","type":"photo","author_url":"http:\/\/www.flickr.com\/photos\/7953357@N06\/","cache_age":3600,"provider_name":"Flickr","provider_url":"http:\/\/www.flickr.com\/","title":"bee finger","author_name":"Shawn Caza","width":"240","height":"140","url":"http:\/\/farm5.static.flickr.com\/4113\/5414449509_4f332a1b57_m.jpg"}

It would probably be great to have the option to set a max width on a plugins settings page. Maybe once I learn how to make one...

In the mean time here is a bee on my finger:
http://farm5.static.flickr.com/4113/5414449509_4f332a1b57.jpg (http://www.youtube.com/watch?v=Aspi0nucA6E)

[seekyt]

That is exactly the information I was looking for. Nice bee! Thanks again scaza.

[FLX]

How does this work? I've enabled it on a clean Hotaru installation (1.4.2) but I don't see images anywhere when I post something (youtube for example). Thanks!

[scaza]

it works kinda like this says: http://codex.wordpress.org/Embeds
you just can't use short code.

[krankdroid]

how on earth does this work ?

i installed.. and nothing ..

[seekyt]

You simply add/remove/edit the services you want in the plugin, and then whenever someone posts a link on a single line in their post, it will try and embed the media from that link.

For instance, embedding a link to a youtube video on it's own line, like:

http://youtube.com/watch?v=somecode123

and nothing else appearing on that line, will try and embed the youtube video in your post.

[krankdroid]

ahh.. ok

thanks.. i was hoping it would fetch thumbnails to use besides posts to..
guess not.. but thanks

[scaza]

the gravatar plugin displays user images beside posts. It's should be pretty easy if you wanted to combine the two into a new plugin. At least for photo embeds.

[krankdroid]

i would think so to.. i could easily do without thumbs for text links, overall indirect links or videos.. just to include image thumbnail.. either by direct image link or like some RSS advanced find pictures within sites.

but im not sure how to combine them