I have a Javascript image gallery and wanted to be able to share individual images on FB but found out that the Open Graph tags need to be static for FB to scrape, changing them on the fly with JS does not work.
I found this post Generating Facebook Open Graph meta tags dynamically and added some Javascript redirections.
Basically when a user clicks on my static FB Share button, title, description, image and redirect parameters are send to the page and the OG tags written. Than I do a JS self.location to the actual https://www.facebook.com/sharer/sharer.php?u=&t=
Once the image is posted on FB and the users clicks on the image they are taken back to the same page with another redirect pulled from the redirect parameter.
Everything works except that the image does not show up in the FB sharer dialog. Once posted on FB it shows fine though. Also in the Open Graph Object Debugger the image shows up fine, but not in the sharer dialog. Any Idea why?
I was also wondering about my dynamic OG template with the redirects, is there anything that could be improved? What about security etc?
<?php // https://stackoverflow.com/questions/8431694/generating-facebook-open-graph-meta-tags-dynamically $params = array(); if ( count($_GET) > 0) { $params = $_GET; } else { $params = $_POST; } // defaults if ( $params['locale'] == "" ) $params['locale'] = "en_US"; if ( $params['type'] == "" ) $params['type'] = "article"; if ( $params['title'] == "" ) $params['title'] = "My Awsome Website"; if ( $params['description'] == "" ) $params['description'] = "The default description of my website"; if ( $params['image'] == "" ) $params['image'] = "http://www.mywebsite.com/logo.png"; if ( $params['redirect'] == "" ) $params['redirect'] = "http://www.mywebsite.com/"; $query_str = 'locale=' . $params['locale'] . '&type=' . $params['type'] . '&title=' . $params['title'] . '&description=' . $params['description'] . '&image=' . $params['image'] . '&redirect=' . $params['redirect']; $fb_param_u = urlencode( 'http://www.mywebsite.com/share/facebook/?' . $query_str ); $fb_param_t = rawurlencode( strip_tags( $params['title'] ) ); ?> <!DOCTYPE html> <html lang="en-US" prefix="og: http://ogp.me/ns#"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!-- Open Graph meta tags --> <meta property="og:site_name" content="My Website"/> <meta property="og:locale" content="<?php echo $params['locale']; ?>"/> <meta property="og:type" content="<?php echo $params['type']; ?>"/> <meta property="og:url" content="http://www.mywebsite.com/share/facebook/?<?= $query_str ?>" /> <meta property="og:title" content="<?php echo $params['title']; ?>"/> <meta property="og:description" content="<?php echo $params['description']; ?>"/> <meta property="og:image" content="<?php echo $params['image']; ?>"/> <script type="text/javascript"> var matches = document.referrer.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i); var domain_referrer = matches && matches[1]; // when clicking through on FB share button if (domain_referrer == 'www.mywebsite.com') { self.location = "https://www.facebook.com/sharer/sharer.php?u=<?= $fb_param_u ?>&t=<?= $fb_param_t ?>"; } else { // redirect incomming links from FB self.location = '<?php echo $params["redirect"]; ?>'; } </script> </head> <body> <div style="/*display:none*/"> <img src="<?= $params['image'] ?>" /> </div> </body> </html>
Try this