A Basic facebook fanpage template


facebookSometimes you may need to make a page tab for your facebook fan page. If you need fanpage tab, you can easily add static fbml application in your fan page and customize the page using some xfbml tags and basic html/css/js. Here I provided a basic fanpage template. You can customize and use this code for your fanpage easily.

Features:
1. Easy CSS and HTML
2. One simple javascript function to show the invite box
3. Share Button
4. Fan and non fan detection code.
5. You can show special information only for fan, so this inspires user to be fan of your page.

But please remember, you’ve to fully customize the code for your purpose. I’ve just provided some functional code that you can easily use for your purpose. And to check fan detection code, you must have to check as non-admin of the page.

*** First checkout the fanpage demo
*** Now download the full code and follow the readme file.

Template Code:

<!--
    @file: Facebook Fan Page Template
    @author: Md. Mahmud Ahsan (http://thinkdiff.net)
-->

<style type="text/css">
    .header_1{
        float: left;
    }
    .header_2{
        float: left;
    }
    .clear{
        clear:both;
    }

    .nonfan{
        height: 1240px;
    }

    .fan{
        position: absolute;
        top:2px;
        left:0px;
        width:100%;
        background-color:white;
    }
    .comment{
        max-height: 300px;
        width: 400px;
        overflow: auto;
    }
</style>

<script type="text/javascript">
    function showInvite(){
        document.getElementById('invite_box').setStyle('display', 'block');
        document.getElementById('binvite').setStyle('display', 'none');
    }
</script>

<!-- start non-fan part -->
<div class="nonfan">
    <div class="header_1">
        <img src="http://ithinkdiff.net/images/heading.jpg" alt="Fanpage Template" />
        <br />
        <br />
        <!-- Change this description -->
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).s
    </div>
    <div class="header_2">
        <br />
        <h2 style="color:red">Become Fan by clicking above LIKE button</h2>
        And see the full page and special information for you.
    </div>
    <div class="clear"></div>
</div>
<!-- end non-fan part -->

<!-- start Fan Part only those users who like the page will see the below information -->
<fb:fbml version="1.1">
    <fb:visible-to-connection>
        <div class="fan">
            <img src="http://ithinkdiff.net/images/heading.jpg" alt="Fanpage Template" />
            <br />
            <br />
            <!-- Change this description -->
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).s

            <br />
            <br />
            <!-- special information if you like to show your fans of your page -->
            <h3>Special Information Only For Fan</h3>
            <ul>
                <li>You can access <a href="#">Special Promotion</a></li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                <li>more...</li>
            </ul>
            <fb:share-button class="meta" type="Fanpage_Template">
                <meta name="medium" content="fanpage"/>
                <meta name="title" content="Fanpage Template"/>
                <meta name="description" content="It is a long established fact that a reader will be distracted by the readable content..."/>
                <link rel="image_src" href="http://ithinkdiff.net/images/heading.jpg"/>
                <link rel="target_url" href="http://www.facebook.com/thinkdiff.net?v=app_10442206389"/>
            </fb:share-button>
            <br />
            <br />

            <a id="binvite" href="#" onclick="showInvite(); return false;">Invite Your Friends</a>
            <!-- Facebook Invite Box Part Start-->
            <div class="invite" id="invite_box" style="display:none">
                <fb:fbml>
                    <fb:request-form
                        action="http://www.facebook.com/thinkdiff.net?v=app_10442206389"
                        method="POST"
                        invite="true"
                        type="Fanpage Template"
                        content="I like this Fanpage Template and sharing with you. <fb:req-choice url='http://www.facebook.com/thinkdiff.net?v=app_10442206389' label='Accept' />"
                        >

                        <fb:multi-friend-selector
                            showborder="false"
                            actiontext="Invite your friends to join on Fanpage Template">
                    </fb:request-form>
                </fb:fbml>
            </div>
            <!-- Facebook Invite Box Part End -->
        </div>
    </fb:visible-to-connection>

Read Me File:

Template.html contains all the code needs to build your facebook fan page template.

Features:
    1. Easy CSS and HTML
    2. One simple javascript function to show the invite box
    3. Share Button
    4. Fan and non fan detection code.
    5. You can show special information only for fan, so this inspires user to be fan of your page.

How to install:
    1. First visit http://thinkdiff.net/facebook/customize-facebook-fan-page-by-static-fbml-app/ and learn how to use static_fbml app.
    2. Then just copy paste the above code and save in the static fbml app.
    3. Then visit the tab you created in your fan page.
    4. You can easily modify the html/css code in template.html to make nice outlook of your fan page.
    5. In this code you'll find
       1. Share Button
       2. Invite Box to invite facebook friends.

    6. In code look the comments carefully <!-- start non-fan part --> and <!-- start Fan Part only those users who like the page will see the below information -->
    7. So if you want some normal information to show your facebook user add/modify code within <div class="nonfan">
    8. If you want to show special information only for fans of your page then add/modify code within <div class="fan">

Notes:
    1. Update all urls "http://www.facebook.com/thinkdiff.net?v=app_10442206389" and paste your facebook fan page url
    2. Update all text "Fanpage Template" with your fan page name.

Reference:
    1. http://thinkdiff.net/facebook/how-to-detect-fan-of-a-facebook-page/
    2. http://wiki.developers.facebook.com/index.php/Fb:share-button

Hope this article will help you to make useful fanpage.

mahmud ahsan

Love computer programming and write occasional blog post. In my early career I worked mostly on web based application and since 2011, I exclusively working on iPhone and android applications. I work at home, father of a nice kid and husband of a beautiful wife. [My Business | Twitter | Linkedin]

You may also like

24 Comments

  • moe
    July 31, 2010 at 11:58 am

    thanks so so much it is really prettey and clear,

    but can i replace the invite text with customized image ?

    • mahmud ahsan
      mahmud ahsan
      July 31, 2010 at 12:14 pm

      No, you can’t add images in the invited message.

  • Andrew M
    August 10, 2010 at 10:52 pm

    Thank you for sharing your knowledge. One question on FBML applications that live in tabs (as the demo does) – is there anyway to call the Javascript SDK? I have a tab page where I want to run a Flash movie, and have the Flash movie call stream.share and stream.publish. But as far as I can tell you cannot use the SDK in an FBML page? Thank you

    • mahmud ahsan
      mahmud ahsan
      August 11, 2010 at 10:44 am

      Yeah, I think you could include jSSDK and accomplish some more tasks.

  • Aaron
    August 30, 2010 at 11:34 am

    Hi! Thanks for the great post! I am so into social media right now, especially Facebook marketing and furthermore, FBML. I love reading and learning all the stuff I can about these things. If you are interested, I found a great place to learn and be apart of a great community for social media. – It’s http://www.facebook.com/fanpagefactory take a look, I think you will enjoy it like I am.

    Thanks again! Have a good one.
    Aaron

  • Geetha
    August 30, 2010 at 4:39 pm

    Thanks for the solutions.
    But I have basic requirement.

    Your example displays an “Invite Friends” link when the user is fan of the page. On clicking the link, Invite Friends facebook widget is displayed.

    But my requirement is, if the user is fan of the page, the Invite friends widget should be displayed directly.

    From your code, I just tried removing the display style in the invite friend div. But the invite friend widget gets displayed even for a non-fan users.

    Please advise on how to make this happen..

  • Jayson Hagenbrok
    August 31, 2010 at 5:00 am

    Tired of getting low amounts of useless visitors for your website? Well i wish to tell you about a fresh underground tactic that makes myself $900 each day on 100% AUTOPILOT. I possibly could be here all day and going into detail but why dont you merely check their site out? There is a excellent video that explains everything. So if your seriously interested in producing simple money this is the site for you. Auto Traffic Avalanche

  • JKellie
    September 10, 2010 at 12:28 am

    I’ve been looking forever and a day to find someone who can help me figure out how to do something like ‘pages.isFan’ to use in the invite box. I’d like the people in their friends list who are already fans of the page to be grayed out like it works in the “suggest to friends” link below the page profile photo. Can anyone help?

  • Jangla
    November 1, 2010 at 5:55 pm

    doesn’t seem to work on canvas apps – is there an alternative way to do this on canvas pages?

  • Jangla
    November 1, 2010 at 5:56 pm

    Oops – your site stripped the first part of my post! It should read:

    fb:visible-to-connection doesn’t seem to work on canvas apps – is there an alternative way to do this on canvas pages?

  • Hettie Lenord
    November 7, 2010 at 4:24 am

    Facebook Profile Themes

  • Dennis
    November 19, 2010 at 3:14 pm

    wondering why after I add the static fbml, I cannot customize my tab. where is that. I think fb has changed right now.

    any idea?

  • Freda Mawson
    December 11, 2010 at 12:22 am

    I admire the beneficial details you give inside your articles. I will bookmark your weblog and have my kids check up here often. I’m fairly confident they are going to discover plenty of new stuff here than anybody else!

  • Fix RRoD
    February 22, 2011 at 2:09 pm

    Thankyou very much, i’ve been looking for some way of a fan page template like this, much appreciated! 🙂

  • Juicy
    March 1, 2011 at 6:18 pm

    Any plans to make iframe version about this fan/non-fan tab?

  • Final Fantasy XIV Gil
    April 11, 2011 at 2:09 pm

    award winning! I have to leave a piece of words here!

  • Annelle Queros
    August 1, 2011 at 7:18 pm

    Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a little bit, but instead of that, this is excellent website. A fantastic read. I’ll certainly be back… Annelle Queros

  • FabyHolaGD
    August 31, 2012 at 5:35 am

    I paste all the code inside the facebook app, but nothing appears. Why? I see for you it doesnt work either. In your link http://www.facebook.com/thinkdiff.net?v=app_10442206389&ref=sgm It’s the same thing here. Nothing appears.

  • architects
    February 25, 2013 at 2:11 am

    Excellent site you have here but I was wanting to know if you knew
    of any community forums that cover the same topics discussed here?

    I’d really like to be a part of group where I can get suggestions from other experienced people that share the same interest. If you have any recommendations, please let me know. Cheers!

  • Trevor
    May 3, 2013 at 6:46 am

    advertising

  • bean extract
    May 13, 2013 at 5:53 am

    Hello there! Do you know if they make any plugins to help with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Cheers!

  • orquesta san vicente
    October 18, 2013 at 6:43 pm

    Hi! This is my 1st comment here so I just wanted to give a quick shout out andd say
    I truly enjoy readong your blog posts. Can you suggest any other blogs/websites/forums that deal with
    the same subjects? Thank you!

Comments are closed here.

About Me

Hi I am Mahmud Ahsan. I Love computer programming and write occasional blog post. In my early career I worked mostly on web based application and since 2011, I exclusively working on iPhone and android applications. I work at home, father of a nice kid and husband of a beautiful wife. [My Business | Twitter | Linkedin]

Twitter Feed

Fanpage