Content fetching from URL using php in Digg Style

 I create, like fetch the url images, auto submit when user paste an url, etc.  But I make the look and feel like a digg style, digg use very cool blue color combination.


Here is the HTML code

<div id="cont">
    <div id="error">Unable to fetch this url. &nbsp;&nbsp;&nbsp;<span>x</span></div>
    <div>
        <button id="btsubmit">Fetch &darr;</button>
        <input type="text" id="text_url" name="url" />
    </div>
    <div class="clear"></div>
    <div id="hidden">
        <div id="detail" class="clear">
            <div id="title"></div>
            <div id="description"></div>
            <div class="clear"></div>
        </div>
        <div class="clear">
            <a href="" id="btcancel">Cancel</a>
            <div class="clear"></div>
        </div>
    </div>
</div>

The main html is this example is the text field url, it will become widen when focus event is triggered, there are two hidden div element, one for error messages and one for displaying when the server success fetching the url title and description, all of this html element event will be defined by jquery code below.

$(function() {
    $("#text_url").val("Submit a link");

    $("#text_url").focusin(function() {
        if ($(this).val() == "Submit a link") {
            $("#text_url").val("");
        }

        $(this).css("color", "#666");
        $(this).animate({
            width: 500
        }, 300);
    });

    $("#text_url").focusout(function() {
        urlFocusOut();
    });

    function urlFocusOut() {
        $("#text_url").css("color", "#80a1c1");

        if ($("#text_url").val() == "") {
            $("#text_url").val("Submit a link");
            $("#text_url").animate({
                width: 200
            }, 300);
        }
    }

    function fetchUrl() {
        var url = $("#text_url").val();
        var valid = false;

        if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url)) {
            valid = true;
        } else {
            valid = false;
        }

        if (url != "" && url != "Submit a link" && valid) {
            $("#btsubmit").attr("disabled", "disabled");
            $("#btsubmit").css("color", "#999");
            $("#btsubmit").css("border-color", "#999");
            $("#error").fadeOut('slow');

            $.ajax({
                type: "POST",
                url: "fetch_url.php",
                data: "url="+$("#text_url").val(),
                success: function(msg) {
                    var obj = jQuery.parseJSON(msg);

                    if (!obj.title && obj.description == null) {
                        $("#error").fadeIn('slow');
                    } else {
                        $('#hidden').slideDown('slow', function() {
                            $("#title").html(obj.title);
                            $("#description").html(obj.description);
                        });
                    }
                }
            });
        } else {
            $("#error").fadeIn('slow');
        }
    }

    $("#btcancel").click(function() {
        $("#btsubmit").removeAttr("disabled");
        $("#btsubmit").css("color", "#1b5790");
        $("#btsubmit").css("border-color", "#1b5790");
        $('#hidden').slideUp('slow');
        $("#text_url").val("");
        urlFocusOut();
        return false;
    });

    $("#btsubmit").click(function() {
        fetchUrl();
    });

    $("#error").click(function() {
        $(this).fadeOut('slow');
    });
});

I’m use the focusin and focusout event to make resizing the textfield, and before submitting the url there is a url validation, I’m not write this validation my self, I get this from stackoverflow, well but not really perfect I need to do another validation for data callback from the server.

PHP file is

<?php

function getMetaTitle($content){
  $pattern = "|<[\s]*title[\s]*>([^<]+)<[\s]*/[\s]*title[\s]*>|Ui";
  if(preg_match($pattern, $content, $match))
 return $match[1];
  else
 return false;
}

$url = $_POST['url'];

$data = array();

// get url title
$content = @file_get_contents($url);
$data['title'] = getMetaTitle($content);

// get url description from meta tag
$tags = @get_meta_tags($url);
$data['description'] = $tags['description'];

echo json_encode($data);

?>
And yes for fetching the title I get the code from tildemark, and we can simply use get_meta_tags()function in PHP to get common meta tags used in a web page, and this script giving back data to the client as a json format, another way maybe you can use the  curl() function to fetch the url content, it is up to you.

Here is the css

* {
    font-family: Arial, "Free Sans";
}
#cont {
    padding: 10px;
    width: 600px;
    background: #e5ecf3;
    margin: 0 auto;
}
#btsubmit {
    width: 70px;
    float: right;
    border: 1px solid #1b5790;
    font-size: 14px;
    font-weight: bold;
    color: #105cd2;
    margin-left: 10px;
    padding: 5px;
    position: relative;
    top: 1px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    cursor: pointer;
}

#btsubmit:active {
    -moz-box-shadow: inset 0 0 5px #666;
    -webkit-box-shadow: inset 0 0 5px #666;
    box-shadow: inset 0 0 5px #666;
}

#text_url {
    float: right;
    width: 200px;
    border: 1px solid #80a1c1;
    color: #80a1c1;
    font-size: 16px;
    padding: 5px;
}

.clear {
    clear: both;
}

#hidden {
    background:#e5ecf3;
    display: none;
}

#detail {
    background:#e5ecf3;
    margin-top: 10px;
    width: 510px;
    float: right;
}

#title, #description {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    background: #fff;
}

#title {
    width: 360px;
    padding: 10px;
    color: #356190;
    font-weight: bold;
    font-size: 16px;
    float: right;
}

#description {
    width: 360px;
    padding: 10px;
    color: #80a1c1;
    font-size: 14px;
    margin-top: 10px;
    float: right;
}

#btcancel {
    margin-top: 10px;
    color: #356190;
    font-size: 14px;
    text-decoration: none;
    float:right;
}
#btcancel:hover {
    text-decoration: underline;
}

#error {
    padding: 7px 5px;
    background: #a12a2a;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    position: absolute;
    width: 154px;
    opacity:0.8;
    filter: alpha(opacity=80);
    top: 2px;
    cursor: pointer;
    display: none;
}

#error span {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    color: #a12a2a;
    position: relative;
    top: -1px;
    padding: 0 4px 1px 4px;
    background: #fff;
}
There are some CSS3 feature used in this digg style example, like box shadow, rounded corner, so in current available IE maybe look a bit ugly, well that’s all, here are the online demo and the download link.

View Demo | Download Source