WAQAR's BLOG

Skydrive direct link/hot link Hack

support.waqar@gmail.com (Waqar Ahmad) — Fri, 06 May 2011 20:02:00 +0000

Skydrive is free excellent online storage disk from Microsoft, but has some limitation regarding Link sharing and hotlinking a file from the Skydrive, To download a file from Skydrive, you will have to visit Skydrive

To know more about skydrive, Click Here

If you manage to get a direct download link from skydrive download page, It will stop working after one or two days. Because these download links are dynamic. Microsoft wants Skydrive users to visit their website so that they can keep making money from Ad Views and Clicks.

Good thing about this drive is, it is hosted on Microsoft’s Cloud, So it provides you almost 100% up time with unlimited download access i.e No Bandwidth limit and 25GB space.

People have made scripts to track download links, but most of these scripts are hosted on their own server with no service guarantee.

So I wanted to make a workaround to overcome this problem which is reliable and efficient.

I made a simple javascript code which tracks the download link with the help of Yahoo Query Language (YQL) API (A service from YAHOO).

This script is useful for web publishers and bloggers and can be installed on your website or blog in a minute.

Requirements:

JQuery
JQuery is a very popular javascript library and a large number of sites are using it to enhance their site visibility and user Interface. If it is not installed on your blog/Webpage already, just add the below code in the header (i.e anywhere between <head> and </head> tag).
```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
```

Link Tracker Code

Below is the link tracker code, add this code anywhere in the head section of your page. If you are using blogger, you can paste this code in a HTML/Javascript Gadget.

<!--Code written by Waqar's Blog--><script type="text/javascript">
function loadLinks(newUrl,url){
$("a[href='"+url+"']").each(function(){
var text = $(this).text();
var replacedcode = '<a href="'+newUrl+'" target="_blank">'+text+'</a>'
$(this).replaceWith(replacedcode);
});}
function getJSONdata(){
$('a[href*="office.live.com"]').each(function(){
var url = $(this).attr('href');
var queryAPI = "http://query.yahooapis.com/v1/public/yql?q=";
var query = "select * from html where url=\""+url+"\" and xpath=\'//div[@id=\"spPreviewContainer\"]/a/@href\'"
var queryFinal = queryAPI+encodeURI(query+"&format=json&callback=");
$.getJSON(queryFinal, function(json){
if (json.query.results == null) newUrl = "http://skydlpage.blogspot.com/p/missing-link.html";
else newUrl = json.query.results.a.href;
loadLinks(newUrl,url);});});}
$(document).ready(function(){
getJSONdata();});
</script>

Well, here is a video to guide you through the installation. Though I have shown it on blogger blog, it can be used with any webpage, blog service or CMS.

Note: This code will not work for files having extensions doc, docx, ppt, xls or any MS Office file extesion. To use with such files, first zip it and then upload to Skydrive.

After installation, you can start posting Skydrive links on your Blog. Make sure that the link which you are copying from Skydrive is public and correct.

Your copied link will look something like this.

http://cid-xxxxxxxxxxxxxxxxxxx.office.live.com/self.aspx/path to your file/filename with extension

E.g Links

http://cid-d6d439ce1b0b8393.office.live.com/self.aspx/Waqar%5E4s%20Blog/Direct%20link%20demo%20files/demo.pdf

http://cid-d6d439ce1b0b8393.office.live.com/self.aspx/Waqar%5E4s%20Blog/Direct%20link%20demo%20files/demo.zip

If you post a wrong link, it will just redirect you to an error page.
Please let me know through your comments, if you find any bug or want to tell other modification/suggessions.

Here I list two blogs which are using this code to stream their MP3 files, directly from Skydrive. In next post, I’ll post a vide which will guide you to integrate Yahoo Media Player with Skydrive to play your Media Files on your page:

NooriNaat

SwarSrijan

Yahoo media player for blogger blog

support.waqar@gmail.com (Waqar Ahmad) — Thu, 18 Nov 2010 16:39:00 +0000

ABOUT THE PLAYER

The Yahoo! Media Player enhances your web site or blog by creating an embedded player for each audio link. All the links can be played with one click, turning the page into a playlist. This is done by adding just one line of code to your page.

HOW TO INSTALL THE YMP PLAYER IN BlOGGER BLOG

Go to Blogger and login. Now you are at Blogger Dashboard.
Go to Design->Page Elements and click any of the Add a Gadget Link.

Click HTML/JavaScript Gadget from the popup window

Copy the below line of code and paste it in Content field and SAVE. You may leave the Title field blank or write anything which you want. Now the player installation is complete.

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

HOW TO USE YMP IN BLOGGER BLOG

Simply add audio links using the online blogger post editor in your post. Audio link URL should end with either .mp3 or .pls extension.

If you are working in Edit HTML mode, then you can write the below anchor tag to link to audio.

<a href="PATH TO YOUR AUDIO">Audio 1</a>

Reference Links:

Yahoo Media Player

Blogs using Yahoo Media PLayer

Demo-Yahoo media player for Blogger

Online Hindi Radio

Soon, I'll be posting a tutorial to customize YAHOO MEDIA PLAYER. Moreover I am working on a automatic widget installer, which will allow to install YMP without going into the code.

Facebook comment box for blogger blog

support.waqar@gmail.com (Waqar Ahmad) — Thu, 28 Oct 2010 14:32:00 +0000

Hi All,

Here is a piece of text from Facebook developers Blog..

Since Facebook Connect launched, we've seen over 6,000 developers make their sites more social using Facebook Connect. One of the most common features we've seen sites add with Facebook Connect is the ability to allow users to log in with a single click and comment with their real name and profile photo from their Facebook account. Sites have seen as much as 40-50% more comments since they launched added these features.

Watch this video to have a more general idea about FB comment box.

Now you can imagine what if the comment box is installed on your blog!!!!

Here is the simple tutorial for adding Facebook Comment Box to Blogger Blog.

Go to Facebook Developer Page and Enter you Blog Name and Blog URL, select you language and then click Create Apllication button.After this It may ask for image verification.
Now an application ID will be generated for your personalised comment box. Note this Application ID.

Now copy the code below and save it in a notepad. Now replace the text APPLICATION ID with the application ID which you noted in step 2.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <h4 id="comment-post-message">Post a comment</h4>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;APPLICATION ID&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  e.src = document.location.protocol  +
  &#39;//connect.facebook.net/en_US/all.js&#39;;
  e.async = true;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments/>
  </b:if>

Now Go to your Blogger Dashboard >Settings >Comments tab and select Hide as shown below.

Go to Design >Edit HTML tab and check Expand Widget Templates checkbox as shown below.

Now place the code from Step 3 just after below code in template code
(You can find this code by pressing Ctrl+F)
```
<data:post.body/>
```
Note:- Make sure that you have replaced the text APPLICATION ID with your Application ID noted in Step 2.

Save the template and Now you are done.

Note: Use this Facebook Comment Box wisely at it will hide your Blogger comments.

See Demo here

How to remove “Showing newest posts with label xxxx. Show older posts” from your blogger blog

support.waqar@gmail.com (Waqar Ahmad) — Tue, 12 Oct 2010 13:50:00 +0000

While opening a label link in blogger blog, you must have seen the message:

Showing newest posts with label…………... Show older posts

Also when you search on blog ( default search box in blogger blog) you get following message before search results:
Showing newest posts for query ....………. Show older posts

Most of the blog owners don’t like this message box. If you want your blog to look proffessional, then it is very good to remove this box.

Till now on the I have seen many posts on the web regarding this, but most of them have provided a lengthy procedure and making a lot of changes in the code.

Here I am going to tell you a very simple trick to remove this message box. It involves adding only one line of code.

So here is the standard procedure to remove that box.

Login to your Blogger account. Now you are on the blogger dashboard
Click “Design” link and then Edit HTML tab
Make sure to download your template before doing any code change. If in case, something goes wrong while editing the code, You can move to your original template.
After downllading the full template
Search for below code:

]]></b:skin>
Now just before that code, Insert the following code.

.status-msg-wrap { display:none !important;}
Now Click “Save Template” button, Now you have done it

Enjoy!!!!!!!!! Happy blogging

How to make “contact us/Feedback” form using google resources only

support.waqar@gmail.com (Waqar Ahmad) — Sat, 24 Oct 2009 10:22:00 +0000

Have you ever been wandering for personalized “Contact Us/Feedback” form for your webpage or blog. Now you will not have to worry about this. Google offers solution to this also. Using Google Docs you can enjoy this service free of cost.

Earlier, I was using [EmailMeForm] to do the same, their service is very good, but when google offers the same service under the same Google Account then there is no need to go for a third party service.

You can see an example form here [Example ‘Contact Us’].

Follow these few simple steps to create one for your blog.

Login to Google Docs with your Gmail ID.
Go to “Create new” tab and select “Form” from the dropdown menu.
Now the form editor will open up. Give a name to your form.
“Add item” to your form from the “Add Item Tab” according to your requirement.

Now save your form by Clicking on the “Save” button in your forn Editor.
Go to the “More actions” button, and select “Embed”.
After clicking on the “Embed” you will see a content box with the Embed Code. Now Copy that code. Now your form is complete.
Now Write a New Post in you Blog. Paste your form code in the Blog Post editor by going in the “Edit HTML” mode.
Go to the post option>
Under the Reader Comments, select the Radio Button “Don’t allow”
Under the Post Date and time, select Radio Button “Scheduled at” and edit the date to some old date, so that this post doesn’t appear on your blog’s home page.

Now publish this Post. You may highlite this page by giving a separate link on you blog so that people easily find this.
In this step you will have to set a notification in your email when a user fills this form.

Now again go to the form editor page.
Select “See responses” button, a dropdown menu will appear, select “Spreadsheet”
Now the corresponding spreadsheet will open up in a new window.
Now Click “Share” Button, and select “Set notification Rules”
A content Box will open up, Now under the “Notify me at…” option, select checkbox “A user submits a form”, and under “Notify me with…”Select both the checkboxes.
Now click on the “Save” Button and then “Done”

Now form installation is comlete.

For any suggesstion or query, please feel free to drop your comments here.

MP3 Player Widget 1.1

support.waqar@gmail.com (Waqar Ahmad) — Sun, 23 Aug 2009 04:59:00 +0000

I have posted earlier an MP3 Player Widget for Blogger Blog [See This] which optionally hides the MP3 Download Link and replaces with a Player [See Demo Here]. Now I have modified the widget so that you can customize the player’s colour, Play and Stop Icons according to your Blog Template.

Code for this widget are based on various hacks of excellent scripts- Del.icio.us mp3 Playtagger javascript which has been modified for blogger.

How to Install this Widget:

Customize the player using the “Mp3 Player Widget Generator form” Given Below. If you don’t do this, widget will take default values.
Refer to the image given below for identifying different parts of the player. To change the colour values, click on the colour field in the form, a colour palette will popup where you can choose colour.
You may preview the sustomized player by clicking on the “Player Preview” Button.
Now click the “Apply” Button and then “Widget on Your Blog” button. A new window will open up which will take you to the blogger. If you are not already signed in to blogger, it will prompt you to “sign in”. Sign in there.
After this you “Add Page Element” Page will open. Now select your blog and click on button “Add Widget”.
Now a page element will get added in you blog, now If you want, you may change the location of “WAQI MP3 Player” Widget.
[This completes widget installation]

How to make the Player appear in your Post:

Insert a keyword (e.g. MP301) in your post where you want the player to appear.
Select this keyword and hyperlink it to some desired mp3 file link which you have already uploaded somewhere on the web (There are so many file hosting services which offer free file hosting. E.g. Boxstr where you can upload your mp3 file and get the link) . Hyperlink must be a direct link like http://www.abc.com/PathToMp3File/Myfile.mp3 (e.g. http://waqidisk.googlepages.com/waqi_music.mp3)
If you are working in HTML mode you can do the same by adding the following code where you want the palyer to appear.
<a href="http://www.abc.com/PathToMp3File/MyFile.mp3">MP301</a>
```
[See Demo Here]
```

If you find bug, please comment so that I can make this widget better. If you want some help regarding this, you are welcome here.

WAQI mp3 player widget update

support.waqar@gmail.com (Waqar Ahmad) — Thu, 20 Aug 2009 09:06:00 +0000

Hi all,

These days, I am working on “WAQI MP3 Player” widget (note This widget is only for Blogger Blog) which I have posted earlier [See this], I am going to put an option through which one can modify the colors of different part of the player according to his blog layout and colors. Most of the part for this modified “WAQI MP3 Player” widget has been completed and I am fixing some bugs and will be available for you to add this customized player in you blog without knowing HTML or Javascript. Using this option, one will be able to customize the player colour, look and feel accoding to his choice. Also one will be able to change the Play and Stop button images.

I am giving this player widget name “WAQI MP3 Player” only just to find it quickly through search engines. Flash Player has been taken from 1pixelout.

To remain updated for the further post about this Subscribe to our Email Updates. If you want updates from this blog on your Dashboard, become the follower of this Blog.

How to prevent content theft from your blog

support.waqar@gmail.com (Waqar Ahmad) — Tue, 04 Aug 2009 04:21:00 +0000

I was navigating through the internet searching for some chicken recipes. I came to the" "whereincity.com" where I found so many recipes, veg as well as non-veg. I tried to copy the text so that I can refer it later but it didn't worked. Even selection of the text was not possible. I started to look into their webpage's source code to see how they are preventing the text selection. Very soon I found the script and tried it to use on blogger and luckily it worked. I thought that it should be shared to other bloggers so here is the trick to do that.

Follow these few simple steps and modify your template.

Login to your blogger account.
Move to "layout”>"Edit HTML"
Backup you template so that you can have a copy of it if it get corrupted during the modification.
Now search for the "body" tag as shown in the image below.

Now replace this body tag with the following code

Now it will appear like this

Now click "Save Template" and you are done.

Now enjoy your safe blogging.

If you like this post. Plz become a follower of my blog. You can also subscribe in your email to remain updated.

MP3 Player Code Generator

support.waqar@gmail.com (Waqar Ahmad) — Mon, 20 Jul 2009 16:34:00 +0000

Here is the form for generating scripts for online flash mp3 player. You can embed this code in orkut, myspace, blogger, wordpress or any other webpage.

What you can do here:

You may customize the color of the different parts of the player. For source of the mp3, you may copy the links from Apniisp, Funrocker etc.
You may change the source of the mp3 file (e.g. http://merajhindi.googlepages.com/Sare-Jahan-Se-Acha.mp3 ). Prefered encoding Bit rate 32kbps, Mono, CBR, Sampling rate 44.1KHz, 22.5Khz or 11.25KHz.
Player supports mp3 files only.

Name of the different parts of the player are shown in this image:

Copy and paste the above code in your orkut scrap, blogger posts or in any other webpage.

Flash MP3 Player Demo

support.waqar@gmail.com (Waqar Ahmad) — Mon, 20 Jul 2009 16:29:00 +0000

Here, I have put some demos of the flash player which you can create using the Script Generator form.

Click here to send songs to your friends.

Live Demo of MP3 Player

support.waqar@gmail.com (Waqar Ahmad) — Thu, 16 Jul 2009 19:09:00 +0000

Click on the play Button to play a song.

Song 01 Song 01

Song 02 Song 02

Song 03 Song 03

Click here to install this player on your blog.

MP3 Player widget for blog

support.waqar@gmail.com (Waqar Ahmad) — Thu, 16 Jul 2009 18:33:00 +0000

Guys, I am putting here a very simple and smooth mp3 player for your blog in the form of a widget which makes mp3 links palyable directly on your blog while optionally hiding the download link. Code for this widget are based on various hacks of excellent scripts- Del.icio.us mp3 Playtagger javascript which has been modified for blogger. Flash player used here has been taken from 1pixelout. Installation: Installation of this widget is very easy. Just click the button below, you will be redirected to blogger's page. Give the necessary informations there if required.

How to use this player: After adding this widget, just put the mp3 links of mp3 file in your blogger posts where you want the player to appear and you are done. You can put this link using following HTML code if you are writing your post in "Edit HTML" mode instead of "Compose" mode.

Example:

See this tutorial for free file hosting services where you can upload your mp3 files and hyperlink them. These mp3 links will automatically get changed in an image (on your blog) as shown here:

After clicking on that image, it will change to an image as shown below:

Simultaniously, you will see a payer just below that image, playing the mp3 file which you have hyperlinked. Sceenshot

Click here to view the live demo of mp3 player.

Contact Us

support.waqar@gmail.com (Waqar Ahmad) — Fri, 24 Oct 2008 09:25:00 +0000

&lt;p&gt;Loading...&lt;/p&gt;