3D Like Box for Facebook™ Logo

3D Like Box for Facebook™ v1.5

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

By Vlad & Serge Strukoff | v1.5 | June 26th, 2011

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.

Advertisements

Basic Example

<html>
 <head>
  <title>3D Like Box Basic Demo</title>
  <link rel="canonical" href="http://www.example.com" />
  <script type="text/javascript" src="https://www.chromeactions.com/js/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="https://www.chromeactions.com/js/3dlikebox.js"></script>

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

Advertisements

2. Choose Your 3D Like Box Settings

  • The URL of the Facebook Page for this 3D Like Box.
  • The width (pixels) of the 3D Like Box for Facebook in pixels.
  • The height of the 3D Like Box for Facebook in pixels.
  • The border color of the 3D Like Box for Facebook.
  • The color scheme of the 3D Like Box for Facebook.
  • 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.
    The distance in px from the viewer’s position to the Z=0.
    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.
    The [x,y,z] direction vector for the transition.
    Defines how long (seconds) the transition should take.
    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>