Today, most websites feature graphics, videos, images, tables, and all kinds of other data and files. Those on a budget may find it difficult to host files themselves. This is where services like Box.net come in. In this article, I will outline how you can embed a Box.net folder directly in your blog or website to allow easy access to your files.
Step 1: Set-Up Box.net
First, head over to Box.net and sign up for an account.
The free version of Box.net is sufficient for users who only intend to upload a limited number of small sized files. You get a total of 5GB worth of data and each file cannot be larger than 25MB.
Once you have signed up for an account you can start uploading documents and creating folders through your dashboard.
Step 2: Upload Documents
Before uploading documents I would recommend creating a new folder. Select “New” and “New Folder“.
Name your folder whatever you like, but ensure it is not private, otherwise outsiders won’t be able to access the files within it.
Open up the folder you wish to upload files into by selecting it.
To start uploading files select the little arrow next to “Upload” to launch the “Bulk Upload” tool. Alternatively, upload files one at a time by just selecting “Upload“.
The “Bulk Upload” tool requires you to drag and drop files and/or folders into the pop-up window.
Once the upload has completed, your folder dashboard will be populated with the new files.
Step 3: Embed Box.net Folder on your Blog
Once you have put all the files you want to share onto Box.net, it is time to create an embedded Box.net folder on your blog. It is possible to embed it on most websites or blogs, but since I use Blogger, I will demonstrate how I have embedded it on my personal blog.
To obtain the embed code, you will have to head back to the main Box.net dashboard.
Here, select the blue “Share” button that is on the same line as the folder you wish to display on your blog. This will pop open a new panel below the folder.
You can use the “secure link” to share the folder or email it to others, however I will show you how to embed it to your blog. To do this, click on the small blue star-shaped icon and select “Embed folder in your site“.
This will open a new popup window with options for your embed code.
You can customise the width and height of the Box.net embed folder as well as the view and sorting options. Once you have customised it to your satisfaction copy the embed code.
<embed src="http://www.box.net//static/flash/box_explorer.swf?widget_hash=6lpb2ld0fb&v=0&cl=0&s=0" width="460" height="345" wmode="transparent" type="application/x-shockwave-flash">
Now head over to your blog and paste the code onto the page you wish to display the Box.net folder on. Remember, the code is HTML, so copy it to your HTML editor.
The Box.net embedded folder will now be visible on your blog allowing you to view and interact with all the files that you had previously uploaded.
This embedded folder is connected with the original folder on your Box.net account so every time you upload that folder all the contents of the embedded folder will also be updated.
You can create multiple folders in Box.net and upload different groups of files/folders for different websites.
That’s it. Now you have your Box.net folder in your website.
Our latest tutorials delivered straight to your inbox