Dynamic Facebook Meta Tags (og:image, og:url)

I got a problem.

I want do dinamically change the content atribute in a facebook meta tag for a like button. In other threads i have learned that ist's not possible to change the meta tag with javascript or jquery atribute as soon as the page is loaded.

My idea is to put the facebok like button in a iframe. In this frame i want to define own meta tags. This meta tags were manipulatet by php $_GET variables which are sendt over javascript who manipulate the iframe content.

But it does not work..

Simply explained: [index.php]

<html>
 <head>
   <title>RandomPage</title>
 </head>
 <body>
  <iframe id="fb" src="fb.php">
  <iframe>
  <input type="submit" onclick="changelikebutton();" />
  <script type="text/JavaScript">
   function changelikebutton(){
     document.getElementById('fb').src = 'fb.php?l=5';
   }
  <script>
 </body>
<html>

[fb.php]

<html>
 <head>
  <meta property="og:image" content="RandomPage.com/<?php echo $_GET['l']; ?>.jpg" >
 </head>
 <body>
  <facebook script code und id >
  <div id="code für fb like button">
 </body>
<html>

It's not the original code but it should explain my idea

Solution

You're on the right track. Simply provide a unique URL for each like button. The URL can have the same domain, but tack on some query parameters to make it unique.

<div class="fb-like" data-href="http://yourdomain.com/fb_meta.php?id=1" data-send="false" data-width="450" data-show-faces="true"></div>

When a user clicks like, a like would be generated for the absolute URL associated with the button. The association usually generates a story on Facebook. If a friend decides to click on that story, they'll be redirected the the associated URL. That's where your meta tag page will come in handy.

For that, create a fb_meta.php page with basic HTML and drop in whatever open graph tags you need. More info on open graph tags can be found here and here. You can dynamically generate the content of your open graph tags using the query parameter (id) that you tacked onto your URL to make it unique.

Simply put, you could extract the id using $_GET['id'] and then do a call on your database, array, or whatever to get the content for the meta tag.

It's a good idea to drop in a simple javascript redirect back to your main site, or page where your like button is so that users don't get stuck on a blank page. In the body tags of your fb_meta.php file, put:

<script>window.location = 'http://yourdomain.com';</script>