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

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





SyntaxHighlighter با طعم JQuery

29 01 2009
SyntaxHighlighter JQuery

اگه تا حالا از اسکریپت SyntaxHighlighter استفاده کرده باشین میدونین که با استفاده از این اسکریپت می شه کدها یا همون Code Snipped ها را رنگی و فرمت کرد.
برای استفاده از این اسکریپت در حالت عادی لازم است که علاوه بر موتور اصلی این اسکریپت (shCore.js) اسکرپیت مخصوص زبان استفاده شده در کدتون رو هم اضافه کنید. برای مثال برای سی شارپ shBrushCSharp.js

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

در زیر اسکریپتی رو که با استفاده از JQuery نوشته ام اگر در صفحه خود استفاده کنید علاوه بر کاهش تعداد درخواست ها به سرور و کاهش حجم دریافتی، اعمال SyntaxHighlighter به صورت خودکار خواهد بود و نیازی به درج هیچ کد اضافه ای نخواهید داشت. این امکان هم هست که اگر در صفحه هیچ کدی(منظور code snipped) وجود نداشته باشد هیچ کدام از اسکریپتهای SyntaxHighlighter استفاده نشود.
پس برای استفاده، به جای لینک مستقیم به SyntaxHighlighter باید از اسکریپت زیر استفاده کنید:

// Coded by Salar Khalilzadeh 2009-01-29
// https://salarblog.wordpress.com/

if($){
// SyntaxHighlighter scripts path
var BrushBasePath='http://www.YourSite.com/SyntaxHighlighter/scripts/';

// SyntaxHighlighter style sheet
var StyleFilePath='http://www.YourSite.com/SyntaxHighlighter/styles/SyntaxHighlighter.css';
var BrushFileName='shBrushXXX.js';
var BrushCoreFile='shCore.js';
var BrushAliases=[
	['xml','xml'], ['xhtml','xml'], ['xslt','xml'], ['html','xml'] , ['xhtml','xml'],
	['vb','vb'], ['vb.net','vb'],
	['sql','sql'],
	//['asm','asm'], uncomment if you have assmbly brush
	['ruby','ruby'], ['rails','ruby'], ['ror','ruby'],
	['py','python'], ['python','python'],
	['php','php'],
	['js','jscript'], ['jscript','jscript'], ['javascript','jscript'],
	['java','java'],
	['delphi','delphi'], ['pascal','delphi']
];

var codeTags=$('pre,code');
var matchedElements=[];
codeTags.each(function(){
	var $item = $(this);
	var href = $item.attr("href");
	var i;
	for(i=0;i<BrushAliases.length;i++){
		var attr=$item.attr("class");
		if(attr.indexOf(BrushAliases[i][0])!=-1 && matchedElements[BrushAliases[i][1]]==null){
			matchedElements.push(BrushAliases[i][1]);
		}
	}
})

// Highlighter core, if there is any language
if(matchedElements.length>0){
	document.write("<link rel='stylesheet' type='text/css' href='"+StyleFilePath+"' />");
	var jsCore=BrushBasePath+BrushCoreFile;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsCore + unescape("%27%3E%3C/script%3E"));
}

// Brushes
for(i=0;i<matchedElements.length;i++){
	var jsSrc=BrushFileName.replace('XXX',matchedElements[i]);
	jsSrc=BrushBasePath+jsSrc;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsSrc + unescape("%27%3E%3C/script%3E"));
}}

نحوه استفاده: این کد رو در حتما در آخر صفحه درج کنید. علت این کار رو در ادامه توضیح می دم.
در این کد در مقدار BrushBasePath آدرس محل brush های SyntaxHighlighter خواهد بود که با توجه به اینکه آن ها را در کجای وبسایت خود قرار داده اید باید آن را مسیر دهی کنید.
StyleFilePath آدرس فایل CSS مورد استفاده SyntaxHighlighter است.

شیوه کار این کد به این صورت هست که با استفاده از لیست زبانهای قابل استفاده، در تگ های pre به جستجو می پردازد و در صورت یافتن، اسکریپت مربوط به آن زبان را به صفحه اضافه می کند.
تنها نکته مهمی که وجود داره عدم استفاده از $(document).ready() مربوط به JQuery هست. به این علت که این تکه کد مقداری اسکریپت در صفحه درج می کند و زمان وقوع رویداد ready کد html کامل دریافت شده است و درج مجدد یک اسکریپت جدید باعث refresh شده صفحه و از دست رفتن ظاهر اون میشه.

موفق باشید





راهنمای کامل توابع JQuery و MooTools به صورت CHM

20 12 2008

در زیر لینک دانلود مرجع کامل توابع اصلی JQuery همراه با توابع UI رو گذاشتم. حجم فایل 184 کیلوبایت و در فرمت chm هست.

برای آشنایی با JQuery می تونید به این پست و این پست آقای امیر عباس مراجعه کنید.

به روز رسانی 7 بهمن: JQuery 1.3  لینک دانلود

JQuery 1.2.1  لینک دانلود 1
JQuery 1.2.1  لینک دانلود 2

این هم لینک دریافت مرجع توابع کتابخانه MooTools:

MooTools لینک دانلود:

http://www.adrive.com/public/15c1ff4378301e96b18a9a56a1fa591f4ec46972ba49a5b5ad2ab0126e5570c5.html

منبع: http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm