افزونه وب گوگل بوکمارک توسط جی کوئری
گوگل در سرویس بوکمارک خودش، اخیرا تغییراتی داده که مورد استقبال کاربران اینترنت به خصوص طرفداران سرویس های گوگل، قرار گرفته و برخی حتی از Delicious و سرویس های مشابه دیگر به سرویس بوکمارک گوگل نقل مکان پیدا کردند.
هرچند از نظر شخصی خودم، از این سرویس به اون سرویس پریدن جالب نیست همیشه ولی به هر حال، تست سرویسهای جدید برای عقب نموندن از دنیای وب تقریبا لازم هست. البته من سرویس Delicious رو فعلا ترجیح میدم، مگر اینکه گوگل بوکمارک امکاناتی رو ارائه بده که بیشتر به دردم بخوره!
در سرویس گوگل بوکمارک شما میتونید لیست هایی رو به صورت مجزا ایجاد کنید و هر کدوم رو با یک سری از افراد دیگه به اشتراک بگذارید و یا به طور کلی به اون لیست دسترسی عمومی یعنی public بدید و لینک اون لیست رو به دوستانتون بدید تا از بوکمارکهای شما استفاده کنند.
جالب اینجاست که گوگل فعلا هیچ سرویسی رو برای استفاده از یک لیست پابلیک، در خارج از گوگل، ارائه نداده! یه چیزی مثل RSS یا یه API که ابن کارو انجام بده. شاید در آینده این کار رو بکنه ولی تا این تاریخ که این مطلب نوشته میشه، چنین چیزی وجود نداره.
تو قسمتهای مختلف گوگل بوکمارک که چرخی میزدم، متوجه شدم گوگل خودش داره از یه API برای بوکمارک استفاده میکنه؛ پس منم دست به کار شدم و گفتم اگه گوگل بتونه، چرا ما نتونیم؟ :دی پلاگینی رو با jQuery نوشتم که بتونید لیست پابلیک خودتون رو در وبلاگ خودتون قرار بدید. شاید براتون به دردبخور باشه. در ساخت این پلاگین برای اینکه بتونم فرمت jsonp داشته باشم، از Yahoo Pipes استفاده کردم. (در مورد jsonp بیشتر بخوانید.)
برای شروع کار، لازم به ذکر نیست اما کتابخونه اصلی جیکوئری فراموش نشه. بعد از اون نیاز دارید لینک کامل لیست خودتون رو که میخواید در وبلاگ داشته باشید، در کد جاوا اسکریپت در متغیر publiclisturl وارد کنید. دقت کنید این لیست باید public باشد.
مثال زیر کد کامل رو برای خوندن بوکمارک ها نشون میده. در این مثال از Google CDN برای کتابخونه اصلی jQuery استفاده شده. (در مورد CDN بیشتر بخوانید.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Google Bookmarks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jgooglebm.js" type="text/javascript"></script>
<style type="text/css">
#bookmarks {
direction:rtl;
width:280px;
margin:0 auto;
text-align:right;
font-family:Tahoma;
font-size:12px;
}
#bookmarks .error {
color:red;
}
#bookmarks .listname {
font-weight:bold;
margin-bottom:5px;
}
#bookmarks .listdesc{
}
#bookmarks ul {
list-style:none;
padding-right:10px;
}
#bookmarks ul li{
margin-bottom:5px;
}
#bookmarks ul li a{
}
</style>
</head>
<body>
<script type="text/javascript">
var publiclisturl = "http://www.google.com/bookmarks/l#!threadID=GdAVWPWBGuOk%2FBDdge3woQ0Y7Lnvok";
$(function() {
$("#bookmarks").html("کمی صبر کنید..");
$.Gbookmarks(publiclisturl, function(data) {
if (!data) {
$("#bookmarks").empty();
$("<div/>").attr("class","error").append("خطایی رخ داده است").appendTo("#bookmarks");
return false;
}
var ownername = data.owner.name;
var listname = data.title;
var listdescription = data.description;
$("#bookmarks").empty();
$("<div/>").attr("class","listname").append(listname).appendTo("#bookmarks");
$("<div/>").attr("class","listdesc").append(listdescription).appendTo("#bookmarks");
$("<ul/>").appendTo("#bookmarks");
$.each(data.threadResults, function(i,item){
$("<li/>").append(
$("<a/>").attr("href",item.url).append(item.title)
).appendTo("#bookmarks ul");
});
});
});
</script>
<div id="bookmarks"></div>
</body>
</html>
فایل jgooglebm.js پلاگینی هست که توسط خودم نوشته شده و در جیکوئری توسط نام Gbookmarks فراخونی میشه و بوکمارکهای گوگل رو خونده و نتایج را در متغیر data به تابعی که در این پلاگین میسازید با فرمت json میفرسته. در کد نوشته شده، مقادیری که نیاز دارید کاملا مشخص شده. شما حتی میتونید بدون هیچ گونه دستکاری در این کد، اون رو کاملا copy paste کرده و فقط استایل های مربوط به اون رو تغییر بدید. برای این مثال، من از یک استایل بسیار ساده استفاده کردم که هدف فقط نشون دادن چگونگی این کار بوده. نتیجه کار به صورت زیر هست:
شما با copy paste کردن دقیقا همین کد و اجرای اون درسیستم خودتون، میتونید نتیجه رو ببینید. لیست بوکمارکهایی که لود میشه به صورت آرمایشی برای همین مثال ساخته شده. تنها کاری که باید انجام بدید دانلود پلاگین جیکوئری هست که از آدرس زیر دانلود کنید. روی لینک رایت کلیک کرده و گرینه save target as رو انتخاب کنید. سپس فایل دانلود شده را از حالت زیپ خارج کرده تا به فایل jgooglebm.js برسید. سپس این فایل رو در کنار فایل html که با کد بالا ساختید قرار بدید.
پلاگینِ وب گوگل بوکمارک برای جیکوئری
تنها تنظیماتی که باید روی این کد اعمال کنید تا از آن در وبلاگ خودتون استفاده کنید، قرار دادن لینک لیست بوکمارکهای موردنظر در متغیر publiclisturl هست و بعد از اون تغییر استایلها متناسب با طراحی وبلاگ شما. به همین سادگی.
این مطلب به صورت اختصاصی برای
وبلاگ جعبه ابزار نوشته شده است. استفاده از این مطلب به شرط ذکر منبع، آزاد میباشد.