ImageNab - An Advanced Image Search

I have been frustrated lately by a lack of a good image search on the internet. Google use to be best and it is still the best in terms of finding photos from websites but these days, there are many more images out there on social media sites like Instagram, Tumblr, Pinterest, etc... Image upload sites like ImgUr or Minus also have a ton of photos and let's not forget websites like 500px and Flickr. I have seen some attempts to provide a better image results but I love the simplicity of ImageNab, there are no ads, the image results are in large format, and it covers a lot of good image websites. It's also super alpha and I am looking forward to see how it expands in the future.

How to Import Blog Content to Blogger via XML

Have you ever used the Blogger import functionality? It is designed to only import XML that you have exported from Blogger, like if you wanted to move a blog from one domain to another. But, what if you want to just import a blog post to your Blogger blog? It would be nice to have the capability to create blog articles using XML and just import. Unfortunately, its not that simple and you will probably get a lot of errors on import. So, I did some research, and I have figured out a way to do it, you just need to have specially formated xml.

If you want to just import a simple blog post to Blogger via xml you can use the following xml code, just replace "test" with whatever you want:

<?xml version='1.0' encoding='UTF-8'?>
<ns0:feed xmlns:ns0="http://www.w3.org/2005/Atom"><ns0:generator>Blogger</ns0:generator><ns0:entry><ns0:category scheme="http://schemas.google.com/g/2005#kind" term="http://schemas.google.com/blogger/2008/kind#post" /><ns0:id>test</ns0:id><ns0:content type="html">test</ns0:content><ns0:title type="html">test</ns0:title></ns0:entry></ns0:feed>

If you want to import an article and give it a particular category, then you can use this code:

<?xml version='1.0' encoding='UTF-8'?>
<ns0:feed xmlns:ns0="http://www.w3.org/2005/Atom"><ns0:generator>Blogger</ns0:generator><ns0:entry><ns0:category scheme="http://www.blogger.com/atom/ns#" term="test" /><ns0:category scheme="http://schemas.google.com/g/2005#kind" term="http://schemas.google.com/blogger/2008/kind#post" /><ns0:id>test</ns0:id><ns0:content type="html">test</ns0:content><ns0:title type="html">test</ns0:title></ns0:entry></ns0:feed>

Finally, if you want to import a blog article via XML with time and category you can use this code:

<?xml version='1.0' encoding='UTF-8'?>
<ns0:feed xmlns:ns0="http://www.w3.org/2005/Atom"><ns0:generator>Blogger</ns0:generator><ns0:entry><ns0:category scheme="http://www.blogger.com/atom/ns#" term="test" /><ns0:category scheme="http://schemas.google.com/g/2005#kind" term="http://schemas.google.com/blogger/2008/kind#post" /><ns0:id>test</ns0:id><ns0:content type="html">test</ns0:content><ns0:published>2011-09-26T20:16:54Z</ns0:published><ns0:title type="html">test</ns0:title></ns0:entry></ns0:feed>

It might be also useful to check out the Blogger API information from Google. Finally, if you are looking for a way to post XML code in Blogger as I have done in this post, just use this Encode / Decode HTML Entities Tool.

Grabbing only Pictures out of an XML feed

Pulling Images from feeds with Google AJAX Feed API and Regular Expressions

Recently, I have been building a super aggregator and search engine website using various google APIs. The search engine is using the Google search API and most of the rss and xml aggregation is handled using the Google AJAX Feed API. But, in order to retrieve only the images out of the xml feed, I had to make modifications to the standard Google Feed API.

The xml feed had some images and some other links and text, but I just wanted to grab the linkable pictures so I had to write an extra function and use regular expressions to get rid of the content i did not want. I assume that this piece of code could be useful to other who want to just pull images out of an xml feed that contains more than just pictures.

Here is the JavaScript excerpt:

[sourcecode language="JavaScript"]
<script type="text/javascript">
google.load("feeds", "1");

function replaceit(matches){
var pattern = new RegExp("<img([^>]+)(\s*[^\/])>", "g");
return matches.match(pattern);
}

function initialize() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/TechCrunch?format=xml");
feed.setNumEntries(20);

feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var wow = replaceit(entry.content);
div.innerHTML = wow;
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
[/sourcecode]


Here is how the code works:

You define the feed on line 10, and on line 11 you set the number of entries you want to pull from the XML feed with set setNumEntries() function. If the feed loads successfully line 16 loops through the 20 items and pulls the content out of the feed. The content contains some text and links that I need to get rid of so line 19 runs the content through a function I set up on line 4.

The function uses regular expressions to retrieve the img tags and only return the images. Line 21 injects the results into the div specified on line 15 and it uses appendChild to get it done. Hopefully, this is useful to someone!

Feeds in your Blog with Google Ajax Feed API

Put RSS Feeds in your WordPress blog without extra plugins or jQuery

I started using the Google Ajax Feed API and i really like it, so I decided to write a WordPress plugin that will use the API to place rss or xml feeds on your wordpress blog. There are plugins out there already that allow you to put feeds on your blog, and one of them actually uses the Google API, it's called jQuery Google Feed Plugin but as the name suggests it also uses jQuery. jQuery is a wonderful JavaScript library but sometimes I use prototype and I don't want to load both libraries. Actually, I don't want to load any extra library, and after looking at the simplicity of implementing this, I decided that writing a wordpress plugin for this is a waste of time. Anyone can insert feeds inside their wordpress blog with just a couple quick steps:

First, get your own free Google API key and insert this javascript in the header.php file right between the <head> and </head> tag:

[sourcecode language="javascript"]
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-GOOGLE-API-KEY-HERE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.setNumEntries(10);
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>

[/sourcecode]

Now, go anywhere in your blog where you want the feeds to appear and create the div where you want the results to be displayed:

<div id="feedControl"></div>

This feed technique will allow you to insert as many feeds as you want into your blog and configure the titles, number of entries, and the style via css.

feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg"); - Here the feed url is http://www.digg.com/rss/index.xml and feed title is Digg, you can change these or add another feed using the same format.

feedControl.setNumEntries(10); - The number 10 here represents how many entries you want to display, change it if you want to show less or more than 10 entries per feed.

If you don't like this technique and still want to insert feeds into your WordPress blog, you can try these plugins:

• FeedWordPress


• Friends RSS Aggregator


• inlineRSS


• Bloglines RSS Aggregator Widget 1.0


• HeadlineAnimator


• aggregated blog feeds

Decoding Google Maps Street View Image

Google Maps is awesome and when Google Maps Street View came out I was pretty amazed. But, I don't want to see the street view in flash, I just want to see the street view image. I did some research and it looks like I am not alone, someone already figured out how to extract image tiles from the Google Streetview service. Well, with little repetition, let's expand on this below.

Let's start with some Geo Coordinates of some random location, or maybe let's just use a Boston location shown on the StreetView Simple Example from Google Maps. It gives us a location (2 Yawkey Way, Boston, Massachusetts) but no Geo Coordinates. Well, not too long ago Google added reverse geocoding to their web services so we can easily figure out the latitude and longitude coordinates from an address:

http://maps.googleapis.com/maps/api/geocode/xml?address=2+Yawkey+Way,+Boston,+MA&sensor=true

and it gives us:

[sourcecode language="xml"]
<location>
<lat>42.3467972</lat>
<lng>-71.0988861</lng>
</location>
[/sourcecode]


Next, we need something called a pano id to generate our tiled image, and to get that we use the coordinates above in this call:

http://cbk0.google.com/cbk?output=xml&ll=42.3467972,-71.0988861

which gives us:

[sourcecode language="xml"]
<data_properties image_width="13312" image_height="6656" tile_width="512" tile_height="512" pano_id="yerN9BDKmxDjHiavUjrDNQ" num_zoom_levels="3" lat="42.346814" lng="-71.098936" original_lat="42.346814" original_lng="-71.098932">
[/sourcecode]

So, now that we have this panorama id (pano_id="yerN9BDKmxDjHiavUjrDNQ") and the available zoom levels (num_zoom_levels="3" ) we can create the appropriate grid of tiles that will compose a 360 street view image of our address. Since the zoom level is 3, our grid will compose of 6 X positions (0-5) and 3 Y positions (0-2) which together will build our big image. The url format looks like this:

http://cbk0.google.com/cbk?output=tile&panoid=[PANO ID]&zoom=[ZOOM LEVEL]&x=[X position]&y=[Y position]

If the zoom level was 1, the x and y would both be 0, and our image would look like this:

http://cbk0.google.com/cbk?output=tile&panoid=yerN9BDKmxDjHiavUjrDNQ&zoom=1&x=0&y=0


But with zoom 3 we get way more details, we get this 18, 512x512 images. Sometimes, zoom 5 is available, which gives you 338 images, all 512px in width by 512px in height. That is a lot of detail, but that is also super resourceful. It's probably why this info is not released by Google, it's not some new discovery, but if you were constantly requesting all these images I think it would be a problem.