How to Combine Various Javascript Requests?

[corepartner]

I am not in to javascript at all, but I got a WordPress site and a page uses below javascripts in it:

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

I wanted to combine them all and make one javascript file and call them from my own server (I know how to call it <script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/name.js'></script>), but I don't know how to combine and make one javascript file for all of them. Could you please help me achieve it? Any help would be highly appreciated. Thanks in anticipation.


P.S. I tried making a file like below:
src='http://platform.twitter.com/widgets.js'
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
src="http://platform.linkedin.com/in.js"
src="https://apis.google.com/js/plusone.js"

and then saved it as social.js, but it didn't executed as needed.

The main motive to do this is to minimize the HTTP requests and fasten the loading time of the site.

[JAB Creations]

Those files are surprisingly very small. The only way you can merge them without them breaking is to include them in a PHP file and serve the media type/mime as application/javascript (or for backwards compatibility as text/javascript). There may be cache related issues though, you'll want to go to the PHP forums for that...the cache issues could make things break if you're not forcing the client to update their cached version. Also you may need to edit your .htaccess file to allow PHP to execute on .js files (or serve it as a .php file). Backup your server's .htaccess file, goofing it up could break your site.

- John

.htaccess

AddType application/x-httpd-php5 .css .html .js

combined.js

<?php
header('Content-Type: text/javascript');
include('http://platform.twitter.com/widgets.js');
include('http://static.ak.fbcdn.net/connect.php/js/FB.Share');
include('http://platform.linkedin.com/in.js');
include('https://apis.google.com/js/plusone.js');
?>

[corepartner]

Thanks for the reply, will try it for sure and will let you know. You rock sire!

[corepartner]

I FORGOT to ask:

Thanks much for your reply, really appreciate it. But what if I extract the content of all the files and then want to call them as one JS file? As imo these files' content don't change often. Can I and how? Thanks again in anticipation

[Fotiman]

There is absolutely no good reason to use PHP for this. It will only slow down your JavaScript file access if you need to run it through the PHP processor. If you have 4 static files that you want to make into one, just copy and paste the contents into a single file.

1. Save each of the four files locally (just point your browser at [platform.twitter.com...] and save it locally, then do the same with the other 3 files).

2. Create a new empty file.

3. Open the first file in a text editor (notepad, etc.), select all (ctrl + A), copy to your clipboard (ctrl + C), switch to the new file and paste it in (ctrl + V).

4. Repeat for each of the other 3 files. You may want to insert a newline between each, or add some comment before each to indicate where the file came from, or there may be license information associated with each file that needs to remain with the file.

[JAB Creations]

No problem core. Foti, these are third party scripts, core has no way of knowing when they will be changed by their respective hosts hence the solution I suggested. I had thought about what you suggested though decided against it. Either way I'm wary of third party software.

- John

[Fotiman]

Ah, that's a valid argument (assuming you want to pick up changes from those third party scripts vs. having a static code base). In addition, it's possible for those links to pull in other resources, which might fail if the script is served locally.

[JAB Creations]

A problem I just thought of...if one server is not responsive it will likely delay the collective file from being served as a whole. Again I'll reiterate it's undesirable to work with third party code for all sorts of reasons, there are always compromises. Foti's solution would remove that issue but again if the third parties change their code something on your site might break. Third party code simply amounts to which path of compromise you think will harm you the least in the long term.

- John