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

8 02 2010

ظاهرا مدتی هست که گوگل یک سرویس ویژه راه اندازی کرده که علنی نیست، ولی خوب معلوم نیست چه کسی و چطوری متوجه این سرویس شده به نظر میرسه بسیار شبیه به سرویس مورد استفاده در 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 پیکسل تغییر دهید.

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

Advertisements




ایجاد FavIcon متحرک و تغییر آن با جاوا اسکریپت

9 05 2009

تاکنون سایتهایی را دیده اید که favicon متحرک دارند. اعمال این انیمشین به سادگی امکان پذیر است.

برای اطلاع از اینکه favicon چیست به اینجا مراجعه کنید.

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

favicon متحرک

برای اعمال آیکون متحرک ابتدا فایل انیمشن gif مورد خودتون رو ایجاد کنید و در مسیر سایت قرار بدید.

کد زیر رو به قسمت head فایل html مورد نظر اضافه کنید:
<link rel="shortcut icon" href="favicon.gif" type="image/gif">

نکته ای که در اینجا مهم هست استفاده همزمان از فایل gif و icon هست  تا برای مرورگرهایی که از این ویژگی پشتیانی نمی کنند مشکلی پیش نیاید و همچنان آیکون سایت نمایش داده بشود.
بس برای این منظور فایل favicon.ico را هم در مسیر قرار و لینک آن را نیز به قسمت head اضافه کنید. توجه کنید لینک icon باید قبل از gif باشد تا فایل gif در اولویت قرار گیرد.

نتیجه نهایی قسمت head صفحه به این صورت خواهد بود:

<head>
  <title>SalarBlog.wordpress.com Animated Favicons</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="favicon.gif" type="image/gif">
</head>

نحوه تغییر favicon با جاوا اسکریپت

در صورتی که بخواهید آیکون سایت در شرایط مختلف تغییر کنه می توانید از روشی که در ادامه توضیح می دهم استفاده کنید.
کاربرد این تغییر می تونه برای وضعیت های مختلف صفحه باشه. برای مثال آیکون سایت برای روز متفاوت از آیکون برای شب باشه و از این مدل تغییرات.

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

function ChangeFavicon(iconUrl){
  var docHead=document.getElementsByTagName('head');
  if(docHead!=null && docHead.length>0)
    docHead=docHead[0];
else return;
  var link = document.createElement("link");
  link.type="image/x-icon";
  link.href=iconUrl;
  link.rel="shortcut icon";
  docHead.appendChild(link);
}

در این تابع با ایجاد یک شی Link و مقدار دهی آن و سپس اضافه کردن آن به بخش head سایت مرورگر رو وادار به شناسایی آیکون جدید کرده و آن را نمایش می دهیم.

استفاده از این تابع آسان است و به صورت زیر خواهد بود.

ChangeFavicon('favicon-frame1.ico');
ChangeFavicon('favicon-frame2.ico');
ChangeFavicon('favicon-frame3.ico');

پ.ن: برای ایجاد favicon به صورت آنلاین از سایت favicon.cc استفاده کنید.

موفق باشید