Преди малко написах една статия и реших, че е добре поне в нея да закача един Facebook FanBox (като този тук). Джаджата определено е полезна, защото улеснява тази работа с "да-стана-фен-с-едно-кликане", но..!

 

Двата проблема, които преди няколко месеца ме отказаха да слагам подобен FanBox някъде в десния сайдбар (достъпен от всяка точка на сайта) са:

1. Кодът не се валидира

За част от разработчиците това може и да е без значение, но аз не съм сред тях. W3C препоръките за валиден XHTML и CSS код не се пишат просто, защото някой е решил да ни усложнява живота. Нито пък фактът, че "големите" в бранша явно не им дреме за това дали сайтовете им се валидират или не, е оправдание за другите разработчици да не се грижат за валидацията на сайтовете, за които носят отговорност.

В случая валидацията се чупи, защото от Facebook са решили да ползват невалиден markup от рода на fb:fan нещо си.

2. Повишен loadtime

При това, както се вижда от фигурата става дума за почти двойно завишено време за зареждане на страницата. За един FanBox, пък ако ще и да е полезна джаджа.. не съм ок и с това, никак даже.

Решението

Решението е елементарно. Може да се ползва и native JavaScript, но ако така и така ползвате framework като jQuery, всичко става направо фасулска работа (сигурен съм, че същото може да се направи също толкова бързо и лесно и с mooTools, Dojo и другите javascript framework-ове). jQuery кодът може да се включи в общ файл, или пък да се линква само на страниците, където ни трябва този FanBox (както съм направил и в случая). Може да се пренапише и за новия jQuery 1.4.2 синтаксис (сега съм още с 1.3.2, но това ще работи и в новите версии на библиотеката). Може също да се setTimeout-не или да се върже с някаква друга user activity. Както решите, така го правете.

Снипетът е:

	$(function() {
	// jQuery 1.3.2
	// <script type="text/javascript" src="/js/jquery.fb-fanbox-patch.js"></script>

	var _fb_fanbox_container	= $("#fb_fanbox");
	var _fb_fanbox_scripts		= '<script type="text/javascript" src="http://static.ak.connect.facebook.com/ js/api_lib/v0.4/ FeatureLoader.js.php/en_US"></script> <script type="text/javascript"> FB.init("d69b02a533aa7a7292a4862160f92f10"); </script>';
	var _fb_fanbox_content		= '<p><fb:fan width="300" logobar="1" connections="10" stream="0" profile_id="136144496778"></fb:fan></p>';

	$("head").append(_fb_fanbox_scripts);
	_fb_fanbox_container.html(_fb_fanbox_content);	
});

Ударил съм по няколко интервала на няколко места, за да се събера кода в карето. Ползвайте, както намерите за добре. Надявам се да ви е от полза :]

P.S. Хм, хм, хм. Ок е в Gecko/Firefox и Presto/Opera. По някаква причина джаджата не се разбира с Webkit браузърите: Safari и Chrome. Утре ще погледна и в Trident/IE. Явно ще има още post scriptum..

 

Етикети:

Всички права запазени, www.myastrodata.com © 2008-2010
Препубликуването на статиите в онлайн или печатна медия е позволено само след изрично писмено съгласие от страна на администратора на сайта, Владимир Комаров, и от страна на автора на статията, в случаите, когато статията е на гост-автор! Свободно можете да използвате фрагменти от статията под формата на цитати при условие, че цитатът е уместен и не променя смисъла на написаното, както и ако поставите директен линк към тази статия под или над цитата, задължително (използвайте permalink). Всеки линк от Ваша страна се приема като знак на добра воля в помощ за популяризирането на сериозната астрология и Ви връща моята сърдечна благодарност! Всички въпроси по темата отнасяйте директно към администратора на сайта.

Permalink: http://www.myastrodata.com/news/facebook-fanbox-patch/