jongmin kim blog

LUGER’S 2013 – Lugr Log

projects | March 29, 2013 | Comment

CONCEPT

Luger’s Day is Firstborn’s annual party to celebrate Firstborners, and we usually did some funny things for the day.
- See what I did for last Luger’s Day.

For Luger’s 2013, we made an camera App named ‘Lugr Log’ and a website.
The idea is very fun, everyone install the Lugr Log App on their phone, and they will have 36 photos to use from 11 am Thursday to 11 am Friday.
The photos will be automatically saved on the server and starting the morning after, we will be able to watch the photos on the Lugr Log site.
People can’t see clearly the screen when they take a picture, so nobody know what picture will be on the site next day :)
The App has a special function, when people launch the App on next day, the App display ‘self-destruct’ message and show explosion animation with vibration.

LUGR LOG APP ON IPHONE

APP DESIGN

WEBSITE DESIGN

2013 LUGER’S DAY

CREDITS

Idea : Brett Swanson
Producer : Jillian Likens
Android Developer : Zeh Fernando
Back-end, iOS Developer : Phil Baudoin
Front-end Developer : Emily Park
Designer : Jongmin Kim

Tags: design, LUGER'S 2013, Lugr Log

Meta Tag redirect problem for Sharing to Google+

lab | March 11, 2013 | Comment

If your website has only one HTML file, and using hash tag(#) to load different pages – like All Flash website – you can use custom share.php to share your website with different information for each pages.

This is an old version share.php code

<?php
    $title = $_GET['title'];
    $description = $_GET['description'];
    $img = $_GET['img'];
    $url = $_GET['url'];
?>
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>   
    <meta http-equiv="refresh" content="0;url=<?php echo $url; ?>" />
    <meta property="og:title"       content="<?php echo $title; ?>" /> 
    <meta property="og:description" content="<?php echo $description; ?>" />
    <meta property="og:image"       content="<?php echo $img; ?>" />
 
    <title><?php echo $titles; ?></title>
    <style type="text/css" media="screen">			
        body {
            background-color: #000; 
        }
        #google-share-title {
            display: none;
        }
    </style>
</head>
 
//Google+ recommended using Schema.org micro data
//https://developers.google.com/+/web/snippet/
<body itemscope itemtype="http://schema.org/Product">
    <div id="google-share-title">
        <h1 itemprop="name"><?php echo $title; ?></h1>
        <img itemprop="image" src="<?php echo $img;?>" />
        <p itemprop="description"><?php echo $description;?></p>
    </div>
</body>
</html>

It was working pretty well until last week.
But suddenly it doesn’t work perfectly, which means, Google+ doesn’t get the informations (title, description and thumbnail image) from share.php.
The problem is because of meta tag redirect.

<meta http-equiv="refresh" content="0;url=<?php echo $url; ?>" />

So just use Javascript redirect instead of meta tag redirect.
Besides, you don’t need to use Schema.org microdata anymore.
Google+ recommend to use that - see this page -, but now Google+ perfectly get the informations from Open Graph protocol.
Here is the code.

SHARE.PHP

<?php
    $title = $_GET['title'];
    $description = $_GET['description'];
    $img = $_GET['img'];
    $url = $_GET['url'];
?>
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>   
    <meta property="og:title"       content="<?php echo $title; ?>" /> 
    <meta property="og:description" content="<?php echo $description; ?>" />
    <meta property="og:image"       content="<?php echo $img; ?>" />
 
    <title><?php echo $titles; ?></title>
    <style type="text/css" media="screen">			
        body {
            background-color: #000; 
        }
    </style>
    <script type="text/javascript">
    <!--
    function delayedGo(){
        window.location = "<?php echo $url; ?>"
    }
    //-->
    </script>
</head>
 
<body onLoad="setTimeout('delayedGo()', 200)">
 
</body>
</html>

HOW TO USE – JAVASCRIPT

var share_url = "http://myhome.com/share.php?url=myurl" +
                "&title=mytitle" + 
                "&description=mydescription" + 
                "&img=http://myhome.com/myimg.jpg",
	google_url = "https://plus.google.com/share?url=" + encodeURIComponent(share_url);
window.open(google_url);