Facebook friend selector with counter

Question

I am trying to get a friends selector working, the only thing is I don't want to send out invitations, I just want a count of the friends the user has selected.

I need to take this value and apply it to some javascript code that will update a span on the page.

I have spoken to Uncle Google, and he couldn't help.

Answer 1

You can't use fb:multi-friend-selector outside of fb:request-form. You can use fb:multi-friend-input though (but it is not as advanced).

Answer 2

I have used the following and this is working (might need some refinement):

<?php
require 'facebook-php-sdk/src/facebook.php';

// Create our Application instance.
$facebook = new Facebook(array(
  'appId'  => 'xxx',
  'secret' => 'xxx',
  'cookie' => true,
));

$session = $facebook->getSession();

$me = null;
// Session based API call.
if ($session) {
    try {
        $uid = $facebook->getUser();
        $me = $facebook->api('/me');

        $f_data = $facebook->api('/me/friends');

        $friends = array();

        foreach ($f_data['data'] as $friend) {
            $friends[$friend['name']] = $friend['id'];
        }

        ksort($friends);
    } catch (FacebookApiException $e) {
        error_log($e);
    }
}
?>
<div>You have <span id="numfriends">0 friends</span> selected</div>
<div class="friend-container">
<?php foreach ($friends as $friend): ?>
    <div class="friend-profile">
        <fb:profile-pic uid="<?php echo $friend; ?>" linked="false" size="square" /><br/>
        <fb:name uid="<?php echo $friend; ?>" linked="false" />
    </div>
<?php endforeach; ?>
</div>
<script>
<!--
    function updateFriends(obj)
    {
        obj.toggleClassName('selected');

        var friends = 0;

        friends_arr = obj.getParentNode().getChildNodes();

        for (friend in friends_arr)
            {
                if(typeof(friends_arr[friend]) == 'object')
                    {
                        if (friends_arr[friend].getClassName().indexOf('selected') != -1)
                            {
                                friends++;
                            }
                    }
            }

        document.getElementById('numfriends').setTextValue(friends + ' friends');
    }
//-->
</script>