Facebook

Since the introduction of the ‘Like’ button the use of Facebook pages by companies, brands, etc. has increased immensely. Facebook has a limit on amount of friends one can have and if you surpase that amount you need to to switch your account to a page. With pages you can add your personal design inside the Facebook frame. A websites within a website if you will.

I listed a couple of brands, music stars and other companies who make good use of the Facebook page. My favorite one of the list is Dell. Nice design and pretty interactive. These pages can give you an idea what all is possible with Facebook Pages.

The next list contains a couple of tutorials to help you grasp how to adjust your Facebook page. I was taken aback how few tutorials there are out there considering how popular Facebook Pages are. Not only with big names but they are also used by schools, sport clubs, small bands, etc.

I selected the most recent one, although there aren’t any updated ones since Facebook changed their pages layout. Hopefully though these tutorials will help you along.

Facebook Fan Page Design Inspirations

Cranium

Starbucks

Lenny Kravitz

Dell

NFL

Adobe

CNN

KLM

Nike Football

Facebook Fan Page Creation Tutorials

A Facebook Fan Page Tutorial

Video tutorials

Facebook fanpage static fbml code and tutorial

FBML code example

Facebook Fan Page Photos Tutorial

Also shows how to take full profit of Facebook’s new way to display profile photos.

How to Create Custom Facebook Pages

A ten step tutorial with text and videos.

Video Tutorial on New Facebook Fan Page Layout

Learn what’s new in the Facebook fan page layout. A video and a text summary of the highlights.

Blog visitors don’t always want to leave comments- which explains why the Facebook “Like” button has become so popular. Who needs to type? By simply clicking a little thumbs-up button, you not only announce to the world that you appreciate something, you get to track it on your Facebook account and share it with all your friends.

For WordPress users, adding a Like button to your existing blog is as simple as installing and activating one of the available plug-ins. For WordPress theme authors, here’s how to integrate Like buttons into your theme:

[php]<section id="text-3" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US"></script><div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId: "100162493345", xfbml: true }); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script> <fb:fan profile_id="100162493345" stream="0" connections="10" logobar="0" width="300"></fb:fan></div> </div></section> <section id="featured-post-5" class="widget featured-content featuredpost"><div class="widget-wrap"><h4 class="widget-title widgettitle">Code & Tutorials</h4> <article class="post-11033 post type-post status-publish format-standard has-post-thumbnail category-code category-general tag-development-languages tag-front-end-development-languages tag-mobile-friendly-sites tag-programming-language tag-web-developer tag-web-development entry"><a href="https://devlounge.net/front-end-development-languages-will-grow-2017/" class="alignleft" aria-hidden="true" tabindex="-1"><img width="100" height="100" src="https://www.devlounge.net/wp-content/uploads/2017/05/pexels-photo-100x100.jpg" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://www.devlounge.net/wp-content/uploads/2017/05/pexels-photo-100x100.jpg 100w, http://www.devlounge.net/wp-content/uploads/2017/05/pexels-photo-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" /></a><header class="entry-header"><h2 class="entry-title" itemprop="headline"><a href="https://devlounge.net/front-end-development-languages-will-grow-2017/">Which Front-End Development Languages Will Grow in 2017?</a></h2></header></article><article class="post-10907 post type-post status-publish format-standard has-post-thumbnail category-code tag-apis entry"><a href="https://devlounge.net/guide-leveraging-apis-developer/" class="alignleft" aria-hidden="true" tabindex="-1"><img width="100" height="100" src="https://www.devlounge.net/wp-content/uploads/2016/11/nrpLiSINthw-100x100.png" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://www.devlounge.net/wp-content/uploads/2016/11/nrpLiSINthw-100x100.png 100w, http://www.devlounge.net/wp-content/uploads/2016/11/nrpLiSINthw-150x150.png 150w" sizes="(max-width: 100px) 100vw, 100px" /></a><header class="entry-header"><h2 class="entry-title" itemprop="headline"><a href="https://devlounge.net/guide-leveraging-apis-developer/">Your Guide to Leveraging APIs as a Developer</a></h2></header></article><article class="post-10732 post type-post status-publish format-standard category-code tag-bitcoin entry"><a href="https://devlounge.net/website-integration-bitcoin-processing/" class="alignleft" aria-hidden="true" tabindex="-1"><img width="100" height="100" src="https://www.devlounge.net/wp-content/uploads/2016/05/2-100x100.jpg" class="entry-image attachment-post" alt="" itemprop="image" /></a><header class="entry-header"><h2 class="entry-title" itemprop="headline"><a href="https://devlounge.net/website-integration-bitcoin-processing/">Bitcoin Processing Website Integration For Web Developers</a></h2></header></article><article class="post-10614 post type-post status-publish format-standard has-post-thumbnail category-code tag-website-security entry"><a href="https://devlounge.net/website-security-2016/" class="alignleft" aria-hidden="true" tabindex="-1"><img width="100" height="100" src="https://www.devlounge.net/wp-content/uploads/2016/03/web-code-100x100.jpg" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://www.devlounge.net/wp-content/uploads/2016/03/web-code-100x100.jpg 100w, http://www.devlounge.net/wp-content/uploads/2016/03/web-code-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" /></a><header class="entry-header"><h2 class="entry-title" itemprop="headline"><a href="https://devlounge.net/website-security-2016/">Website Security For 2016 That All Developers Need To Know</a></h2></header></article><article class="post-10565 post type-post status-publish format-standard category-code tag-html tag-javascript tag-jquery tag-scripting entry"><a href="https://devlounge.net/5-reasons-you-need-to-be-using-jquery/" class="alignleft" aria-hidden="true" tabindex="-1"><img width="100" height="100" src="https://www.devlounge.net/wp-content/uploads/2016/02/jQuery-100x100.gif" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://www.devlounge.net/wp-content/uploads/2016/02/jQuery-100x100.gif 100w, http://www.devlounge.net/wp-content/uploads/2016/02/jQuery-150x150.gif 150w, http://www.devlounge.net/wp-content/uploads/2016/02/jQuery-300x300.gif 300w, http://www.devlounge.net/wp-content/uploads/2016/02/jQuery-640x640.gif 640w" sizes="(max-width: 100px) 100vw, 100px" /></a><header class="entry-header"><h2 class="entry-title" itemprop="headline"><a href="https://devlounge.net/5-reasons-you-need-to-be-using-jquery/">5 Reasons You Need to Be Using jQuery</a></h2></header></article></div></section> <section id="text-5" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </div></section> </aside></div></div><div class="footer-widgets"><div class="wrap"><div class="widget-area footer-widgets-1 footer-widget-area"><section id="text-6" class="widget widget_text"><div class="widget-wrap"><h4 class="widget-title widgettitle">About Devlounge</h4> <div class="textwidget">Want to read more <a href="/about">about Devlounge</a>, or maybe you want to <a href="/contact">contact us</a>, or even <a href="/advertise">advertise</a>? Oh, and don't forget to <a href="/subscribe">subscribe to updates</a>!</li></div> </div></section> </div><div class="widget-area footer-widgets-2 footer-widget-area"><section id="featured-post-6" class="widget featured-content featuredpost"><div class="widget-wrap"><h4 class="widget-title widgettitle">The Best of Devlounge</h4> <article class="post-9437 post type-post status-publish format-standard category-featured category-strategy tag-social-media-strartegy entry"><a href="https://devlounge.net/5-ways-to-use-social-media-to-make-money/" class="alignleft" aria-hidden="true" tabindex="-1"><img width="100" height="100" src="https://www.devlounge.net/wp-content/uploads/2013/11/url-100x100.jpg" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://www.devlounge.net/wp-content/uploads/2013/11/url-100x100.jpg 100w, http://www.devlounge.net/wp-content/uploads/2013/11/url-150x150.jpg 150w" sizes="(max-width: 100px) 100vw, 100px" /></a><header class="entry-header"><h2 class="entry-title" itemprop="headline"><a href="https://devlounge.net/5-ways-to-use-social-media-to-make-money/">5 Ways to Use Social Media to Make Money</a></h2></header></article></div></section> </div><div class="widget-area footer-widgets-3 footer-widget-area"><section id="search-3" class="widget widget_search"><div class="widget-wrap"><h4 class="widget-title widgettitle">Search</h4> <form class="search-form" method="get" action="https://devlounge.net/" role="search" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction"><input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search the site ..." itemprop="query-input"><input class="search-form-submit" type="submit" value="Search"><meta content="https://devlounge.net/?s={s}" itemprop="target"></form></div></section> </div></div></div><footer class="site-footer" itemscope itemtype="https://schema.org/WPFooter"><div class="wrap"><p></p></div></footer></div><script type='text/javascript' src='https://www.devlounge.net/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script> </body></html>

Facebook Page Design and Tutorials

Facebook Fan Page Design Inspirations

Cranium

Starbucks

Lenny Kravitz

Dell

NFL

Adobe

CNN

KLM

Nike Football

Facebook Fan Page Creation Tutorials

Friday Focus 10/15/10: Book Sites

Designs of the Week

Social Media Weekly

Add A Facebook Like Button To Your WordPress Theme In 5 Minutes