3D Like Box for Facebook™

A quick Intro

This page is intended for webmasters and developers who want to quickly transform the standard Facebook Like Box into a nice looking, multi functional 3D Like Box and run on their site. It is very simple and easily. You can see the 3D Like Box in action in the preview pane below. All you need to do is embed a few pieces of code! There are only three steps to follow to embed 3D Like Box into your webpage.

Basic Example

<html>
 <head>
  <title>3D Like Box Basic Demo</title>
  <link rel="canonical" href="http://www.example.com" />
  <script type="text/javascript" src="http://api.chromeactions.com/3dlikebox.js"></script>
 </head>
 <body>
  <div class="likebox3d" href="#" data-url="magicactions"
  data-auto data-delay="7" style="width:292px;height:380px;">
  </div>
 </body>
</html>

Browser support

Currently supported browser versions are Google Chrome™ (v12 and above) and Apple Safari™. In all other browsers (IE, Firefox, Opera, etc.) the 3D Like Box will display as a regular Like Box without the fancy 3D transition.

1. Include Javascript

Download the 3dlikebox javascript file and place it wherever you want to host it. Copy and paste the following script tag in your page inside of the head element or any point without restriction:

<script type="text/javascript" src="3dlikebox.js"></script>

Alternatively, you can use the script from our server by using the following script tag:

<script type="text/javascript" src="http://api.chromeactions.com/3dlikebox.js"></script>

This script is optimized by using Closure Compiler Service and licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License

2. Choose Your 3D Like Box Settings

Facebook Page URL
The URL of the Facebook Page for this 3D Like Box.
Box Width
The width (pixels) of the 3D Like Box for Facebook in pixels.
Box Height

The height of the 3D Like Box for Facebook in pixels.
Border Color
The border color of the 3D Like Box for Facebook.
Use Dark Colors
The color scheme of the 3D Like Box for Facebook.
Show Header
3D Transform
Setting this option will automatically rotate the 3D Like Box with the parameters specified below. Currently supported browser versions are Safari and Chrome v12 build 742 and above.
Perspective

The distance in px from the viewer’s position to the Z=0.
Origin
The X and Y transform origin as a percentage or as a CSS length unit of the box’s size. The following constants may be passed for X: left center right; for Y: top center bottom.
Direction
The [x,y,z] direction vector for the transition.
Duration
Defines how long (seconds) the transition should take.
Delay

Specifies the delay (seconds) between 3D transition of the 3D Like Box.

3. Embed 3D Like Box HTML code

Copy and paste the generated code below to your HTML where you want to place the 3D Like Box:

<div class="likebox3d"
  data-url="magicactions"
  data-auto
  data-depth="800"
  data-origin="left bottom"
  data-direction="1,1,0"
  data-duration="2"
  data-delay="5"
  style="width:292px;height:380px;">
</div>

3D Like Box for Facebook™ is not endorsed by Facebook™
Everything is © Copyright by Vlad & Serge Strukoff, unless otherwise indicated
Contact

3D Like Box for Facebook™ v1.5

Make a Nice Looking 3D Like Box for your website!