سرویس گوگل برای بدست آوردن favicon ها و اعمال آن بر لینک های خارجی

۱۳۸۸/۱۱/۱۹ ۱۹:۱۱ Salar Khalilzadeh https://plus.google.com/105397214522932500988 منتشر شده در تاریخ : ۱۳۸۸/۱۱/۱۹ دسته بندی : ، ، ، ، ، 10

ظاهرا مدتی هست که گوگل یک سرویس ویژه راه اندازی کرده که علنی نیست، ولی خوب معلوم نیست چه کسی و چطوری متوجه این سرویس شده به نظر میرسه بسیار شبیه به سرویس مورد استفاده در google reader هست. در هر صورت استفاده از این سرویس  رواج پیدا کرده.

این سرویس برای بدست آوردن آیکونهای سایت ها یا همون favicon هست که مزیت های خاصی داره. در حالت عادی برای بدست آوردن آیکون باید به فایل favicon.ico در سایت مورد نظر رفرنس داد. خیلی از مواقع وبمستر ها آیکونی را برای سایت در نظر نمیگیرند و این باعث مشکلاتی در دادن رفرنس مستقیم میشه. که این ما را مجبور به استفاده از روشهای پیچیده تری می کند.

مزیت اصلی این سرویس گوگل در همین زمینه است، یعنی برای سایتهایی که favicon آنها یافت نشد یک آیکون پیش فرض در نظر میگیرد. مزیت دیگر آن png بودن فرمت تصاویر این favicon های برگردانده شده هست که باعث خواهد شد که تقریبا توسط همه مرورگرها قابل شناسایی باشند.

آدرس این سرویس مورد نظرما:

http://www.google.com/s2/favicons?domain=domainName


آیکون پیش فرض این سرویس یک جهان 16 پیکسلی هست که خیلی مناسب برای منظور ماست. البته سرویس مورد استفاده در google reader به این آدرس هست:

http://s2.googleusercontent.com/s2/favicons?domain=domainName&alt=feed

که آیکون پیش فرض آن هم آیکون فید هست. میتونید با حذف &alt=feed آیکون پیش فرض رو به آیکون جهان تغییر بدید.

به جای domainName باید آدرس دامین سایت قرار دهید. برای مثال دامنه برای سایت گوگل google.com خواهد بود و آدرس سرویس آن هم http://www.google.com/s2/favicons?domain=google.com است. که نتیجه این Google Favicon تصویر آیکون گوگل هست که به این طریق بدست آمده.

مهمترین استفاده از این سرویس نمایش دادن تصویر آیکون برای لینک های خارجی در درون متون سایت هست، این باعث خواناتر شدن لینک ها و مشخص تر شدن آنها خواهد شد.

در ادامه کدی را قرار دادم که برای اضافه کردن آیکون هر سایت به کنار لینک آن می توانید استفاده کنید.

افزودن تصویر favicon به لینکهای خارجی با JQuery

اگر در سایتتون از jquery استفاده میکنید، میتوانید از این کد استفاده کنید:
$(document).ready(function() {
$("a").each(function() {
var href = $(this).attr("href");
if (href && href.match(/:\/\//) && !href.match(document.domain)) {
var domain = href.replace(/^(https?:\/\/[^\/]+).*$/, '$1').split('/')[2];
var img = "<img src='http://www.google.com/s2/favicons?domain=" + domain + "' style='margin:0px 2px;border:0px;width:13px;height:13px'/>";
//$(this).prepend(img); // For LTR site
$(this).append(img); // For RTL site
}
})
});

توجه که در خط آخر تابع، در صورتی که سایت موردنظرتان فارسی و راست به چپ هست باید از تابع append و اگر از این کد برای سایت انگلیسی و چپ به راست استفاده میکنید باید از تابع prepend استفاده شود. خط مربوط به هرکدام را که استفاده نمیشود حذف کنید.

در صورتی که از jquery استفاده نمی کنید میتوانید از کد زیر استفاده کنید:
function ApplyFavicons() {
for (i = 0; i < document.links.length; i++) {
var a = document.links[i];
var href = a.href;
if (href && href.match(/:\/\//) && !href.match(document.domain)) {
var domain = href.replace(/^(https?:\/\/[^\/]+).*$/, '$1').split('/')[2];
var img = document.createElement("img");
img.src = "http://www.google.com/s2/favicons?domain=" + domain;
img.style.border = '0px'; img.style.margin = '0px 2px'; img.style.width = '13px'; img.style.height = '13px';
a.appendChild(img);
}
}}

این کد همان کار را انجام خواهد داد. اما توجه کنید که تابع ApplyFavicons را پس از لود شدن تمامی محتویات سایت و در آخرین نقطه فراخوانی کنید، تا مطمئن شوید که برای همه لینک ها اجرا می شود. کارکرد این دو تابع به این صورت است که با بدست آوردن دامین سایت لینک داده شده آدرس تصویر را بدست آورده و تگ تصویر رو به لینک اضافه می کنند.

توجه کنید که در این دو تابع من اندازه favicon را به 13 پیکسل تغییر دادم. در صورت نیاز می توانید آن را به اندازه پیش فرض یعنی 16 پیکسل تغییر دهید.

ایده این پست مربوط به این مطلب جناب نصیری هست و قسمتی از کد ایشان هم در این توابع استفاده شده.

 

10 بازخورد برای “سرویس گوگل برای بدست آوردن favicon ها و اعمال آن بر لینک های خارجی”

  1. معلوم از کجا اومده. از google reader که اومده ایکون های سایت ها رو در خودش نشون می ده http://www.7sal.com/1388/09/04/google-reader-adds-support-for-favicons/

    پاسخحذف
  2. این هم اصل آدرس http://s2.googleusercontent.com/s2/favicons?domain=salarblog.wordpress.com&alt=feed

    پاسخحذف
  3. من هم یک لینک دیگر معرفی میکنم :)
    http://s2.googleusercontent.com/s2/favicons?domain=domainName
    اگه در بافر گوگل نباشه ، یک کره زمین نشون میدهد که میتوان با اضافه کردن متغییر alt=feed به انتهای آدرس ، شکل یک فید را به صورت حالت پیش فرض در آورد:
    http://s2.googleusercontent.com/s2/favicons?domain=domainName&alt=feed

    پاسخحذف
  4. دقیقا اینطوری نیست. آدرس سرویسی که معرفی کردم با آدرس مورد استفاده در Google Reader متفاوت هست.
    همچنین نکته خیلی مهم اینکه آیکون پیش فرض این سرویس یکی جهان هست که خیلی مناسب برای استفاده در سایت ها هست.
    در حالی که آیکون پیش فرض سرویس google reader آیکون یک فید هست.

    در هر صورت ممنون. Google Reader رو قبلا بررسی کرده بودم به هرحال این مورد هم به مطلب اضافه کردم.

    پاسخحذف
  5. ممنون :)
    مثل اینکه خیلی ها با این سرویس آشنایی داشتن

    پاسخحذف
  6. خيلي ممنون، بله متفاوت است.

    پاسخحذف
  7. سلام
    این آیکون رو میشه تو وبلاگ هم قرار داد؟
    من میخوام وبلاگم هر آیکونی که میخوام رو داشته باشه
    خودم طراحیش میکنم ولی میخوام شما منو کمک کنید برای وبلاگم این آیکن رو بزارم
    ممنون میشم

    پاسخحذف
  8. کافیه که فقط اون کد جاوا اسکریپت رو تو قالب وبلاگ قرار بدی

    پاسخحذف
  9. واقعا متنتون عالی بود لذت بردم .. BOOKMARK کردم سر یه فرصت بشینم همشونو بخونم


    ممنون از مطالب مفیدتون

    پاسخحذف
  10. سلام
    مطلب بسیار مفیدی بود :)
    بهش احتیاج داشتم
    ممنون

    پاسخحذف