[TYPO3-english] Facebook Like Plugin decreased My Website Performance and Increased Page Load Time Significantly

[UGUR KOCAK]

Hi,
In order to socialize my portal, I tried to implement social network sharing to it. 
1- In order to use old style Facebook Sharing (feed dialogue>> https://www.facebook.com/dialog/feed?app_id=),  I created a Facebook application with the help of my friends, and then tried to initialize the Facebook JSDK just as stated in Facebook Javascript Developers Page (https://developers.facebook.com/docs/reference/javascript/). Template setup includes this Typoscript;

> #load Facebook JSDK
> page.bodyTagCObject.stdWrap.append = TEXT
> page.bodyTagCObject.stdWrap.append.value (
> <div id="fb-root"></div>
> <script>
>   window.fbAsyncInit = function() {
>     // init the FB JS SDK
>     FB.init({
>       appId      : '111292939029346', // App ID from the App Dashboard
>       channelUrl : '//www.adlibilimler.com/channel.html', // Channel File for x-domain communication
>       status     : true, // check the login status upon init?
>       cookie     : true, // set sessions cookies to allow your server to access the session?
>       xfbml      : true  // parse XFBML tags on this page?
>     });
> 
>     // Additional initialization code such as adding Event Listeners goes here
> 
>   };
> 
>   // Load the SDK's source Asynchronously
>   (function(d, debug){
>      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
>      if (d.getElementById(id)) {return;}
>      js = d.createElement('script'); js.id = id; js.async = true;
>      js.src = "//connect.facebook.net/tr_TR/all" + (debug ? "/debug" : "") + ".js";
>      ref.parentNode.insertBefore(js, ref);
>    }(document, /*debug*/ false));
> </script>
> )


and the Facebook Like button is inserted via;
...
...
>     30 = COA
>     30{    
>         wrap = <div class="fb-like" data-href="|" data-send="false" data-layout="button_count" data-width="550" data-show-faces="false" style="height:20px;width:90px;"></div>
>         10 = COA
>         10{
>           10 = TEXT  
>           10.typolink.parameter.data = TSFE:id
>           10.typolink.returnLast = url
>           10.typolink.addQueryString = 1
>           10.typolink.additionalParams.cObject = COA
>           10.typolink.additionalParams.cObject {
>           }
>         }
>         10.stdWrap.rawUrlEncode=1
>     } 
...
...

And after applying that code, Facebook Sharing functions appear in the page, but the page load time increased significantly. Especially, Facebook Like button appears very late.
In order to improve performance, I created the channel.html under root and inserted the necessary code to it.

> <script src="//connect.facebook.net/tr_TR/all.js"></script>



The developer page states that the channel file should be set to be cached for as long as possible, and advice to insert that php code.
> <?php
>  $cache_expire = 60*60*24*365;
>  header("Pragma: public");
>  header("Cache-Control: max-age=".$cache_expire);
>  header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
>  ?>
>  <script src="//connect.facebook.net/en_US/all.js"></script>

As far as I examined, TYPO3 has necessary code for cache control in /..../public_html/typo3_src-4.7.4/typo3/sysext/cms/tslib/class.tslib_fe.php

So Where should I place that PhP code to improve performance? What does the javascript mean after closing php tag?
Kind Regards,
Ugur


> 
> On Nov 4, 2012, at 3:49 AM, Ralf-Rene Schröder <ralf.rene at online.de> wrote:
> 
>> Am 04.11.2012 00:23, schrieb UGUR KOCAK:
>>> Hi,
>>> I am using TYPO3 v4.7 to build a portal.
>>> I need to insert Facebook Javascript SDK just after opening body tag as in the documents. I want to place Facebook social plugins via Typoscript. 
>>> But I don't want to loose pageUID and page specific css classes.
>>> The code I need to create is exactly like;
>> 
>> nice to see that you are using my if20 framework
>> so you could place your code this way
>> (with append directly after the opend body tag):
>> 
>> page.bodyTagCObject.stdWrap.append = TEXT
>> page.bodyTagCObject.stdWrap.append.value (
>> 	<div id="fb-root"></div>
>> 	<script>(function(d, s, id) {
>> 	var js, fjs = d.getElementsByTagName(s)[0];
>> 	if (d.getElementById(id)) return;
>> 	js = d.createElement(s); js.id = id;
>> 	js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
>> 	fjs.parentNode.insertBefore(js, fjs);
>> 	}(document, 'script', 'facebook-jssdk'));</script>
>> )
>> 
>> 
>> -- 
>> image[FORMAT] - Ralf-René Schröder
>> http://image-format.eu ... Wir geben Ihrem Image das richtige Format
>> http://if-20.com  ... YAML templates for TYPO3
>> _______________________________________________
>> TYPO3-english mailing list
>> TYPO3-english at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
> 
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english