Digg Like URL Submitter Using JQuery and PHP

Today I want to create something that fetching the submitted url data, some kind that many social bookmarking have, beside facebook, the other famous one is digg, this image below is something that I share in this post.

Not all feature 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.

View Demo | Download Source

The HTML

<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.

The JQuery

$(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.

The PHP

<?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.

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

To make it perfect I think it could add the image fetch from the url, and this reference maybe help Stackoverflow get all images url from string.