Ocean Inflatables

Company Details

Products are unique and useful for many applications; from their Liquid Rail and Liquid Flyer for wakeboarding events, to their inflatable cinema for the casual nights on a deserted tropical island for their mega yacht clientele, to their FabDock to take your boat out of the water without lifting a finger, to their Critter Free Pool that makes a safe swimming environment out of any body of water.

Project Details

Ocean inflatables hired us to design all their branding, website and social media pages (coming soon). The wordpress website design consist of our 1st responsive design. Well it’s semi responsive to desktops and laptops only. As all of our custom WordPress sites, the back end is all customized so they can easily maintain each page and section. Site also includes contact page, blog news and products pages.

Project Link

http://oceaninflatables.com

Borderless Brands

Company Details

Create an innovative, focused and scalable U.S. market entrance platform that enables foreign consumer brands to increase revenues and drive global brand growth. Improve the overall well-being of U.S. consumers by introducing them to extremely high-quality products they may not otherwise know exist.

Project Details

Based off of their world logo icon, we wanted to brand this page to look out of this world and out of the ordinary. The coolest feature on this splash page design is the custom LightBox we created that when you click on 1 of the puzzle pieces, it pops up a puzzle shaped box. Look for how to do this in our next Tutorial coming soon.

Project Link

http://www.borderlessbranding.com

The jQuery Fix

Simply add this jQuery script inside the head tag of your website and you’re done:

<script type="text/javascript">
$(document).ready(function(){
    var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        frames[i].src += "?wmode=opaque";
    }
});
</script>

Once added, test your website, your embedded iFrames should now never overlap any sections of your website that are using the z-index property.

Don’t Forget jQuery

This fix relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server. Here’s an example of ours located in our WordPress theme:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js">
</script>

Download jQuery

You can download the latest version of jQuery HERE.

iMeet

Company Details

iMeet is your personal meeting space to get together any time. You can see everyone and learn more about people. It’s the best of conference calling, Web conferencing and social networking, all cleaned-up and ready for business.

Project Details

This is the 1st Facebook page we have built in the new timeline 810 pixel wide format. Using iMeet’s branding, we designed this custom page using WordPress so it pulls all their blog post and images in real time. This page has a Fan Gate that allows users to sign up for the FREE 60 day trial after they LIKE the page. We also added a recent tweet feed at the bottom of the tab.

Project Link

https://www.facebook.com/imeet/

Pizza Bar

Company Details

Great Pizza in 2 Miami locations. Size Matters..

Project Details

We used the Custom WordPress Splash page theme we created for other Menin Hotel sites then we branded it with Pizza Bar’s graphics. This is a 1 page splash page with Menu links that open lightbox windows. Also has a rotating background that we created custom site options in the back end which allows our clients to easily maintain.

Project Link

http://pizzabar.com/

Intentional Table

Company Details

We forage for stories and events featuring intersting small family farms, artisans, and authors, all with one thing in common…a belief in treating the earth, animals and workers with respect and dignity.

Project Details

We branded Intentional Table’s custom WordPress website with a soft earthy tone feel. Sections include: Stories, recent tweet feed, video galley post, events plugin and inserted the Amazon store as an iFrame and styled it to match website.

Project Link

http://www.intentionaltable.com/

AutoDesk

Company Details

Welcome to the social destination for Autodesk PLM 360. Cloud based and intuitively easy-to-use, PLM 360 represents a radical departure from the traditionally complicated, hardware-based systems that have kept PLM from living up to its full potential.

Project Details

Based off of Autodesk’s branding we were able to develop a fun and exciting custom Facebook tab using WordPress CMS. Many unique sections on this page which include: Roundtable video carousel slideshow (using Fan Gate), Custom twitter feed, Poll, Events section and Blog feed (mash-up of 3 combined RSS feeds).

As always, the WordPress backend is all custom developed so the client can easily maintain, add or edit any text or sections on this tab.

Project Link

https://www.facebook.com/AutodeskPLM360

Bar Tanaka – Shelborne Hotel

Company Details

Chef Tanaka partnered with LDV Hospitality and Menin Hotels to take his rich culinary traditions to South Beach to create a modern twist on Japanese cultures. Bar Tanaka offers an extensive sushi selection of the world’s freshest and finest fish as well as imported Japanese beers, sakes and wines.

Project Details

This custom Splash site was created using WordPress. Background rotates through tons of Hi Res photos and all menu links open Pop Up’s using Lightbox.

Project Link

http://bartanaka.com/

DHC

Company Details

DHC: Girls just want to have fun. What’s better than beauty tips from your friends? Whether you’re a strict minimalist or a product junkie, women love to trade beauty secrets with each other … let’s start talking!

Project Details

We were hired to develop and code the DHC wordpress blog. All the designs were supplied for us to code. Couple cool additional features that we coded was the video gallery slider located in the sidebar, you can scroll through the video thumbs and when you click on one a lightbox pops up. Another feature is a custom photo slideshow that pulls from the post media image folder along with the image captions and descriptions. The best part of the slideshow is that it scales in height depending on each image height and how much copy is inputted into the description field.

Project Link

http://www.dhccareblog.com/

Vesper American Brasserie – Shelborne Hotel

Company Details

As night approaches, Vesper transitions into an elite dining spot, with seating options inside the dark, rustic brasserie or poolside accompanied by salty air and candlelight. Modern American fare designed for two welcomes couples to the Vesper quarters. American wines and mood music set the scene for a well-rounded dining experience at South Beach’s newest epicurean hot spot.

Project Details

We were hired to design a Splash site for the Vesper Restaurant, a Splash site is essentially a one page website. We designed the branding to be very sexy and clean. The background transitions through a few photos. At the top menu bar you can view the PDF’s of their Menus, click on the About and Event links for a pop-up lightbox to tell you more details.

Project Link

http://vesperbrasserie.com/

Paste this URL into your web address bar:

https://www.facebook.com/dialog/pagetab?app_id=[APP_ID]&display=popup&next=https://[URL_TO_YOUR_APP_ON_YOUR SERVER]

Make sure that you replace [APP_ID] with your app ID and replace [URL_TO_YOUR_APP_ON_YOUR SERVER] with the path to your app page located on your website’s server.

Once you put this URL into the address bar it will display a drop down, simply select the fan page you want to use your app on and that’s it.

We hope this is just a temporary work around and that Facebook will resolve the issue soon but for now enjoy this easy fix. If you know of any other work-arounds for this new issue, please let us know in the comments.

Sanctuary South Beach Hotel

Company Details

Sanctuary Hotel and Spa is in an ideal South Beach setting for those who want to be away from it all but in the middle of it all. Whether your trip is business or leisure our knowledgeable staffs will guide your South Beach experience and make sure that exceptional service is unlike any other Miami Beach Hotel.

Project Details

We went with a sexy photo heavy look for this custom WordPress Design. This is a very unique web site and layout design with tons of custom jquery and some HTML5. We tried to make the layout as different as possible and still be easy to navigate around, as far as we know we have never seen a site quite like this before.

Many pages to navigate that all are using a unique layout where the photos all scale with the page and stay in their respective spots: Suites, Rooftop, Restaurant (OLA) and SPA. Location’s page we added a Google map to fill in the whole background. The bottom menu includes their contact info, menu, social icons and their hotel booking engine. And the best part about the menu is you can minimize it by clicking that bottom button. Be sure to check out the Photo gallery page as this was all custom done by us and we have future plans to turning this into a wordpress plugin.

Project Link

http://sanctuarysobe.com/

Fundyng

Company Details

Fundyng.com and its partners have backed more than 35,000 businesses in their times of greatest financial need when banks have refused to lend. With backgrounds as operators businesses small and large, we understand that access to capital should empower your business and not distract it. Fundyng.com can help you obtain the money you need to run and grow your business. Call us today.

Project Details

We wanted to get a nice clean professional Facebook page and at the same time incorporating Fundyng’s green. This advanced Facebook tab is coded in a wordpress backend system. The page has a custom slideshow created where Fundyng can go into the backend system and add the image, title and description with ease. The form is pulling from the action script supplied to us and we also made the “error message” page and “thank you” page show up in the same self facebook iframe after the form is submitted.

A very cool feature this page has is located at the bottom section. We used a custom jquery menu which allows the information at bottom to change when you click on a different menu buttons. And once again, everything can easily be edited by the user in the backend of the WordPress CMS.

Project Link

https://www.facebook.com/GetFundyng

Papaya Homeware

Company Details

Simply Beautiful Homeware.

Project Details

We based this design off the branding of Papaya’s website. A cool feature on this page is the send to friend form. Other features include: email sign up form, custom slideshow and locations section.

Project Link

http://www.facebook.com/papayahomeware

Social Toolbar Pro (A Daddy Design Company)

What is it?

This premium wordpress Plugin is for adding a highly customizable toolbar with color selection, social network icons, recent tweet and share buttons into footer or header of a wordpress website.

Social Toolbar Pro will display your latest tweet, list your social networking profiles (over 70 social network profiles to choose from in PRO), and allow users to “Like” your page/post on Facebook, Google +1 your page/post and tweet about it on Twitter! You can also specify colors on just about every detail on it including the background, border, social icons, recent tweet background and fonts. Select your social network icons and you can also rearrange your icons to your desired display order. On top of that you can also upload your own custom icon.

Project Details

We went with a very clean easy to navigate wordpress design. The plugin used for the product purchase section is called WP eStore. Many great pages and sections on this very advanced wordpress website: about, blog, FAQs, icons available, forum (coming soon), contact form, update plugin form, showcase and many more.

One of the coolest features on this site (besides the Toolbar of course) is the DEMO tester on the left. Go ahead and play with the settings, it will show you some of the cool customization settings the toolbar has to offer.

We also created a custom Facebook tab using Fan Gate for a $5 off coupon code.

Project Links

WordPress Website: http://socialtoolbarpro.com
Facebook Tab: http://www.facebook.com/socialtoolbar
Twitter Design: https://twitter.com/socialtoolbar

SanDisk

Company Details

SanDisk’s Official Facebook Page for our Retail Products. Capture. Share. Preserve. Memory Cards for: Digital Cameras, Phones & Tablets, and Gaming Devices. USB Flash Drives. Sansa Music & Video Players. Solid State Drives. Memory Vault

Project Details

These Facebook tab designs were a very fun project for us. Using the WordPress CMS, we created 3 different custom Facebook tabs. All 3 tabs use the same header and footer share section design.

Landing tab is the welcome and support tab, using very advanced jquery we created custom drop down menus for the product lines, support and where to buy links. Also included in this tab is a custom slideshow. The 2nd tab is the Worldwide tab. This tab is used to find out where all the SanDisk facebook pages are located worldwide, all created in the same system and using the same menu drop down jquery code. 3rd tab is dedicated to their product “Memory Vault” with a slideshow, video, link to more info and news section.

Project Links

Welcome Tab: http://www.facebook.com/SanDiskConsumerProducts
Worldwide Tab: http://www.facebook.com/SanDiskConsumerProducts?sk=app_264835586902665
Memory Vault Tab: http://www.facebook.com/SanDiskConsumerProducts?sk=app_105705572878047

To add on to How to Create a Custom Facebook Share Button for your iFrame Tab, we at Daddy Design have figured out how to add a fully customizable counter to go along with it! Let’s get started:

The Code

Step 1: PHP

<?php
function fb_count() {
global $fbcount;
$facebook = file_get_contents('http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/');
$fbbegin = '<share_count>'; $fbend = '</share_count>';
$fbpage = $facebook;
$fbparts = explode($fbbegin,$fbpage);
$fbpage = $fbparts[1];
$fbparts = explode($fbend,$fbpage);
$fbcount = $fbparts[0];
if($fbcount == '') { $fbcount = '0'; }
}
?>

First, you will want to grab this code and save it as its own PHP file on your server. Name this file social.php. After saving this file, change the URL in $facebook = file_get_contents(‘http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/‘); to the URL you wish to ‘Share’.

<?php
require("social.php");
fb_count();
?>

After you have your social.php file set up, you will then want to migrate to the web page in which your custom Facebook share button with a custom counter will be placed. With the code above, place it under the <html> tag of your page. Make sure that require{“social.php”) is linked appropriately.

<?php
$title=urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url=urlencode("http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary=urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image=urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>

Remember this? If not, you can read about it here. This is the backend to your custom Facebook ‘Share’ button. Plug in the necessary information to display in the Facebook ‘Share’ window.

Step 2: XHTML

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
Insert text or an image here.
</a>

This is the all-important link that will lead to the pop up Facebook ‘Share’ window. Once again, if you are unfamiliar with its function, please check the original tutorial.

<div id="fbcount">
<?php	echo $fbcount; ?>
</div>

Last but not least, this is the code for the Facebook ‘Share’ counter to show. The $fbcount will be fed from the social.php file, so be sure to have the above code. And with the code being inside the #fbcount div, you have unlimited options on how to make your Facebook ‘Share’ counter look awesome with CSS.

Completed Code

<!DOCTYPE html>
<html lang="en-us">
<?php
require("social.php");
fb_count();
twit_count();
?>
<head>
<meta charset="utf-8">
<title>Daddy Design - Custom Facebook Share Button With Custom Counter - Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<base target='_blank' />
</head>
<body>
<div id="container">
<?php
$title=urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url=urlencode("http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary=urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image=urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>
<a onclick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=620,height=280');" href="javascript: void(0)">
Insert text or an image here.
</a>
<div id="fbcount">
<?php	echo $fbcount; ?>
</div>
</div>
</body>
</html>

Live Demos

Example 1

Example 2

Example 3

Do you like our examples? Download all of the codes here.

Please Note

Your web page must be a PHP file in order for this to work.

Be sure to read our article on how to create a custom Facebook share button before starting this tutorial to have full knowledge on how to create and customize your very own Facebook ‘Share’ button.

The counter will only read the full number of Facebook ‘Shares’. The number will not be shortened to (for example:) “10K”. Be sure to keep this in mind while designing your own custom Facebook ‘Share’ button with a custom counter. We are working on a way to shorten larger numbers.

In order to see the Facebook ‘share’ you have just posted on the counter, the page must be refreshed after submitting. We are working on a code that will automatically refresh the page after submitting your Facebook ‘share’.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. If you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial. Only comments will be responded to.

Menin Hotels, Raffaello Hotel, Sanctuary Hotel, Shelborne Hotel and Bentley Hotel.

Project Details

After we designed the Menin Hotels HTML5 website, they hired us to design multiple Facebook pages for all of their hotels. Using one WordPress CMS, all 5 pages have the same type of layout but with different graphics and content. We set up the WordPress Backend so that Menin Hotels can maintain each section for each page with ease.

As you can see on the pages, we inserted the booking reservation forms so you can make your room reservation directly on Facebook. Another cool feature we added that you don’t see in many Facebook pages, is an accordion menu for each section. Some of those sections include: photo slideshow, hotel Bio, hotel Specials, directions (using google maps), recent tweet, sharing section and contact info.

Project Links

Shelborne Hotel: http://www.facebook.com/theshelborne
Bentley Hotel: http://www.facebook.com/bentleysouthbeach
Raffaello Hotel: http://www.facebook.com/raffaellochicago
Sanctuary Hotel: http://www.facebook.com/pages/Sanctuary-South-Beach/
Menin Hotels: http://www.facebook.com/meninhotels

ZipRealty

Company Details

ZipRealty provides home sellers and buyers with an innovative real estate website. Our licensed ZipAgents have years of experience in the areas they serve, and are active members of their local, state and national real estate and MLS associations. In addition, our website provides a step-by-step approach to guide our clients through the home selling and buying process.

Project Details

With the supplied artwork, we were able to create this custom Facebook video contest tab. After you LIKE the page, you will be able to click on the upload video button and upload your personal video. We also placed a few of the thumbnails that link to the video gallery.

Project Link

https://www.facebook.com/ziprealty

Back in February we released the tutorial ‘How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page’ for FBML Facebook Fan Pages. With how rapidly Facebook changes the way things look and operate, we have been doing the same when designing for Facebook. The February tutorial explains how to use a Fan Gate to reveal specific content only to those who ‘Like’ your FBML page. Since FBML has basically become extinct and will soon be phased out completely the new current method for creating Custom Fan Pages is the Iframe method. Creating a Fan Gate for the Iframe method differs greatly from the old FBML method. In this tutorial we will teach you the correct way to setup a Fan Gate for your Custom Facebook Iframe tab to show and hide content to Fan and Non-Fan users.

*PLEASE NOTE: The web is constantly changing and while we are currently using HTML5 on all of our projects not everyone is, for this reason we will still use the HTML that most are familiar with in our tutorials. If you are currently using HTML5, you can easily adapt this tutorial’s code to reflect the new and improved HTML5.

Before You Start

Before getting started on this tutorial you should currently already have a Custom Facebook Iframe Tab already set up for your Facebook Fan Page. If you do not already have one set up, complete our previous two tutorials ‘How to Set Up a Facebook Application for your Custom IFrame Tab’ and ‘How to Create a Custom Facebook IFrame Tab’. After completing these two tutorials you should have a fully functioning Facebook Iframe Tab and your code should look like the code below, which will be the basis for this tutorial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<base target='_blank' />
</head>

<body>

<div id="container">

  START YOUR CODING HERE

</div>

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>

</body>
</html>

Step 1: Download and Setup Facebook PHP

In order to retrieve information from Facebook on whether or not the user is logged in and has ‘Liked’ your Facebook Fan Page you will need to download the current Facebook PHP file and set it up for reference. You can download the most current version here https://github.com/facebook/php-sdk, after you download the zip file, find the facebook.php file. Copy and paste this file alongside your current Iframe files. Next open up your index.php file, make sure your file has a .php extension, if it does not make sure to change it now. Copy the following code below and paste it at the absolute top of your file above the :

<?php
require 'facebook.php';

$app_id = "INSERT YOUR APP ID HERE";
$app_secret = "INSERT YOUR APP SECRET HERE";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
?>

You will need to change two items in the code, insert your Iframe tabs specific ‘APP ID’ and ‘APP SECRET’, these can be found by visiting your Facebook developer page. Also make sure that the path to the facebook.php file is correct.

Step 2: Set Up the PHP Variables

The next step is to set up 2 PHP variables that will retrieve the appropriate information from Facebook about the user’s status. Update the PHP code from Step 1 with the following two lines of code:

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];

Your PHP code should now look like this:

<?php
require 'facebook.php';

$app_id = " YOUR APP ID";
$app_secret = " YOUR APP SECRET";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];
?>

The first variable, $signed_request, simply checks whether or not the user who is visiting your Fan Page is actually signed into Facebook. The second variable, $like_status, takes the first variable and uses it to find out whether or not the signed in user has ‘Liked’ your Facebook Fan Page.

Step 3: Using the Variables in a Conditional Statement

We now know whether or not the current visitor ‘Likes’ your Fanpage, let’s now use this information to build a conditional statement to power the Fan Gate. Copy the following code and paste it inside your ‘container’ DIV in your HTML code:

<?php if ($like_status) { ?>
FAN CONTENT HERE
<?php } else { ?>
NONFAN CONTENT HERE
<?php } ?>

This is a very basic conditional statement; it simply states if the user has ‘Liked’ the page do this, otherwise do this instead. The content under ‘if ($like_status)’ is revealed to viewers that have become a fan of your page. If viewers have not become a fan of your page, then they will see the content under ‘else’. You should now have a fully functioning Fan Gate on your Custom Facebook Iframe Tab.

Bonus Step: Using a ‘Like’ Button on your Iframe Tab

When using a FanGate on your Facebook Iframe Tab, it is best to have the ‘Like’ button readily available within the design. This way your viewers do not have to scroll upward to find the ‘Like’ button. Thankfully, Facebook provides simple coding to add a ‘Like’ button to any website.

Get your Facebook ‘Like’ button plugin code here http://developers.facebook.com/docs/reference/plugins/like/. While filling out the necessary information to complete the look of your ‘Like’ button, be sure to use your Facebook Fanpage URL. After you grab the final code, place it anywhere in your Facebook Iframe Tab code where you want it to show up. Also, you do not have to include the Facebook JavaScript code that is referenced at the beginning since we are already communicating with Facebook through other methods.

Now that you have a ‘Like’ button inside your actual Facebook Iframe Tab coding there lies one very big problem with functionality. If a visitor uses the ‘Like’ button inside your actual code, only the ‘Like’ button updates and shows that the visitor has ‘Liked’ the page. This is a problem because the page needs to refresh on ‘Like’ to show the Fan content, which means the user has just ‘Liked’ your page but is still stuck viewing the Non-Fan content. So in order to get our ‘Like’ button synced up with our Fan Gate and make it all work properly we need to force the page to refresh when a user clicks the ‘Like’ button. Copy the following JavaScript code and paste it before the body end tag:

<script>
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'FACEBOOK URL TO REFRESH';
});
</script>

You will need to insert the full Facebook URL to the tab containing the ‘Like’ button so that the proper URL is refreshed and the Fan Content is shown. The URL should look something like this:

http://www.facebook.com/yourfanpage?sk=app_###############

Complete Code Including Bonus ‘Like’ Button JavaScript:

<?php
require 'facebook.php';

$app_id = " YOUR APP ID";
$app_secret = " YOUR APP SECRET";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<base target='_blank' />
</head>

<body>

<div id="container">

<?php if ($like_status) { ?>
FAN CONTENT HERE
<?php } else { ?>
NONFAN CONTENT HERE
<?php } ?>

</div>

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
<script>
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'FACEBOOK URL TO REFRESH';
});
</script>

</body>
</html>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Verde

Company Details

Bahamas electronic store selling Laptops, Desktop computers, Flat Screen TV’s, Satellite Systems, Security systems, Surround Sound Systems, Digital cameras, Mp3 players, Video games and consoles, Video game cards. A wide variety of printers and printing paper, wireless routers, external hard drives. Tablets including the Kindle, The Nook, The Coby tablet, The Blackberry Playbook, The IPad 2 and many more. Thee also carry tons of other accessories and electronics.

Project Details

Using their greens and blues, we came up with a clean layout for this custom facebook design. This tab has a fan gate area at the top that showcases a featured product and brochure download once you LIKE their page. Other sections on the page include a facebook photo contest, featured video and multi link area.

Project Link

http://www.facebook.com/verdefans

Miami Beach Taxpayers Association

Company Details

The association is dedicated to help bringing awareness and solutions to the following issues facing our amazing city of Miami Beach: Excessive Taxes, Bloated Municipal Payrolls, Lack of Planning, Delayed Infrastructure Projects, Inefficient Buildings Department, Outdated Convention Center and Junkets at our expense by Commissioners and City Manager

Project Details

We first designed and established the logo/branding for them, once that process was over we created a clean easy to navigate wordpress design. The custom wordpress consist of a New & Highlights blog, taxpayers resources (which we used the custom blogroll coding), Analysis Commentary section and a members only area which will have members directory, news and videos.

Project Link

http://miamibeachtaxpayers.org/

iStunt

Company Details

Search for 2nd Unit Directors, Stunt Coordinators and other Stunt Professionals for your Film or Television Production! Browse Reels, Photos, Profiles and More in our Professional Stunt Directory!

Project Details

This Social Media Design package included a custom Facebook design, YouTube design and a Myspace design all based on the same branding. The facebook was actually done in FBML and was created 7 months ago but iStunt wasn’t ready for it to be launched until now. The facebook tab and myspace layout have many sections including: featured member of the month, featured action coordinators, flickr slideshow, search box that works directly with the iStunt website, social network icons and much more.

Project Links

Facebook Design: http://www.facebook.com/iStuntDirectory
YouTube Design: http://www.youtube.com/user/istuntregistry
Myspace Design: http://www.myspace.com/572419696

Menin Hotels

Company Details

Menin Hotels is a full service hospitality management company providing guests with a unique, memorable vacation or business hotel experience. We have a reputation for maximizing assets and a portfolio of proven results in upscale lodging as well as lifestyle restaurants. Our expertise is respected in the industry and sought after among hospitality proprietors.

Project Details

Not only was this our first HTML5 project but it’s also our first with incorporating HTML5 into the custom WordPress CMS. We used parallax scrolling to create a unique navigating experience within the home page. Just scroll down the page or click on one of the Hotel links in upper right. Pretty cool, right? There are five pages located in this one home page.

Another cool HTML5 trick we used was for when your viewing this on smaller monitors. If you scaled your browser window down you will notice a bunch of the sidebar menu links disappear then move to a new top horizontal menu.

The other pages of this website all use a JS accordion menu style to display all their content. As you can also tell, every page uses a full background image. Go ahead and and navigate through the site, we are very proud about the how everything turned out!

Project Link

http://meninhotels.com

IBM (smarterquestions.org)

Company Details

SmarterQuestions – Discover the comparative advantages of IBM solutions. Ask smarter questions.

Project Details

We were very honored and excited to design a wordpress blog for IBM. We went with a very clean and colorful design with separating each of the main blog categories with its own color titles. Wanted each category to have it’s own feel and own sections (with spotlight and top story dedicated to each one) . This wordpress site is also using our very own WP Social Toolbar plugin.

We also created thier custom Facebook design using the same WordPress system. The featured and regular post all dynamically change when IBM changes updates the blog post. Added a share section in footer which includes Tweet, Google +1 and Facebook recommend buttons.

Project Links

WordPress Blog: http://smarterquestions.org/
Facebook Iframe: https://www.facebook.com/SmarterQuestions

Connected the Film

Movie Details

Between texts and tweets, memes and microchips, we’ve become great at breaking the world down into byte-sized bits. In the process we’ve stopped seeing the forest for the trees, never mind the root system that connects them all. In Connected, Tiffany Shlain—award-winning filmmaker and founder of The Webby Awards–sets out to explore these bonds with the help of her father, acclaimed author and thinker Dr. Leonard Shlain. When the unexpected happens during the making of the film, Tiffany is forced to reexamine everything she thought she knew about life, relationships, and connectedness. Tracing interdependence through history, she discovers the surprising links between right brain and left; alphabets and power; honey bees and stress; hormones and happiness; technology and nature; progress and consequences; and parents and children. The result is a personal film with universal resonance that encourages viewers to make connections of their own.

Project Details

Based on supplied photoshop file, we created this custom facebook tab using wordpress. Every section is easily changeable by Connected using the backend system we built. You can view the Connected Movie Trailer on the tab.

Project Link

Welcome Tab: http://www.facebook.com/connectedthefilm
Press Tab: http://www.facebook.com/connectedthefilm?sk=app_225840677469074

Freestyle Cruiser

Company Details

The Freestyle Cruiser™ from FreeStyle Slides is the world’s first custom made, sealed-air inflatable water slide for the yacht industry. At FreeStyle Slides our vision for cutting edge family entertainment has led to the development of some of the most unique inflatable slides in the world. The Freestyle Cruiser™ is a highly unique product that provides the most exciting experience in water toys for privately owned and charted vessels.

Project Details

Freestyle Cruiser hired us for the full social media design package, which includes: Custom WordPress website design, Facebook design, Twitter design and Youtube Design. This is a very advanced coded wordpress site using tons of custom fields. As you will see, we tried to incorporate a new image and view of the inflatable yacht slide on background of each page. Site also includes a blog, showcase section, photo gallery, social network icons, contact form, order process, twitter feed and much much more.

Using the same wordpress, we built a custom CMS iframe Facebook tab. This tab showcases a photo slide show, information on the slide, recent blog feed, recent tweet and more. The custom twitter and YouTube background is based on the same branding.

Project Links

WordPress Website: http://freestylecruiser.com/
Facebook: http://www.facebook.com/FreeStyleCruiser
Youtube: http://www.youtube.com/freestylecruiser
Twitter: http://twitter.com/yachtslide

Stanford School of Medicine

Company Details

Stanford’s goal for this page is to provide you with an informative and entertaining source of news about Stanford University School of Medicine. They hope you enjoy the page enough to post on our wall from time to time. They particularly welcome additional information on the subject of our wall posts, opinions that advance a debate on the subject of our posts, factual correctio…ns, and your posts about events at the school.

Project Details

The main focus for this custom facebook tab is to drive traffic to the “Support and give a gift” page on Stanford Medical’s website. We created a cool CSS photo slide show in the top section and the bottom is a huge cool link that hovers red.

Project Link

http://www.facebook.com/stanfordmedicine

Green State TV

Company Details

Green State TV is an online video program that seeks to engage people in conversations about agriculture, the environment and other important issues such as world hunger and sustainability.

Project Details

Based on some of Green State TV’s website branding, we created this nice custom Facebook page to primarily showcase their video episodes. Also added is some share buttons and an email sign up form.

Project Link

http://www.facebook.com/GreenStateTV

Now that no new FBML Facebook tabs are able to be created, Facebook users must now use the IFrame method in order to add custom tabs to their Facebook Fan Page. IFrame tabs are definitely a bit more complicated to create compared to FBML tabs, mainly due to the fact that you must set up a Facebook Application (CLICK HERE to see our tutorial on how to set up a Facebook Application for your Custom IFrame Tab). Even though they may be more difficult to create, there are numerous advantages to using IFrame tabs over FBML tabs; code resides on your own server, flash does not require click to activate, limitless Javascript opportunities, and more. In our previous tutorial we taught you how to set up your Facebook Application, now we are going to teach you how to create the actual Custom Facebook IFrame tab and how to properly sync it with your application.

*PLEASE NOTE: In order to complete this tutorial, you should have a basic knowledge of XHTML and CSS. This tutorial will only teach you how to set up all files necessary to properly create a Facebook IFrame tab, all other design and coding is up to you. If you feel that you cannot complete this tutorial, contact us in order to find out about our Custom Facebook IFrame Tab design rates.

Step 1: Create the Basic Facebook Application

In order to create a Custom Facebook IFrame Tab you will first need to set up a Facebook Application. If you have not already created your application, do so now. If you do not know how to set up a Facebook Application for your Custom IFrame tab, please first read and complete our tutorial ‘How to Set Up a Facebook Application for your Custom IFrame Tab’.

Step 2: Setting Up the Basic PHP File

You should now have your Facebook Application up and running and ready to start creating your actual IFrame Tab. Assuming you have read and completed our tutorial, on how to set up your Facebook Application, you should now have a blank ‘index.php’ file ready to edit. The first thing we will do is add the normal necessary HTML code to get our PHP file working. Open your PHP file and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<base target='_blank' />
</head>

<body>

<div id="container">

  START YOUR CODING HERE

</div>

</body>
</html>

You should now have a basic functioning ‘index.php’ file. This is all very basic HTML and anybody who knows anything about HTML should have no problems understanding what we’ve done here.

Don’t forget to fill in your page title, even though it’s not necessary for your IFrame tab it’s always good practice to fill this in rather than leave it blank.

Inside of the ‘head’ tag you will notice that we have linked to an external stylesheet named ‘style.css’, this will be referenced later in Step5. One item located inside of the ‘head’ tag which you may not be familiar with is the usage of ‘base target’. Since we are creating an IFrame, all links will be targeted inside of the IFrame, by using ‘base target’ and setting it to ‘_blank’ we have now told all links inside of our IFrame to link externally to new pages. There may however come a time when you need to actually have a link target inside of your IFrame but still want all other links to link externally. You can achieve this by using an individual ‘base target’ on the link you want to link inside your IFrame and setting it to ‘_self’ (**see example below).

Finally, once you have completed all steps of this tutorial you will actually start creating your Custom IFrame code inside of the container div where it says ‘START YOUR CODING HERE’.

*PLEASE NOTE: Make sure you use PHP files when creating your IFrame Tabs, even though we are not actually using any PHP in this tutorial, Facebook plays much nicer with PHP files. Also if you want to do something like FAN/NONFAN content you will need to use specific Facebook PHP code to achieve this (look for our tutorial ‘coming soon’ on how to create FAN/NONFAN content for IFrame tabs).

**EXAMPLE:

<a href=”YOUR LINK HERE” target=”_self”>TEXT OR IMAGE</a>

Step 3: Adding the Facebook Javascript

Now that we have a working ‘index.php’ file, we can add the Facebook Javascript that is needed to help power our Custom IFrame Tab. This bit of Javascript is what will actually make our ‘index.php’ file communicate with our Facebook Application. Add the following script just before the body close tag inside of your ‘index.php’ file:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>

Make sure you change where it says ‘INSERT YOUR APP ID HERE’ to your actual unique App ID. Your App ID can be found inside of your actual Facebook Application by logging into your Facebook account, visiting https://www.facebook.com/developers/, and then selecting your application from the ‘My Apps’ list on the right. Failure to do so will result in your IFrame tab not showing up on your Facebook Fan Page.

Step 4: Eliminate Unwanted Scrollbars Using Javascript

This script will help resize the IFrame canvas to eliminate the unwanted scrollbars that typically result from using an IFrame. It will dynamically adjust your IFrame’s size so that you do not need to actually set a default height. This is definitely an added bonus for users whose tab will feature updatable content that does not always conform to a certain size. Place the following code inside of the ‘head’ tag inside of your ‘index.php’ file:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

No changes are required after inserting this code, just drop it in and you’re good to go.

Step 5: Required CSS

Create the ‘style.css’ file that we referenced in Step2 and put it alongside your ‘index.php’ file. Add the following CSS to your file:

body{
margin: 0;
overflow: auto;
}
#container{
width: 520px;
margin: 0 auto;
overflow: hidden;
position: relative;
}

The CSS added to the ‘body’ is the most important; this will help ensure that we properly eliminate the unwanted scrollbars from our tab. Since our actual IFrame tab area is only 520px, you should set the ‘margin’ to 0 which will help eliminate any unwanted extra margins from being added to our IFrame. Failure to remove any default margins from your file may result in shifted or missing content when your IFrame is viewed on your Facebook Fan Page. By adding the ‘overflow’ attribute to our ‘body’ and setting it to ‘auto’ we are ensuring that our IFrame tab will properly resize, failure to add this will result in a very unstable IFrame tab. You may notice that if you are only testing your IFrame tab on a remote server and not on Facebook, when your content is long enough you are not able to scroll. By temporarily removing the ‘overflow’ attribute, while testing, this issue will be fixed. Just make sure that you remember to add the ‘overflow’ attribute back when you’re finished testing.

The styles we added for the container div are only a suggestion; you may alter this in any way you see fit. It is definitely good practice to make sure that the width of your container div is set to 520px, this will help ensure that all of your content will fit within the area allowed by Facebook.

Step 6: Upload, Test, and Start Your Coding

Now that you have a basic functioning ‘index.php’ file and stylesheet, upload them to the location on your server that you specified in your Facebook Application for the ‘Canvas’ and ‘Tab’ URLs. Failure to upload these files in the correct place will result in a broken IFrame tab. After uploading the files, go to your Facebook Fan Page, find your tab in the menu on the left side and if all steps were completed properly you should see ‘START YOUR CODING HERE’. Now that your IFrame tab is fully functioning, you can begin your actual custom coding.

Complete Code for your ‘index.php’ File:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<base target='_blank' />
</head>

<body>

<div id="container">

  START YOUR CODING HERE

</div>

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>

</body>
</html>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Ch2

Band Details

CH2 Guitar Duo consists of two (ever so slightly crazy) guitarists that play a fusion of classical, latin, flamenco and instrumental pop.

Project Details

Ch2 hired us for the whole Social Media Design package which includes a custom website built in wordpress, custom twitter background, custom myspace 3.0 and a custom facebook design which was also built using wordpress.

The WordPress website is definitely one of our most advanced sites we’ve built, with using tons of javascript including the full size background effect, go ahead and scale the page up and down . A very cool feature is the home page sidebar, which you scroll up and down and can open and close. The sidebar has everything from custom twitpic / twitter feed widget, facebook wall feed widget, upcoming events section, feature video, recent album for sale and email sign up section.

Just like the twitter background and myspace page, the facebook fan page is designed using the same branding across the board. With this facebook page being built in wordpress, a great feature is the reverbnation music player added and the slideshow.

Project Links

WordPress Website: http://www.ch2guitarduo.com/
Twitter: http://twitter.com/ch2guitarduo
Myspace: http://www.myspace.com/ch2ch2
Facebook: http://www.facebook.com/ch2guitarduo

Since Facebook has decided to end the creation of any new FBML custom tabs, Facebook users are now forced to create custom tabs using the ‘new’ updated Facebook IFrame method. In the past, adding FBML custom tabs was a simple process which almost anyone could accomplish; the same cannot be said for the IFrame method which requires the creation of an actual Facebook Application. Many Facebook users have no idea what a Facebook Application is, let alone know how to set one up. This tutorial will teach you, in 6 easy steps, everything you need to know in order to properly set up your Facebook Custom IFrame Application.

*Please Note: This tutorial is only for setting up a Facebook Application to be used for a Custom IFrame Tab on your Facebook Fan Page. If you are creating a Facebook Application for any other purpose these steps may not work for your desired application. Please refrain from asking for any support other than for a Facebook Custom IFrame Tab Application.

Step 1: Create the Basic Facebook Application

Log into your Facebook account and visit https://www.facebook.com/developers/, then click on the ‘Set Up New App’ button and complete the following steps:

1. Name Your Application – *Cannot contain Facebook trademarks or have a name that can be confused with an app built by Facebook.
2. Agree to the terms by clicking ‘Yes’.
3. Click on the ‘Create App’ button.
4. Complete the ‘Security Check’ on the next page.

After successfully completing the ‘Security Check’ you should now be inside the main editing area for your Facebook application. You should see a tab menu on the left side containing the following links; About, Web Site, Facebook Integration, Mobile and Devices, Credits, and Advanced. Only the first 3 tabs (About, Web Site, and Facebook Integration) will require any type of editing in order for the Facebook Custom IFrame Tab Application to work properly.

Step 2: About / Basic Information

The first tab that should already be selected is the ‘About’ tab, the only section on this tab that we will need to edit is ‘Basic Information’. Complete the following steps:

1. Application Name – This should already be filled in according to what you named your app in Step 1. If this is blank, fill in your unique application name.
2. *Icon – This is the small icon that will actually appear next to your tab name on your Facebook Fan Page, think of this in the same way as a favicon for a website. You will need to create a small icon that is 16 pixels X 16 pixels, just like a favicon this icon should represent the branding of your tab and not contain too much detail because of the small size. After you have created your icon, click on ‘Change your icon’ and upload it from your computer.
3. The email address that you use for your Facebook Account should already be used for the ‘User Support Address’ and the ‘Contact Email’, you may change this to any email address you like but note that it is not necessary for the application to work properly.
4. Description and Logo are optional and will not show up anywhere on your actual Facebook Fan Page.

*Do not worry if the icon is left blank, it will default to the Facebook icon, however we recommend that you do add a custom icon to improve your tabs overall look and feel.

Step 3: Web Site / Core Settings

After you have completed Step 2, click on the ‘Web Site’ tab. This tab is where we will actually reference our website to allow Facebook access to the core domain. Complete the following steps:

1. ‘Application ID’ and ‘Application Secret’ are created specifically by Facebook for your application and cannot be changed.
2. Site URL – Enter your site’s full base URL, make sure to include http://www or http:// depending on your site. (Examples: http://www.yoursite.com/ or http://yoursite.com/) *Be sure to use a trailing slash(/) after the url.
3. Site Domain – This will be your site’s full base URL minus the http://www or http://. (Example: yoursite.com)

Step 4: Facebook Integration / Canvas

After you have completed Step 3, click on the ‘Facebook Integration’ tab. There are two sections that need to be edited for this tab; the first section is ‘Canvas’. Complete the following steps:

1. *Canvas URL – Facebook pulls the content for your app’s canvas pages from this base URL. This URL can be anywhere on your site domain listed in Step 3 but must contain the full link. The easiest way to set this up is to create a folder named ‘facebook’ and use’ index.php’ as your main file (Leave this file blank for now, this will be covered in more detail in the actual Custom IFrame Tab tutorial.). When using this set up your ‘Canvas URL’ will look like this; http://www.yourdomain.com/facebook/. *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).
2. **Secure Canvas URL – Facebook uses this secure version of the Canvas URL when your app is accessed by a user over a secure connection (https). Will be set up the same way as Step A but contains the https secure connection. Your site must have an SSL certificate to use this, if your site does not have an SSL certificate leave this item blank. (Example: https://www.yourdomain.com/facebook/) *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).
3. IFrame Size – Switch to Auto-resize. This is important to allow our IFrame to expand to any height and not be constricted to the default height set by Facebook, which will produce unwanted scroll bars. This will be covered in more detail in the actual Custom IFrame Tab tutorial.

*Please note that it is important that you use php files because core Facebook php code may be required depending on the complexity of your Custom IFrame tab. This will be covered in more detail in the actual Custom IFrame Tab tutorial.

**Since the addition of the secure login for Facebook, any user who is logged in on a secure connection will not be able to access your Custom Facebook Tab unless your tab uses the ‘Secure Canvas URL’. If you want all users of Facebook to be able to access your Custom Facebook Tab regardless of their login method you must purchase an SSL Certificate for your site and set up the ‘Secure Canvas URL’.

Step 5: Facebook Integration / Page Tabs

The next section in the ‘Facebook Integration’ tab that needs to be edited is ‘Page Tabs’. Complete the following steps:

1. Tab Name – The title of your tab on your Facebook Fan Page. This title will show up in the Facebook Fan Page menu along with the ‘Icon’ that we set in Step 2B. Currently the max amount of characters allowed for this title is 16.
2. Tab URL – Facebook pulls content for your tab from this URL. Use the same URL that you used for the ‘Canvas URL’. *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).
3. *Secure Tab URL – The secure version of the Tab URL. If your site has an SSL Certificate, use the same URL as the ‘Secure Canvas URL’ otherwise leave this item blank. *Be sure to use a trailing slash(/) after the url or the file name and extension(index.php).

*Since the addition of the secure login for Facebook, any user who is logged in on a secure connection will not be able to access your Custom Facebook Tab unless your tab uses the ‘Secure Tab URL’. If you want all users of Facebook to be able to access your Custom Facebook Tab regardless of their login method you must purchase an SSL Certificate for your site and set up the ‘Secure Tab URL’.

Step 6: Save Settings

The final step is to save all of your app settings by clicking the ‘Save Settings’ button. If you encounter any issues trying to save your settings recheck all steps and make sure you have filled in the items correctly.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

]]> http://www.daddydesign.com/wordpress/how-to-set-up-a-facebook-application-for-your-custom-iframe-tab/feed/ 21 http://www.daddydesign.com/wordpress/how-to-set-up-a-facebook-application-for-your-custom-iframe-tab/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/SEVtTf449_I/ http://www.daddydesign.com/wordpress/oil-price-custom-facebook-design/#comments Mon, 27 Jun 2011 18:00:12 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2282 ]]> Company

Oilprice.com

Company Details

OilPrice is the fastest growing energy site online. We work with over 100 writers and analysts to bring visitors the latest worldwide energy news and opinion, from Oil and Coal to Nuclear and Wind Power. They publish 10+ articles and reports per day and consider ourselves to have the most complete and robust energy news service online.

Project Details

We coded and designed many news feeds into this Facebook Iframe design (recent articles, recent news and recent tweet feeds). One cool feature on this page is the widget download section, we put in a featured widget and download code and you can also click on the button that takes you to all the other widgets.

Project Link

http://www.facebook.com/pages/OilPricecom/209092429135071

]]> http://www.daddydesign.com/wordpress/oil-price-custom-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/oil-price-custom-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/iDJCTeQhI2A/ http://www.daddydesign.com/wordpress/startup-caffeine-fbml-facebook-design/#comments Mon, 27 Jun 2011 17:51:25 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2279 ]]> Company

Startup Caffeine

Company Details

Awesome Free Videos, PDF’s & News For Startups Who Need Fast Funding & Fame!

Project Details

The last FBML design we will probably be doing. We branded, designed and coded these 2 tabs. 1st tab allows user to signup for a FREE PDF download. 2nd tab showcases youtube videos (more videos to be added soon)

Project Links

Welcome Tab: http://www.facebook.com/StartupCaffeine
Video Tab: http://www.facebook.com/StartupCaffeine?sk=app_7146470109

]]> http://www.daddydesign.com/wordpress/startup-caffeine-fbml-facebook-design/feed/ 1 http://www.daddydesign.com/wordpress/startup-caffeine-fbml-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/MltMaZhIBjg/ http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-your-iframe-tab/#comments Tue, 21 Jun 2011 19:13:08 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2261 ]]>

Tweet

A common feature of Facebook is the use of being able to ‘Share’ objects whether these objects are videos or links. If you’re anything like us then you like to have full control over what and how you share it, this proved rather difficult until now. In this tutorial we are going to show you, in two easy steps, how to create a custom Facebook ‘Share’ button to use on your Facebook iFrame tab that will allow viewers to share and post your custom content to their Wall. The difference between this ‘Share’ button and the standard ‘Share’ button is that every element (custom message, custom title and custom thumb image) within the share window is completely customizable, giving you total control over what you want to share.

The Code

Step 1: PHP

<?php
$title=urlencode('Title of Your iFrame Tab');
$url=urlencode('http://www.facebook.com/wordpressdesign');
$summary=urlencode('Custom message that summarizes what your tab is about, or just a simple message to tell people to check out your tab.');
$image=urlencode('http://www.yourdomain.com/images/share-thumbnail.jpg');
?>

Each line within the PHP allows you customize every element within the share window. Every bit of coding within the “(‘…‘)” that you see effects those elements. To understand which PHP element affects what, take a look at the screenshot below:

Keep note that the $url section must contain a URL. This directs people to your tab once the share has been published on the poster’s wall. Also, the $image must contain a full URL. If your link to the image is “images/share-thumbnail.jpg”, it will not be read correctly because the share window is coming from Facebook’s server, not yours. As for the size of your thumbnail image ($image), it will automatically be proportionately resized to fit either 100px wide or 100px tall (depending which measurement is larger of the original image). So ideally, you should make your thumbnail 100px X 100px to prevent unwanted resizing.

Step 2: XHTML

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&amp;p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Insert text or an image here.</a>

As you can see, the onClick=”window.open(‘…’);” will create a popup window that contains the ‘Share’ information (see picture above). Do not change this information. The only bits of coding you need to change are the width and the height of the code (if you are not satisfied with the measurements). These measurements define the width and height of the popup window containing the “Share” information.

The other bit of coding you can change is where it says; “Insert text or an image here”. This is where you can insert whatever element you choose to become the link. This can simply be text or a fancy button that you created yourself. The choice is up to you!

Completed Code

<?php
$title=urlencode('Title of Your iFrame Tab');
$url=urlencode('http://www.facebook.com/wordpressdesign');
$summary=urlencode('Custom message that summarizes what your tab is about, or just a simple message to tell people to check out your tab.');
$image=urlencode('http://www.yourdomain.com/images/share-thumbnail.jpg');
?>

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&amp;p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Insert text or an image here.</a>

Demo

You can view the live demo here.
Download the code here.

Please Note

Your iFrame tab must be a PHP file in order for this to work.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible.

]]> http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-your-iframe-tab/feed/ 71 http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-your-iframe-tab/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/o0VsNYLuoQs/ http://www.daddydesign.com/wordpress/walls360-custom-facebook-design/#comments Fri, 10 Jun 2011 17:37:17 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2254 ]]> Company

Walls360

Company Details

WALLS 360 creates amazing wall graphics for artists, designers, photographers, and brands from around the world. Premium Wall Graphics + Interactive Wall Art.

Project Details

This is by far our largest and most advanced custom Iframe facebook design yet! Everything you see on this page is all easily maintainable by the client in the backend of the CMS wordpress. This is also an Iframe reveal tab, when you click the like button inside the page it will reveal the Facebook special. So many features on this page, lets start from top to bottom: Featured slide show that will be changed out for every promotion, facebook special offer with custom slider and easily changeable to single set image, collection shop items, photo gallery of client photos (allows users to add their photos to wall and will be featured in that gallery), Press / Tweets / Blog (click those tabs to toggle each section), testimonials (created backend to allow up to 50 quotes and with a custom color selector) and footer with social network links.

The most impressive part that we are very proud about is the backend wordpress system. We tried our best to make each and every section very easy for Wall360 to maintain.

Project Link

http://www.facebook.com/Walls360

]]> http://www.daddydesign.com/wordpress/walls360-custom-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/walls360-custom-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/XwoVFaDi_xY/ http://www.daddydesign.com/wordpress/how-to-create-a-tell-your-friends-facebook-form/#comments Fri, 10 Jun 2011 17:37:09 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2245 ]]>

Tweet

By popular demand, our Facebook viewers wanted to know how we were able to place the FBML “Tell Your Friend” form on one of our custom Facebook tabs. Now we are here to show you!

The Code

Plain and simple, this is the code that you will need for the form:

FBML

<fb:request-form  method="post" action="http://fb.me/yourpage" type="Friends" invite="false" content="<fb:req-choice url='http://www.facebook.com/yourpage' label='GO' /> " >
<fb:multi-friend-selector actiontext="Tell your friends about your FBML tab!" cols="3" showborder="true"  />
</fb:request-form>

There are three things within you need to change in order to make this form yours.

• action=”http://fb.me/yourpage” – Replace this with the short URL of your fan page.
• url=’http://www.facebook.com/yourpage’ – Replace this with the full URL of your fan page.
• actiontext=”Tell your friends about your FBML tab!” – This is the title that will be shown inside the actual form. Change this to your own personal call out.

That’s it! You should now have the form on your FBML tab. Simple as that! Remember action must be a short URL.

FBML vs. iFrame

As of right now, we are not aware of how to implement this form into iframes. If anyone know how to, please share in our comments below.

]]> http://www.daddydesign.com/wordpress/how-to-create-a-tell-your-friends-facebook-form/feed/ 11 http://www.daddydesign.com/wordpress/how-to-create-a-tell-your-friends-facebook-form/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/LOIg7S3o4PI/ http://www.daddydesign.com/wordpress/educational-training-specialists-facebook-design/#comments Mon, 06 Jun 2011 18:47:54 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2238 ]]> Company

Educational Training Specialists, LLC

Company Details

Educational Training Specialists is your one-stop staff development company, specializing in teacher professional development nationwide, SEI training in Arizona, and consulting to ELL programs. We have over 800 testimonials from your peers – educators love our work! All classes can be taken for continuing graduate credit through Brandman University, too!

Project Details

This is a large facebook iframe design. Some sections in this page include: about, video, recent tweets, recent blog post, contact and much more.

Project Link

http://www.facebook.com/EducationalTrainingSpecialists

]]> http://www.daddydesign.com/wordpress/educational-training-specialists-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/educational-training-specialists-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/P0NRFGgXWwY/ http://www.daddydesign.com/wordpress/mind-body-soul-day-spa-facebook-design/#comments Mon, 06 Jun 2011 18:31:32 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2234 ]]> Company

Mind, Body & Soul Day Spa

Company Details

Prescott Arizona’s Only Eco-Luxury Wellness Spa. Expansive spa menu and state-of-the-art laser and aesthetic medical applications. Luxury services, treatments and gifts for men, women and couples. The wellness of your Mind, Body & Soul is our number one priority!

Project Details

This Iframe design was created from some branding of website. We created a custom CSS gallery. Some other sections include: video, multiple links back to website and more.

Project Link

http://www.facebook.com/mindbodyandsoulspa

]]> http://www.daddydesign.com/wordpress/mind-body-soul-day-spa-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/mind-body-soul-day-spa-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/nkqmVpTZ1XM/ http://www.daddydesign.com/wordpress/saint-michael-church-facebook-design/#comments Tue, 17 May 2011 17:03:36 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2226 ]]> Company

Saint Michael And All Angels Episcopal Church

Company Details

Saint Michael and All Angels delivers the messages of Jesus’ love, compassion, forgiveness, and hope with a contemporary voice that is steeped in the tradition, history, and liturgy of the Episcopal Church.

Project Details

This is our last FBML facebook design that we have created. Page is a multi tab design with videos, Flickr slideshow, links back to website and other tab has the contact form.

Project Link

http://www.facebook.com/SMAADallas

]]> http://www.daddydesign.com/wordpress/saint-michael-church-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/saint-michael-church-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/XO4XM01duKc/ http://www.daddydesign.com/wordpress/sheets-brand-facebook-design/#comments Fri, 29 Apr 2011 03:12:03 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2207 ]]> Company

Sheets™ Brand

Company Details

Sheets™ Brand Energy Strips are the NEW way to do ENERGY! Individually-wrapped, fast dissolving and loaded with B-Vitamins, they are available in 4-packs and 10-packs.

Project Details

2nd Facebook project we have done for Purebrands. We loved creating a custom Facebook page with their fun branding. Using the iframe reveal code (fan gate), this tab has more videos and information show when someone likes the tab. Many videos on this page (one with Lebron James). Check out the css video slider we created.

Project Link

http://www.facebook.com/TakeaSheet

]]> http://www.daddydesign.com/wordpress/sheets-brand-facebook-design/feed/ 2 http://www.daddydesign.com/wordpress/sheets-brand-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/1IthkRUZF64/ http://www.daddydesign.com/wordpress/social-toolbar-wordpress-plugin/#comments Sun, 17 Apr 2011 02:39:28 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2123 ]]> Daddy Design is proud to introduce our 3rd WordPress Plugin, WP Social Toolbar. This highly customizable plugin was created to showcase all of your social networks in one easy toolbar that is both eye-catching and functional.

WP Social Toolbar will display your latest tweet status, list your social networking profiles, and allow users to “Like” your page on Facebook, tweet about it on Twitter and Google +1 your page! With so many options for customization our toolbar will easily adapt to your WordPress theme’s style. Some of the customization options include; specifying colors, changing fonts, and rearranging your list of social network icons to your desired order. Check out some different examples of the WP Social Toolbar with custom combination’s below.

What other WordPress toolbar plugin allows you to do all of these things? We at Daddy Design saw the lack of form and functionality in toolbar plugins and have decided to develop our own. The WP Social Toolbar is ideal for every WordPress website or blog that cares about their social networking. Not convinced yet? Try it out on your blog!

Custom WP Social Toolbar Examples

Color Settings

As you saw above, you can change the colors of the WP Social Toolbar to help match the color spectrum of your site. Using the color wheel, you have the option to change the background color, border color, recent tweet background and social icon hover background. All of this is done through General Settings.

You can also change the color of your icons between black, white and gray for best color contrast.

Social Network Icon Settings

WP Social Toolbar (version 1.1) allows you to showcase 14 of the 24 social network icons that the plugin has to offer. You can also arrange the icons accordingly to your desired preference. This can be done under Social Profiles.

Available Icons: Apple, BeatPort, Bebo, Digg, Dribble, Facebook, Flickr, Foursquare, Hi5, iLike, Last.fm, LinkedIn, Meetup, MySpace, Ning, Orkut, Ping, ReverbNation, RSS, Skype, SoundCloud, Stumbleupon, Tumblr, Twitter, Vimeo, Xing, YouTube.

Recent Tweet Settings

The Recent Tweet Settings allow you to change the font family, color, and size.

Don’t want to display your recent tweet? You can simply turn it off in the Recent Tweet Settings (see above)! Below is an example of the WP Social Toolbar with the recent tweet turned off:

Share Settings

These settings are for the tweet and FB ‘Like’ buttons. There are two available options; always tweet and share your website’s homepage or tweet and share the current page.
NEW. We added Google +1 Share button now!

Display Settings

Another great feature about the WP Social Toolbar is that it does not have to be displayed throughout your entire site. In the Display Settings you are given the option to display it throughout the entire site, just on the home page, just on the archives, just on posts, or just on specific pages.

Version

1.0

• Released

1.1

• Stay closed feature. When user closes the toolbar, it will stay closed forever on full site until clicked open.
• Recent tweet fix. Added new recent tweet code that has less errors reading twitter feeds.
• 2 New social icons added. (Tumblr and Digg)
• Mobile hide. Toolbar is now disabled & hidden on all mobile phone platforms.
• Correct install path issue fixed. Toolbar will work now even if wordpress install was not created in the root of site.

1.2

• Retweet Recent tweet fix. RT now show in the recent tweet status message.
• iPad hide. Toolbar is now disabled & hidden on all iPad platforms.

1.3

• mod_security issue solved.

1.4

• NEW “close” icons.

1.5

• Google +1 Button Added. Settings for it in the backend. SHOW or HIDE. Default is hide.
• 1 New social network icon added (Xing).
• Recent TWEET error issue fixed.

1.6

• 2 New social networks icon added (BeatPort,SoundCloud).
• Share URL issue solved on archive pages.

1.7

• Spotify Icon Added.
• Current Page URL issue solved.

1.8

• Display Settings Bug Solved.
• Twitter Timestamp Option Added.

1.9

• Added Google+ Icon.
• Display Settings Bug Solved.
• Text Shadow Bug Solved.

2.0

• Facebook Fan Page share Option added.
• Icons Added in Admin Options.

2.1

• Email Icon Added.

2.2

• Google+ Button bug Solved.

2.3

• Google+ Button bug Solved.

2.4

• www. removed from twitter link.
• PHP notice’s removed.

WP Social Toolbar Live DEMO

The WP Social Toolbar plugin is currently live on this very page. Just simply look towards the bottom of your browser.

Download the WP Social Toolbar Plugin

Winzip Direct Download

Installation

1. Upload the ‘wp-social-toolbar’ folder to the ‘/wp-content/plugins/’ directory.
2. Activate the plugin through the ‘Plugins’ menu on WordPress.
3. Adjust the custom settings on the WP Toolbar settings page.
4. Insert all of your Social Network links on the “Social Profiles” page.

NOTES

Make sure to have:

<?php wp_footer();?>

just before the closing body tag, usually this would be done in the “footer.php”.
Also make sure to have

<?php wp_head(); ?>

inside the head tags, usually this would be done in the “header.php”. Both of these functions are needed for most plugins to work because like ours, many plugins add javascript and html codes using these two functions.

If Error Reading Twitter Feed
Make sure your twitter account is not privacy protected.
Make sure Twitter is not down.
Reweet’s are having issues right now, we are trying to fix this.

Need Support? Have suggestions?

If you have any problems with this plugin, need help, or have suggestions for improvement, please leave us a comment below and we will respond as soon as possible. We will be adding 5 more icons in the next version so please comment on which ones you would like to see added.

PRO Version??

By popular demand, WP Social Toolbar Pro is in production and will be available soon. Please visit socialtoolbarpro.com to sign up and be notified when it’s available.

]]> http://www.daddydesign.com/wordpress/social-toolbar-wordpress-plugin/feed/ 236 http://www.daddydesign.com/wordpress/social-toolbar-wordpress-plugin/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/Wc4BVfzpDQA/ http://www.daddydesign.com/wordpress/bidhere-custom-iframe-facebook-design-tabs/#comments Sat, 16 Apr 2011 02:28:11 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2158 ]]> Company

BidHere

Company Details

BidHere is a unique online penny auction experience where brand new electronics, jewelery, watches and accessories fall under the auction hammer everyday and sell for prices that can only be described as totally insane.

Project Details

BidHere hired us to design two custom iframe facebook tabs. 1st tab is the ‘welcome tab’, which consist of instructions on how to use the website, video, auction examples and more. 2nd tab consist of the Sweepstakes sign up form to win a FREE iPad 2.

Project Links

Welcome Tab: http://www.facebook.com/BidHereAuctions
Sweepstakes Tab: http://www.facebook.com/BidHereAuctions?sk=app_212980102047974

]]> http://www.daddydesign.com/wordpress/bidhere-custom-iframe-facebook-design-tabs/feed/ 0 http://www.daddydesign.com/wordpress/bidhere-custom-iframe-facebook-design-tabs/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/Sd1tDGFxYUc/ http://www.daddydesign.com/wordpress/streets-canvas-wordpress-design/#comments Wed, 23 Mar 2011 00:12:38 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2120 ]]> Company

Streets & Canvas

Company Details

Streets & Canvas brings the most unique talents and artists loyal to game, best equipped to be a voice, pulse, and luminary of the urban landscape. Streets & Canvas represents for true fans worldwide, and unifies worldwide street art culture including art, fashion, music, and the entire urban aesthetic. Streets & Canvas hand-picks each artist we select to partner.

Project Details

This was a very fun & advanced custom wordpress site to design. Lots of cool features and pages included in this site: Artist personal pages (with their own flickr, twitter, video and news feeds), contact page, blog (check out the blog layout) and we designed the big cartel store to match identical design as the wordpress site (store is down right now).

Project Link

http://www.streetsandcanvas.com

]]> http://www.daddydesign.com/wordpress/streets-canvas-wordpress-design/feed/ 0 http://www.daddydesign.com/wordpress/streets-canvas-wordpress-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/m1_KkvntiI8/ http://www.daddydesign.com/wordpress/dignity-movement-community-facebook-design/#comments Tue, 22 Mar 2011 23:57:35 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2116 ]]> Community

Dignity Movement

Community Details

Home of the pro-dignity, anti-rankism movement.

Project Details

We went with an edgy cool design for this FBML facebook design page. Also styled the FBML Comments Plugin.

Project Link

http://www.facebook.com/pages/Dignity-Movement/211179245574493

]]> http://www.daddydesign.com/wordpress/dignity-movement-community-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/dignity-movement-community-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/153w7RCpkOA/ http://www.daddydesign.com/wordpress/the-bay-citizen-facebook-and-wordpress-design/#comments Tue, 22 Mar 2011 02:09:49 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2112 ]]> Company

The Bay Citizen (Citizen of Tomorrow)

Company Details

The Bay Citizen, Citizen of Tomorrow Award. Are you a Citizen of Tomorrow? Apply now for your chance to win $5000, media coverage for your cause, and invitations to our award ceremony.

Project Details

This is a 2 part project. We have just finished the 1st part, which consist of Logo & branding, a custom facebook design which gives the overall brief of the Citizen of Tomorrow, which then links to the wordpress site we designed. The wordpress site has a few pages with details, rules and the Entry form (created using cforms), then the wordpress site was imported into an iFrame on the Bay Citizen main site. Check back next month to see stage 2.

Project Links

FACEBOOK: http://www.facebook.com/baycitizen
FACEBOOK Vote Tab: http://www.facebook.com/baycitizen?sk=app_202502076449928
WORDPRESS: http://www.baycitizen.org/citizenoftomorrow/

]]> http://www.daddydesign.com/wordpress/the-bay-citizen-facebook-and-wordpress-design/feed/ 0 http://www.daddydesign.com/wordpress/the-bay-citizen-facebook-and-wordpress-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/JpD1jgSUA6Y/ http://www.daddydesign.com/wordpress/uncommon-knowledge-facebook-design/#comments Tue, 22 Mar 2011 01:36:30 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2109 ]]> Company

Uncommon Knowledge

Company Details

Uncommon Knowledge is a show which brings in interesting people to discuss the most pressing issues of our day.

Project Details

We went with a very clean simple design for this facebook page. The main section of this page showcasing Uncommon Knowledge’s guest books, with a buy now and video button link

Project Link

http://www.facebook.com/UncKnowledge

]]> http://www.daddydesign.com/wordpress/uncommon-knowledge-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/uncommon-knowledge-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/3yPWAqC7AAE/ http://www.daddydesign.com/wordpress/osmoz-custom-facebook-design/#comments Tue, 15 Mar 2011 18:17:27 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2103 ]]> Company

OsMoz

Company Details

A global community of scent lovers. This page is managed out of osMoz NYC by Jake. When time permits we look to post things of interest that POP. Let us know what you think! Its always more fun to talk with someone other than yourself.

Project Details

We added tons of cool features to this custom facebook design including a blog news feed, iPhone app details section, an embedded LIVE video feed from their Stickam press conference, FBML like button, link to online store and much more.

Project Link

http://www.facebook.com/fragrance.community

]]> http://www.daddydesign.com/wordpress/osmoz-custom-facebook-design/feed/ 0 http://www.daddydesign.com/wordpress/osmoz-custom-facebook-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/LvKH8Gc3aDM/ http://www.daddydesign.com/wordpress/voli-vodka-facebook-and-mobile-web-page-design/#comments Tue, 15 Mar 2011 01:02:55 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2097 ]]> Company

VOLI SPIRITS

Company Details

Voli light vodkas is proud to offer the first and only line of super premium low calorie spirits in the most delicious variety of unique natural flavors. Voli light vodkas are up to to 40% less calories than comparable leading brands. Voli is produced and bottled in Cognac, France, using superior French wheat, pure spring water, and natural flavors. Pitbull is official spokesperson and ambassador of Voli Vodka.

Project Details

We were hired to design two projects for Voli. 1st project was a facebook design, Voli supplied the artwork and we coded the page. 2nd project was a first for Daddy Design, we designed custom mobile web pages for all 5 Voli Light Vodka flavors. See below but make sure to view them on a smart phone.

Facebook Link

MAIN: http://www.facebook.com/volispirits
STAY SEXY CONTEST: http://www.facebook.com/volispirits?sk=app_218286138195530

Mobile Web Link

http://www.volispirits.com/mobile/Flavors-Lyte/
(Click bottom links to view all flavor pages)

]]> http://www.daddydesign.com/wordpress/voli-vodka-facebook-and-mobile-web-page-design/feed/ 0 http://www.daddydesign.com/wordpress/voli-vodka-facebook-and-mobile-web-page-design/ http://feedproxy.google.com/~r/TheOfficialPageOf/~3/PezRYVRVZGI/ http://www.daddydesign.com/wordpress/the-facebook-design-contest-winner/#comments Tue, 01 Mar 2011 01:46:48 +0000 daddydesign http://www.daddydesign.com/wordpress/?p=2085 ]]> Congratulations to the Grand prize winner of our Social Media Giveaway Contest. Tyler Kneisel, owner of Little Malibu House. Nestled atop the lush hills in the tropical haven of Rincon, Puerto Rico, the Little Malibu House is a luxury vacation residence offering an unparalleled mix of modern comforts in one of the Caribbean’s coolest little surf towns.

We went with a very photo heavy FBML Facebook Design. While using our very own custom FBML Slideshow coding.

Check out the design here.

The twitter design winner will be showcased next week!

]]> http://www.daddydesign.com/wordpress/the-facebook-design-contest-winner/feed/ 0 http://www.daddydesign.com/wordpress/the-facebook-design-contest-winner/