The Paradise Fund

Company Details

The Paradise Fund is a grass-roots movement, carried throughout the country by a dedicated and ambitious group of students and young professionals. Beginning with the creation of the Paradise Ball, an event aimed at bringing together the new generation of young professionals in support of children suffering from illness, ravaged by war or living on the streets of our local community, The Paradise Fund’s goal has been to gather the community in order to educate our generation of the ongoing political, environmental, and social problems being faced by people around the world today.

Project Details

It was fun to design a wordpress theme for a non profit organization. We went with a clean design and good use of large images for the top of every page. Site also has a custom events page to display all their current and future events. Easy to navigate wordpress site and prominent donate button.

Project Link

http://www.theparadisefund.com/

Radio Bar

Company Details

Radio Bar is the newest addition to the rapid bar trend in Miami. Using the back door as an entrance (where the radio tower is stationed), Radio’s ambiance is refreshingly unique, offering a friendly spot to enjoy a craft cocktail while dancing to eclectic tunes. Radio’s cocktail menu is curated by Craig Schoettler, Beverage Director of Menin Hotels. “The new beverage program compliments the inviting atmosphere whereas one would feel just as comfortable in flip flops or a business suit when sipping on a great rum or bourbon,” said Schoettler.”

Project Details

Another project we were hired to do by Menin Hotels. This is based on the same custom WordPress theme we’ve used on other Menin bar websites such as Drumbar and PizzaBar.

Project Link

http://radiosouthbeach.com/

Wacom

Company Details

The Wacom Community was built for you. It’s a place to learn more about how to use Wacom products and how you can get the most from creative software and apps, as well as see our line-up of on-demand training and webinars.

Project Details

Wacom hired us to customize and make changes to a purchased theme named gridspace. Wacom supplied the style psd’s. We also installed a few cool plugins such as breadcrumbs, gigya and a very good language translate plugin named Polylang.

Project Link

http://community.wacom.com/

Glide SUP

Company Details

Glide was founded BY river paddlers FOR river paddlers. As SUP moved inland, it was clear that ocean boards couldn’t handle the rigors of running the whitewater rivers that Glide considered home. We strive every day to bring inland paddling to the next level.

Project Details

For our latest Responsive design, we went with a very fun and edgy look for a fun product. Very photo heavy site. Uses our custom responsive photo gallery. Created a unique blog in layout and the way it functions. This wordpress site looks great on your computer, tablet and smart phone!

Project Link

http://glidesup.com

Market Lincoln Lane

Company Details

The City of Miami Beach has proposed a development RFP that should ideally enhance, reinforce the vibrancy of Lincoln Road; improve connectivity, enhance/create a public amenity; and include retail or other commercial uses, with appropriate parking. Lincoln Lane developers have listened to the city and are proposing to accomplish those goals while delivering the best economic return to Miami Beach. Lincoln Lane’s economic engine stems from the hotel component which diversifies Lincoln Road’s economy by bringing the only Hotel to the area. The Hotel patrons combined with increased parking will bolster and strengthen the economic activity of Lincoln Road and Miami Beach. In addition affordable rental rates will give small, local businesses the support to build their brands.

Project Details

Our latest WordPress responsive development. We created a very clean minimalist design that’s suppose to be mostly informational. Home page video opens up in a lightbox. We inserted our custom responsive photo gallery on the Gallery page

Project Link

http://marketlincolnlane.com/

Dierberg & Star Lane Winery

Company Details

Come and taste the flight of Dierberg & Star Lane Wines! Dierberg focuses more on our cool climate Burgundian varietals while Star Lane focuses on their warm climate Bordeaux. You can also bring a picnic, get a bottle and enjoy our lovely views of Santa Rita Hills!

Project Details

This project was for 2 separate WordPress wine sites. Both are responsive designs and both are using basically the same wordpress custom theme but with the colors altered. For the home page, we did a nice background slideshow with menu at bottom, for the inside pages the menu goes to the top and sub menu on the left. Each inside page has it’s own slideshow. Check out the sites on your computer, iPad and mobile phone!

Project Links

http://dierbergvineyard.com
http://http://starlanevineyard.com

Gale Hotel South Beach

Company Details

Gale and Regent South Beach originally built in 1941 by Miami architect L. Murray Dixon, the historic property is located in the heart of South Beach, on the Southwest corner of 17th Street and Collins Avenue. opening December 2012!

Project Details

This is our most advanced responsive wordpress site that we’ve created. The home page has a very cool jquery responsive effect, which allows you to scroll through the page or click on the navigation arrows on the right side. The top section of the whole site has the Gale Hotel booking engine. The “rooms” page allows the user to choose their room type then gets deeper into each room. If you look around the site you will notice all the images are in pure css diamonds, no images or hacks were used to create this effect. This brings us to our favorite part of the site, please make sure to check out the “photos” page. On this page when you do the responsive, the diamonds will scale and arrange into a different column number and then when you click on the image it opens up our custom responsive photo gallery (plugin coming soon!). Also, each main page also consists of these small galleries. There’s many other things to go over but we will let you see for yourself.

Project Link

http://galehotel.com

This plugin is not a new idea but rather an improvement on what current plugins are lacking. WP Page Extension, unlike other plugins, allows you to change the extension on individual pages rather than a universal change to all pages. This allows greater flexibility with merging your old content into WordPress and doesn’t lock your new content into the old format. Another great benefit of our plugin is the amount of extensions available, included are the most commonly used extensions (.html, .htm, .php, .xml, and .asp).

PLEASE NOTE:

• This plugin will not actually convert your code or pages into real HTML or ASP, it will only add an extension to the end of your URL.
• This plugin will only add extensions to the end of your pages and NOT your posts.
• This plugin will not work with the default WordPress permalink setting; you must change it to one of the other options. If you do not know anything about WordPress permalinks, click here to learn more.

Version

1.0 *Released

Demo

Click Here to View a Live Demo on our Server (.htm page)

Screenshots

Download the WP Page Extension Plugin

Download or Install Directly via the WordPress Plugin Directory Winzip Direct Download

Installation

1. Upload the ‘wp-page-extension’ folder to the ‘/wp-content/plugins/’ directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.

Need Support?

If you have any problems with this plugin or need help, please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this plugin, only comments will be responded to.

Shelborne South Beach Hotel

Company Details

Shelborne South Beach oceanfront property has hosted countless weddings and social events, but never one quite like yours. They offer many options covering everything from the hors d’oeuvres at your rehearsal dinner to the extravagant wedding cake at your reception.

Project Details

This was our first full responsive website design. This slick and very advanced site was developed in wordpress. One of the hardest sections coding in this site was getting the homepage full screen slideshow to work with the responsiveness. Site has many pages including the Gallery page, which has a Daddy Design custom coded responsive photo and video gallery.

Project Link

http://shelbornesocialevents.com

Connor O’Mahony’s Database Diary (IBM)

Company Details

Program Director for Database Software at IBM
These blog posts are his opinions and do not necessarily represent IBM’s positions, strategies, or opinions.

Project Details

Developed in WordPress, this was our first ever full responsive design. This was a great learning project for us as we plan on creating many more responsive sites in the future. We went with a clean minimalist design and sidebar has accordion style menus. Logo branding was also designed by us.

Project Link

Site is not long live

GUYandGIRL (Menin Hotels)

Company Details

GUYandGIRL Boutique provides contemporary resort-wear for the style savvy customer in a fun, fashion forward, innovative type of way. Located in the heart of beautiful Miami Beach, Florida we have successfully established ourselves by working with designers from around the globe to create unique pieces with effortless style.

Project Details

Menin Hotels hired us for another development project. This custom site was built in 2 different CMS. The home page and blog are all created in WordPress and the Eccomerce store is built in Big Commerce. We made sure to style both parts to look identical so when you go from one to the other you wont even tell they are different platforms.

Project Link

http://shopguyandgirl.com/

Sennheiser

Company Details

Sennheiser Aviation first started Live Your Dream as a small scholarship competition in 2011. Fueled by the overwhelming level of participation and the quality of submissions we quickly realized that Live Your Dream is here to stay. In fact, it was time to turn it into something bigger. When they took the idea of a broader scholarship program to some of their friends and partners in the aviation community, they received nothing but positive feedback and new ideas.

Project Details

We were hired from our colleague Matt (AMR Network) to design the branding, logo and website photoshop layout for the Sennheiser Live Your Dream project. We came up with a fun design using planes. Matt then took our designs and developed the website in a custom CMS.

Project Link

http://www.sennheiser-liveyourdream.com/

In previous tutorials we have explained different tips and tricks to help blend different social media widgets with your website so that they look and feel like a part of it and not just dropped in. In this tutorial, we will teach you how to style one of the newest social widgets on the block, the Google+ badge. After completing this tutorial you should be able to play around with the code and make modifications that you see fit to change the styling to your own needs.

*Please Note: Since the Google+ badge’s main styling is inside the actual iFrame, there is very little custom modification that can be achieved. Full customization of the widget is currently not possible. If you know of any other methods of styling the Google+ badge please let us know in the comments.

Step 1: Setting Up Your Google+ Badge Widget

First things first, you need to get the code for your Google+ badge from Google. Click here to get your widget code, or copy and modify the code below.

Place this code where you want the badge to render (we will modify this later in the tutorial):

<div class="g-plus" data-width="300" data-height="131" data-theme="light" data-href="{URL TO YOUR GOOGLE+ PAGE}?rel=publisher"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

*Remember to replace ‘{URL TO YOUR GOOGLE+ PAGE}’ with the URL to your Google+ page.

Your Google+ badge should now look this (Go ahead and follow us):

Step 2: Wrapping the Google+ Badge Code

The next step is to wrap the actual Google+ badge widget code. We will be using a combination of a container DIV and a SPAN tag; by utilizing this combo we will have greater control over different customization options.

<div id="googleplus_widget">
  <span>
    <div class="g-plus" data-width="300" data-height="131" data-theme="light" data-href="{URL TO YOUR GOOGLE+ PAGE}?rel=publisher"></div>
    <script type="text/javascript">
	  (function() {
		  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		  po.src = 'https://apis.google.com/js/plusone.js';
		  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	  })();
    </script>
  </span>
</div>

Step 3: Hiding the Google+ Badge’s Default Border

In this step we are going to hide the Google+ badge’s default border by using some CSS tricks. For some of you, this end result may be the final solution for your styling needs. For others, you may want further customization, which will be covered in the next and final step.

#googleplus_widget{
	width: 298px;
	height: 116px; 
	float: left; 
}
#googleplus_widget span{
	width: 298px;
	height: 116px;
	float: left;
	overflow: hidden;
	background: #fff; 
}
#googleplus_widget span div{
	margin: -1px 0 0 -1px !important;
	position: relative; 
}

In order to hide the borders, you will need to know the actual size of the bordered content (the height of the border content is shorter than the actual height of the widget). If you plan on using a different size widget rather than the default size we are using in this tutorial, you need to measure the actual pixel size of the bordered content.

For this tutorial, the default widget size is 300 x 131 but the actual bordered content size is 300 x 131. So, in order to remove the 1px border, we set both our main container DIV and SPAN tag to 298 x 116. We also set the SPAN tag to overflow hidden so that nothing outside of 298 x 116 will be visible and gave it a background color of white (*optional – just looks better while widget is loading). The most crucial part of this trick is to reposition the widgets main DIV by moving it -1px to the top and -1px to the left, this will move the borders out of visible view.

If you followed all of the steps correctly so far, your Google+ badge should now look this:

Step 4: Adding Custom Style to the Google+ Badge

Now that we have hidden the widget’s default border we can choose to either leave it borderless or add our own custom border that matches the look and feel of our website. In this final step, we will show you how to add a custom border.

Going back to the CSS code from Step 3, we will simply add a border to the container DIV which we used to wrap our SPAN tag and widget code.

#googleplus_widget{
	width: 298px;
	height: 116px; 
	float: left; 
	border: 10px solid #ddd; 
}

Of course, adding a solid border is only one option as there are many different ways that you can now style the outer container. Another option could be to add padding and use a custom background image to achieve a more stylish border for your widget. Since we set up the combination of wrapping DIV and SPAN tags you now have greater control over the outer DIV while leaving the inner SPAN tag alone so that it will always hide the widget’s borders.

Your final Google+ badge should now look this:

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.

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

NOT LIVE ANYMORE

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>

Demo

Click Here to view one of our pages in action.

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/ 22 http://www.daddydesign.com/wordpress/how-to-set-up-a-facebook-application-for-your-custom-iframe-tab/ http://feedproxy.google.com/~r/daddydesign/~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/daddydesign/~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/daddydesign/~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;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;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/ 115 http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-your-iframe-tab/ http://feedproxy.google.com/~r/daddydesign/~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/daddydesign/~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/