Iframe Get Holder URL

I'm creating a share button for my own little social network. This button can be placed anywhere without having people type a URL into a button creator. They just simply put the code on their page and it will display the button with the number of shares. To really do all this, I'm using PHP. So, I decided to use Iframes. But, without the PHP code knowing what the URL is so it can find the URL file (it is stored in txt files so it's a lot faster and light weight) and read the number of shares.

So, I'm wondering, is there a way to get the URL of the page that's holding the Iframe?

Thanks, let me know what I can clear you up on.

If the page in the iframe isn't on the same domain as the page the iframe is on, then it will be tricky. Some sort of server side language would have to be employed because javascript cannot access that information across domains.

If the page in the iframe and the page the iframe is on are both on the same domain, then in javascript the URL of the 'top' page is:

Code:

---

top.location.href

---

If there is PHP involved and the URL is in a text file, PHP can probably find that.

Thank you!

Yes but is there a way for the button to find the URL of the Iframe holder that's not on the same domain or in a text file?

Thanks again!

The button cannot find anything. It's just a button. If the information is known somewhere that code associated with the button can access, then clicking the button can transmit that information to somewhere else that the code associated with the button has access to.

Is the button in the iframe? If so it will be tough.

The way that sites like facebook do it is that the button and it's associated code is on the page or put there by a script that is hosted on the facebook servers. All the client has to do is put an external script tag to this script on their page. That way it can easily access all sorts of information about the page, including it's location.href property. If pressed, it then sends that information to a data collection page in a hidden iframe. Something like:

Code:

---

<input type="button"
onclick="document.getElementById('hiddenshareiframe').src = 'somepageonyourserver.php?url=' + encodeURIComponent(window.location.href);"
value="Share" />

---

Of course, the code you give to your clients can write that button out and/or create it in other ways and similarly write out/create the iframe. But that would be the basic functionality of it.

Yeah, I got the share part but will this code also allow me to display the number of shares? Everything is in a frame so it can connect to my website. My script will get the page URL and find the URL.txt in a folder on my domain and then read the number of shares (if the URL.txt does not exists, it creates a file). My only problem is the Iframe not getting the number of shares displayed in the Iframe.

Thanks for all your help!

Yes. If the script that makes the button on their page is hosted on your server, it may have a .php extension. It therefore would have access to the database or file or whatever you have the stats stored in on your server.

You might not be familiar with this technique. In it's most basic form you have a PHP file, call it script.php. You give it an application/javascript header and then put your javascript code in there. Only you can also add PHP tokens and code to fetch data from the server. It still can be put on the client's page as:

Code:

---

<script type="text/javascript" src="http://www.yourdomain.com/script.php?url=thispage"></script>

---

But it would be better to have an ordinary script that creates that script:

Code:

---

document.write('<script type="text/javascript" src="http://www.yourdomain.com/script.php?url=' + encodeURIComponent(window.location.href) + '"><\/script>');

---

also hosted on your server. Let's call this one first.js. So you give them a tag to use like so:

Code:

---

<script type="text/javascript" src="http://www.yourdomain.com/first.js"></script>

---

It writes the tag on their page, sending script.php on your server the URL of the page, which it then looks up in the data file and creates the button on their page.

Thanks for the quick reply!

So let me get this straight, the client would place this: document.write('<script type="text/javascript" src="http://www.yourdomain.com/script.php?url=' + encodeURIComponent(window.location.href) + '"><\/script>'); on the page. The PHP script when then read the URL+.txt, check if the file was created already or is new, read the number of shares, then echo it, could that work? The only reason I would use the Iframe was to be able to use PHP right on the page so then I wouldn't really need the <script type="text/javascript" src="http://www.yourdomain.com/first.js"></script> right?.

It seems like this is coming together! Thank you very much! Now I can pretty much abandon the Iframe idea!

Yes. But it's messy, and they could easily edit it to show a different URL.

You'd have to experiment with it, but it would be better if it works to create the script tag, rather than document.write it:

Code:

---

(function(){
        var script = document.createElement('script'), head = document.getElementsByTagName('head')[0];
        script.type = 'text/javascript';
        script.src = 'http://www.yourdomain.com/script.php?url=' + encodeURIComponent(window.location.href);
        head.insertBefore(script, head.firstChild);
})();

---

script.php could then have code in it to use $_GET['url'] and then read any data on that and create the button. You could document.write the button, but again, it would be better to create and insert it. The code is more complicated but generally less prone to problems once you get it set up right.

That's the way other social media sites to it. Some also throw an unseen iframe in there to send additional information back to their servers after the button is clicked and/or throw up a popup window to allow the user to login and do more than just register a like or share response.

Thanks!

So here's my code, but it's not working. I'm pretty sure I'm missing something but I don't know what.
Where do I put the first.js or is there something that needs to be combined? I'm really lost...

HTML Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="application/javascript">
var script = document.createElement('script'), head = document.getElementsByTagName('head')[0];
        script.type = 'text/javascript';
        script.src = 'http://www.markdmckinney.com/Comical/sharebutton.php?url=' + encodeURIComponent(window.location.href);
        head.insertBefore(script, head.firstChild);
</script>
</body>
</html>

---

Thanks so much for your time!

Never mind I got it to work! Thank you so much!