pro-web.at » JavaScript

Facebook Connect: Display login button only when not connected to site

Daniel Prieler — Wed, 23 Dec 2009 09:41:12 +0000

Currently i’m testing the features of Facebook Connect and i ran into troubles:

how to display the login button only if a user has not connected
how to display the image only if a user has connected

My simplest solution was to add some custom css classes:

fb-connecting: when the status of facebook connect is not known. e.g. display a “connecting…” message
fb-not-connected: when user is not connected to facebook. e.g. show connect button
fb-connected: when user is connected to facebook. e.g. show user picture and name


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_GB" type="text/javascript"></script>
 
  <script type="text/javascript">
  $(function() {
    FB_RequireFeatures(["XFBML"], function() {
      FB.Facebook.init("[[[INSERT APP ID HERE]]]", "/xd_receiver.htm");
      FB.Connect.ifUserConnected(function(){
        $('body').addClass('fb-is-connected').removeClass('fb-is-not-connected');
      }, function(){
        $('body').removeClass('fb-is-connected').addClass('fb-is-not-connected');
      });
    });
  });
  </script>
 
  <style>
  .fb-connected, .fb-not-connected {
    display: none;
  }
  .fb-is-connected .fb-connecting, .fb-is-not-connected .fb-connecting {
    display: none;
  }
  .fb-is-connected .fb-connected {
    display: block;
  }
  .fb-is-not-connected .fb-not-connected {
    display: block;
  }
  </style>
 
</head>
<body>
 

<div class="fb-connecting">Connecting to Facebook</div>
 

<div class="fb-not-connected">
  ="2" size="medium"></fb:login-button>
</div>
 

<div class="fb-connected">
  ="loggedinuser" size="square" facebook-logo="true"></fb:profile-pic>
  name uid="loggedinuser" useyou="false" linked="true"></fb:name>
</div>
 

name class="fb-connected" uid="loggedinuser" useyou="false" linked="true"></fb:name>

No related posts.

jsSO 0.2 released

Daniel Prieler — Wed, 15 Apr 2009 12:03:02 +0000

New updates to jsSO-library: It now allows calling Server-Side functions. Go to the jsSO page Related posts:jsSO – Flash Shared Objects in Javascript Related posts:

jsSO – Flash Shared Objects in Javascript

Auto numbering your google docs headings / headlines

Daniel Prieler — Fri, 03 Apr 2009 08:48:45 +0000

Google-docs-writer is great for collaborating, but it lacks of many features.
At least i created a small bookmarklet to add numbering to all headlines in your document.

The numbering is done in the style of:

1. headline
1.1. subheadline 1
1.2. subheadline 2
…

How to use / install

Just drag the link below to your bookmarks-bar, open your google document and press the “gDocs: headline numbering” button.
gDocs: headline numbering

Source

(function(){
 
var doc = window.frames['wys_frame'].document;
var elements = doc.getElementsByTagName('*');
var numbers = [0,0,0,0,0,0,0];
for (var i in elements) {
    var e = elements[i];
    if (!e || !e.tagName || !e.tagName.match(/^H([1-6])$/)) {
        continue;
    }
 
    var eLevel = RegExp.$1;
    var txt = '';
 
    numbers[eLevel]++;
    for (var l = 1; l<=6; l++) {
        if (l <= eLevel) {
            txt += numbers[l]+'.';
        } else {
            numbers[l] = 0;
        }
    }
 
    e.textContent = txt+' '+e.textContent.replace(/^[0-9\.\s]+/, '');
}
 
})();

Updates

because of changes in google-docs i modified how the document is accessed

CSS Counter Test / Auto numbering your google docs headlines with CSS

jsSO – Flash Shared Objects in Javascript

Daniel Prieler — Tue, 24 Feb 2009 11:59:23 +0000

I just released the initial version of a javascript rtmp/sharedObject client library.

Go to the jsSO page

jsSO 0.2 released