سرویس گوگل برای بدست آوردن 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 پیکسل تغییر دهید.

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


کارها

Information

10 responses

8 02 2010
dajal

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

8 02 2010
8 02 2010
Salar

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

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

8 02 2010
مهراد

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

8 02 2010
Salar

ممنون🙂
مثل اینکه خیلی ها با این سرویس آشنایی داشتن

8 02 2010
dajal

خيلي ممنون، بله متفاوت است.

16 02 2010
کوچولوموچولو

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

17 02 2010
Salar

کافیه که فقط اون کد جاوا اسکریپت رو تو قالب وبلاگ قرار بدی

22 02 2010
کیامارکت

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

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

8 02 2013

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s




%d وب‌نوشت‌نویس این را دوست دارند: