Use BING Wallpapers as your webpage background by NoAPI Service

Introduction

BING is well-known for its great wallpapers. I'm one of many who use BING wallpapers as their Desktop backgrounds. But that's not enough . I want to use them on my webpage too.

Well , the solution is not that difficult. All we need is some ASP.NET or PHP code to fetch BING Wallpaper XML page and extract image url.

But wait, what about web pages without server-side code. Can we do the same by Javascript ? No, you can't do that by calling the XML url using ajax because of what is called : Same Origin Policy.

Then what is the solution ? Well, the first option is to enable server-side code in your page. If that's not possible then there is another option. You can use NoAPI service.

NoAPI ?

NoAPI is a website that assists web developers to scrap pieces of data they need from public web pages, save them and use them in their web pages by calling a url provided by NoAPI. NoAPI checks and updates these data on a regular schedule.

Let's do that

First go to NoAPI homepage.

To start using it , you need to have a google account.

After you successfully login , you'll be redirected to Your Scraps List page.

To create a new scrap for BING , click on the New Scrap link at the top left corner.

in New Scrap page enter the BING XML url and press Scan button. the BING XML address is :

http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US

Then NoAPI tries to get the page and make it ready to get data from.

When page is loaded completely, a form will be shown that contains 3 field.

Here you should use XPATH syntax to address the part of page you want to extract data from. BING's XML structure is as below:

<?xml version="1.0" encoding="UTF-8"?>
<images>
    <image>
        ...
        <url>/az/hprichbg/rb/KingfishersTaipei_EN-US14284127653_1366x768.jpg</url>
        ...
    </image>
    <tooltips>
        ...
    </tooltips>
</images>

We want the wallpaper url. So the XPATH we need is this:

//image/url

As we need the inner text of node ,we select Text from dropdown list . After you click out of textbox or change the selected item of dropdown list , NoAPI tries to go through the PATH you just entered and returns the value it has found or throws an error indicating that nothing is found.

When you're fine with the data , it’s time to press Save Scrap button.

If everything goes well, NoAPI redirects you to Scraps List that now contains your new scrap.

To use this data in your page , you need the url to this data. In your list each item has a Link column. This is the url that you should call from your javascript code. Calling that , NoAPI returns a XML / Json string as below:

<scrap>

    <LastUpdate>....</LastUpdate>

    <Paths>

        <Path>...</Path>

        <Path>...</Path>

    </Paths>

</scrap>

And here is a sample code of how to call and use the NoAPI url for BING wallpaper using jQuery :

$(function(){

    $.ajax({
        url: 'http://noapi.dorparasti.ir/api/scraps/e9baeceb-f353-4703-a84d-c9e3107bd90f',
        cache: false,
        dataType: 'json',
        success: function (data) {
            $("body").css("background", "#FFFFFF url(http://bing.com" + data.Paths[0] + ") repeat-y 0 0");
        }
    });

});