Facebook benzeri başka siteden veri çağırma – URLive.js

İlk çıktığı günden itibaren sosyal medya sitesi olarak üyelerine içerik paylaşımını kolaylaştıran özelliği sayesinde insanların bir şeyler paylaşmasına adeta teşvik etme özelliğini hepimiz biliyoruz Facebook sitesinin. Bir web sitesindeki içeriği beğendiğimiz zaman url adresini kopyalayıp Facebook sitesindeki durum paylaşma bölümüne yapıştırdığımız anda linke ait olan resim, video yazı ve link gibi öğeleri çekebilme özelliğidir bu. Sonradan çıkan bazı sosyal medya siteleri de bu tarz uygulamalar oluştursa da Facebook kadar kullanışlı olamadılar. Son olarak Google+ sitesi de aynı özelliği yapmıştı.  jQuery URLive.js eklentisi de başka sitedeki verileri url adresi ile kopyalayabilen özelliğe sahip. Input ve textarea etiketlerine yapıştırılan linkleri sorgulayarak işe yarar değerleri sayfada görüntülemeye yarar. Sizin yapmanız gereken bir editör gibi sitenize uygulamak olacak.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js vs Css dosya adresleri : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.tocible.js"></script>
<link href="jquery.urlive.css" rel="stylesheet" />

 JavaScript : 

<script>
$('textarea').on('input propertychange', function () {
     $('textarea').urlive({
        callbacks: {
            onStart: function () {
                $('.loading').show();
                $('.urlive-container').urlive('remove');
            },
            onSuccess: function (data) {
                $('.loading').hide();
                $('.urlive-container').urlive('remove');
            },
            noData: function () {
                $('.loading').hide();
            }
        }
    });
}).trigger('input');
</script>

Css :

* {
    font-family:'Segoe UI', 'Open Sans', sans-serif;
}
textarea {
    width:450px;
    height:70px;
}
.urlive-container {
    margin-top:15px;
    width:450px;
    padding:0 0 50px 0;
}
.loading {
    display:none;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<textarea placeholder="input a URL here">
Facebook benzeri başka siteden veri çağırma – URLive.js

</textarea>
<div class="urlive-container"> 
    <span class="loading">Yükleniyor...</span>
</div>

Demo : Nasıl çalıştığını canlı görebilmek için html, css, js veya result sekmelerine tıklayın.