Facebook Answers

100% height content with headers and footers.

admin — Thu, 17 May 2012 21:54:35 +0000

A problem I have had for ages when working with layout, is what happens when there is not much to display on screen. Specifically, what happens to the footer?

When you have pages of data, the footer goes at the end, and it all looks normal. You reach the bottom and can go no further.

But when you have less than a page full of data, the footer is not at the bottom. There is an ugly empty space below it, and it looks silly.

During the course of my searching, I have found numerous solutions.

The first one I found was here: http://www.cssplay.co.uk/layouts/layout.html

This seemed to do the trick, until I tried viewing it on my tablet, when it broke. Also, if you look at the CSS its full of hacks and is virtually unreadable to me.

The second place I looked was here: http://peterned.home.xs4all.nl/examples/csslayout1.html

This worked fine at first, with the caveat that you need to let the background of the central content be controlled by the wrapper div. If you set a different background for the central content you will see that it is not actually stretching to the bottom of the screen at all.

(This is the real problem. Why can’t you just assign a height of 100% to that central div and let the browser work out the rest?)

However, as soon as you add a second column to this layout, you have a problem. Unless the second column has the same colour background, you run the risk of having it stop short of the bottom of the page.

No, what I want is a layout that allows for multipe columns, with different backgrounds in each column.

And I’ve finally worked out how to do it!

The image above shows the same web page through two different browsers. The IE window is bigger, and the footer is at the base of the page. The Chrome window is smaller, and the footer has scrolled off screen.

You can view the page yourself here:
The first (bugged) demo.

Now, the simple way to do this would have been to adapt the old faux-column technique, and give the wrapper div a background image that showed two columns. However, that introduces an image file which has to be edited every time the column width changes in your design. Plus, the technique seems to be frowned upn these days.

Instead, the solution relies on a little lateral thinking.

The second column is wrapped in an absolutely positioned div, with margins to avoid the header and footer.

But hang on a second, you would think that that would cause havoc once the page got bigger than the window. Well, no it doesn’t, because thats when the wrapped DIV takes over.

Its a very neat trick.

Unfortunately, in its current form, there is a snag. If the menu column has more content than the main column, then the header moves up the page. So this solution isn’t ideal. There was also a sizing issue in Firefox.

However, I didn’t give up there. Instead I ploughed on, and came up with this technique:

The second working demo.

If you have ever used the WordPress admin panel, this layout will look familiar. I basically reverse-engineered it and stripped it to the bone, when I realised that it used the exact technique I was looking for.

Here’s is the complete code for the demo. Note that it is all done using CSS. No javascript whatsoever is used.














Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10





But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?



  


This is the footer




This is the header

I would be interested to hear of any problems people have with the code.

Using Social Plugins and the Facebook Javascript SDK. Part 5 – CSS

admin — Tue, 08 May 2012 13:54:19 +0000

Its time to make our plugins look pretty. Currently, they are as ugly as sin.

I mentioned earlier that I had wrapped the plugins in DIVs, so I could control them with CSS later. The actual HTML is as follows:

Class pz_c_one and pz_c_twothree are layout related and specify the width of each plugin container. The class we are really interested in is pz_fbplugin. If you define that as follows, then you will see immediate results.

.pz_fbplugin
{
    background-color: #fff;
}

This produces a much more attractive page:

In fact, for this page, I wouldn’t want to do any more styling, as the FB colour scheme matches the site design quite well. But what if you had, say, an Orange site, or a red one? In that case, the FB colours would look out of place. So how would you change, say, the background colour of the Recent Activity Heading? Lets say your client wants to “go green” on the cheap, by changing the heading colour to green. How would you do that?

First, you need to work out what CSS is controlling that colour. So, using your browser tool of choice (in our case pressing F12 on Chrome) you drill down to find the correct element.

Hmm, in this case, it seems to be controlled by the class .uiBoxLightblue

Indeed, if we manually set that to “green”, we get our green heading:

So how do we programatically set the background to green? The plugin is stored in an iFrame, so it won’t see any CSS specified in your parent page. Try it and see. Instead, we need to inject CSS into the plugin itself.

On Planet Earth, you would do this:

However, on Planet Facebook, this doesn’t work. Nor does the code given on Stackoverflow:


stylesheet
YOUR_FACEBOOK_CANVAS_PAGE/style.css
text/css
all

If you try sticking that, or any other HTML, between the fb:activity tags, it renders them before rendering the iframe. So any CSS calls are ignored.

In short, there doesn’t appear to be a way to inject CSS into an activity plugin.

So how did I do the following then?

Simple.

First, I disabled the header, having first noted that it was 33px in height.

Then I added a DIV wrapper with an id pz_fbactivity. I also removed the pz_fbplugin class from the existing wrapper, and that is now only used for the comments plugin. it is important to remove that class, because it sets the background to white. We want a transparent background, so that the background we apply to pz_fbactivity is visible.

Then I added a bit of CSS to go with the ID.

#pz_fbactivity
{
    margin-top: 10px;
    padding-top:  33px;
    background-image: url(../images/fb/plugin/activity.png);
    background-repeat: no-repeat;
    background-position: top center;
   }

The margin-top is specific to my site. The rest is important however. First, we pad the top by 33px, so that the plugin doesn’t use it. Secondly we assign our own background image. Note that you don’t have to use a background image. You could specify a colour or a gradient. Its up to you.

Finally, we need to make the background image. This is what I did. Remember to allow 33px for the header, and another 300px for the body, plus 300px width. Of course, if you specify other dimensions for the plugin your background needs to be adjusted accordingly.

And it works quite well! The only thing you cannot change this way, is the text colour. However, the plugin itself does allow for different fonts, a light or dark colour scheme and a different border colour, (in the initial dialog when you create the plugin), so you are not totally helpless when it comes to styling your activity box.

Personally, I see these plugins as a temporary measure for me, until I get fully to grips with the JSSDK and / or PHPSDK. Now I want my attention to other ways of achieving the same thing. Ideally I want to lose the iframes altogether and have my own widgits which I can fully control…

Using Social Plugins and the Javascript SDK. Part 4.

admin — Mon, 07 May 2012 22:03:48 +0000

To fill in that blank area we are going to add an Activity box:

https://developers.facebook.com/docs/reference/plugins/activity/

This is actually fairly simple. Just fill in your details…

…then copy the code across. As I have already added the code to load the JS SDK, I am only interested in the third code chunk of the dialog, as highlighted. I wrapped mine in a DIV so that I could manipulate its position easily using CSS later.

There you have it. An Activites section. It is in desperate need of CSS formatting, and I will cover that in Part 5. But for now, you can see it is an Activities box.

Note that if you are using the site Admin facebook ID, you don’t get anything displayed here for some reason. So log out and try a different facebook account if thats the case.

Right, the next step is to make the plugins look prettier, using CSS.

Using Social Plugins and the Javascript SDK. Part 3.

admin — Mon, 07 May 2012 09:43:10 +0000

Ok, to recap, so far we have done the following:

Registered our site on Facebook to get an App ID.
Added a LIKE button to the site.
Added META tags as per the Facebook

Next, lets add some comments:

https://developers.facebook.com/docs/reference/plugins/comments/

This is actually fairly simple. Just fill in your details…

There you have it. A comments section. It is in desperate need of CSS formatting, and I will cover that in Part 5. But for now, you can see it is a comments box.

Whats more, if you make a comment, it appears on your timeline too, as you would expect.

Right, looking at the screenshot, there is a gaping hole to the left of the comments box. I am going to put another plugin in that space, in Part 4.

Once that is done, we will look at using CSS to make the plugins prettier. Then we will deal with the no Javascript situation.

Using Social Plugins and the Javascript SDK. Part 2.

admin — Sun, 06 May 2012 21:50:18 +0000

Now that we have our App ID, its time to juice up our website. As you can see it is currently devoid of facebook.

First, go here to add a LIKE button.

https://developers.facebook.com/docs/reference/plugins/like/

Fill in your site information like that shown below.

Then generate the code. You will need to insert different bits in different bits of your website.

Once you have done that, generate some META tags, using the second dialog box.

Again, generate the code and paste it into the top of your page.

Use a bit of CSS to position your LIKE button wherever you want.

Next, we are going to add a comments box to the main page…

Using Social Plugins and the Javascript SDK. Part 1.

admin — Sun, 06 May 2012 21:33:57 +0000

Its been a while since I’ve posted here, but I’ve finally gotten around to exploring the Javascript SDK. I’ve steered clear of it in the past because I’ve traditionally tried to make my sites as inclusive as possible, IE I have wanted them to work with or without Javascript.

However, I’ve decided to embrace the Javascript SDK now, for a number of reasons:

Facebook itself requires Javascript to work properly, unless you use the mobile version.
if you are going the HTML5 route then you will want Javascript to update older browsers (modernizr) and to utilise CANVAS etc.
There is a load of cool stuff you can do with Javascript.

Now, you may be wondering why I am even fretting about this. But check out this article: Support for Javascript Disabled.

From that, I think its important to make sure the site still functions without Javascript enabled. However, if it is enabled, there’s no harm in using it. So my first goal is to get to grips with the SDK on the assumption that all users will be using it. Once I know how to use it properly, I can look at using PHP to support browsers without Javascript.

Before we jump in with some code, there is one fundamental thing you need to do first. The Facebook documentation doesn’t make much of this point, which is surprising, as it is crucial. Why they omit to mention it is beyond me, but there you go…

Before you implement the plugins you need to register your website with facebook to get an App ID.

To register your site, go here:

http://developers.facebook.com/setup/

Once there, give your site a name, but don’t worry about the Namespace. In my case, I am using my Quniverse test site to experiment.

Then you need to enter your details. Make sure you select to integrate your site with Facebook.

I’ve also assigned an icon etc. The key thing to note though, is your App ID. You will need this.

Right once we have got that we are going to do the following over the next couple of posts. First we will add a LIKE button using JSSDK. Then we will add a comments box.

Wow! Teenage girls are tech savvy.

admin — Wed, 14 Dec 2011 17:31:42 +0000

One of the sites I have developed for a customer is designed for Prom Dresses, called Prom Palace.

I was just looking through the logs, as we have been doing some facebook advertising of late (very useful, you can target much better than using google ads), and I was amazed to see the following browser stats:

Chrome: 42%
IE: 36% (9: 14%, 8: 17% 7-: 5%)
Firefox: 12%
Safari: 9%
Others: Negligible.

Total hits: 150,000

Compare that to the main bridal site I do, Glamourous Gowns, and while they have many more hits (800,000+) they are less tech savvy:

IE: 54% (9: 15%, 8: 26%, 7-: 13%)
Chrome: 18%
Firefox: 15%
Safari: 10%
Android: 1%
Others: Negligible

This highlights a number of things:

1. Never guess what your punters are using. Always check the stats.
2. Chrome is now a heavyweight browser.
3. Some 25% of my punters won’t be able to cope with CSS3 and HTML5 etc.
4. Either, I shouldn’t spend any time developing mobile versions of the sites, OR I should do them a lot better. At the moment if you access via a smartphone you default to a very basic menu system and an ugly looking display screen. I am investigating JQuery mobile at the moment, so significant improvements may be a few lines of code away…

Have other people experienced similar trends in browser usage? If so, what industry are they aimed at etc?

Boosting Facebook Fan Page Traffic with Tags

admin — Thu, 24 Nov 2011 20:26:27 +0000

Up until a few weeks ago, I thought that tagging on Facebook involved only photographs. I had read various complaints about people’s privacy being invaded blah blah blah, but hadn’t paid much attention because I don’t really use Facebook for photos.

However, one day a client asked me how they could get links to appear in their wall posts like such and such did. I had no idea what they were talking about until they showed me, and then I was stumped, as I had no idea how it was done. Rather than bore you with the details of what I did next, I will cut to the chase.

This is a tag.

Note from the tag, that I have referred to the facebook fanpage in my wall post, and if hovered over, the link produces the bubble as shown.

Now, if you follow that link, you get to the Facebook fanpage. What you don’t get on that fanpage, is a copy of the post on our wall. However, if the facebook fanpage allowed posts from other people that is exactly what would happen. So using a tag, you not only get a nice engaging link on your own fanpage, but you can also get the same post appearing on the tagged fanpage. This post will be read by all the fans of that page.

Obviously, you have to be careful. You don’t want to make a load of spam posts which will annoy the fanpage owners you are tagging. Do that and you will get blocked. Also, they will think that you are an idiot and if you are a customer of their’s they will think twice about sending any business your way in future.

So, the way to use this facility is to write a genuinely engaging wall post that refers to the fanpage you are tagging.

This is how to do it.

The first thing to do is log on using an id that has admin rights to the fan page you want to post on.

Once you have done that, you need to find the link on the right of the screen that says something like “Use facebook as [My fan page]“.

Click that link, and you are now posting as the fan page. In this case, I am using the fan page of a client of mine; Glamourous Gowns.

Oh, another thing you should do, is to like the fan page you are about to tag. This is a common courtesy, and if you don’t want to like the fan page you are trying to tag, why on Earth are you tagging them?

Ok, so you are now using Facebook as your fanpage. The next thing you want to do is make a wall post. I know that Glamourous Gowns recently added the new wedding dress ranges from Mori Lee and Forever Yours. So it would be nice to make a wall post mentioning this, and linking to the Glamourous Gowns website. I also know that Mori Lee and Forever Yours both have fan pages on Facebook. So the post will want to tag them.

So I start typing my message, and when I get to the point where I want to add a tag for Mori Lee, I type the @ character, and start typing Mori Lee.

Facebook detects that I am trying to type a tag, and presents a dropdown of available tags, based on what I have typed already. I want the MORI LEE BRIDAL GOWN tag, so I select that and continue with the message.

As you can see, Facebook highlights the tag and lets you carry on typing.

Once the message is complete, I post it, and see what has happened?

Yes, I now have nice tags on my post, pointing to the Mori Lee and Facebook fanpages.

The best is yet to come though…

As you can see here, the Mori Lee Bridal Gown fanpage is configured to show my post! My wall post is now being potentially seen by all fans of this page.

And thats all there is to it. A few things to remember:

1. Tagging on a fanpage only works if you are using facebook as the fanpage.
2. Like the fanpage you tag.
3. Only use tags for legitimate posts.
4. Not every fanpage will show your post, however the tag will always appear on your own fanpage.

Using Action Links to enhance a user’s post.

admin — Wed, 28 Sep 2011 10:15:23 +0000

Somebody asked about action links yesterday. Up until now I had never heard of them, but they are quite cute. Basically they allow you to add a link to the bottom of a user’s post.

See it in action.

If you run this test app, and use it to post a comment to your wall, you will notice the “Sweet FA” link, which links you to facebookanswers.co.uk.

The full source code for that app is shown in this article:

Publishing to a User’s Wall

The important bit of code is here:

$attachment = array
 (
 'access_token'=>$facebook->getAccessToken(),
 'message' => 'I\'ve been testing my IQ!',
 'name' => 'IC-YOUR-IQ',
 'caption' => 'This is my result:',
 'link' => 'http://apps.facebook.com/icyouriq/',
 'actions' => array('name'=>'Sweet FA','link'=>'http://www.facebookanswers.co.uk'),
 'description' => $cmsg,
 'picture' => 'http://www.facebookanswers.co.uk/img/misc/iq.jpg'
 );

The key bit is the “actions” section.

Uploading pictures using the PHP SDK

admin — Tue, 23 Aug 2011 01:17:36 +0000

NB: this is in response to a question posed on our Facebook Fan Page, and is a work in progress. If you have any comments or see mistakes, don’t be shy. The code here is rough and ready and liable to revision. So don’t be surprised if you find errors.

The application can be run here: Photo Love

If you run the application, you are presented with a list of albums, and you select one. A picture is then uploaded into that album.

There are two programs:

index.php

 $cappid,
'secret' => $cappsecret,
'cookie' => true,
'domain' => 'facebookanswers.co.uk'
));

$user = $facebook->getUser();

// NOTE!!!! Make sure you use the permissions shown below.

if (!$user) {
    $url = $facebook->getLoginUrl(array('scope'=> 'read_stream, publish_stream, photo_upload, user_photos, user_photo_video_tags','redirect_uri'=>'http://apps.facebook.com/photolove/'));
    echo "Redirecting to perm request...";
    echo "";
} else {

  try {
         $facebook->setFileUploadSupport(true);
        $likes = $facebook->api('me/likes');
        $fa_fbfriends = $facebook->api('me/friends');
        $fa_fbalbums = $facebook->api('me/albums/');
        $fa_fbme = $facebook->api('me');
        $fa_fbname = $fa_fbme['name'];
        $fa_fbid = $fa_fbme['id'];
        $fa_fanpageliked = false;
        $fa_appliked = false;
        $fa_accesstoken = $facebook->getAccessToken();
        foreach ($likes['data'] as $ilike) {
            if ($ilike['id'] == $cfanpageid) {$fa_fanpageliked = true;}
            if ($ilike['id'] == $cappid) {$fa_appliked = true; }
}
 require_once('backend.php');
}

    catch (FacebookApiException $e) {
        $url = $facebook->getLoginUrl(array('scope'=> 'read_stream, publish_stream, photo_upload, user_photos, user_photo_video_tags','redirect_uri'=>'http://apps.facebook.com/photolove/'));
        echo "Please wait for authorisation…";
        echo "";
    }

}

Nothing new in the above, apart from three points:

We are now using SDK 3.11
We are using permissions specific to uploading pictures.
We define an array of albums: $fa_fbalbums = $facebook->api(‘me/albums/’);

Next we have the actual meat of the code.








Operation: Photo Love v12.666

$fa_accesstoken,
    'message'=> 'Lovely Photos',
    'name'=> 'Operation: Photo Love');
    $newalbum = $facebook->api('/me/albums', 'post', $newalbumdata);
    $newalbumid = $newalbum['id'];  

    break;
    case "SELECT":
    $newalbumid = $_POST['album'];  

    break;
    default:
    }
    echo "Boof: ".$newalbumid;

 $newphotodata = array(
     'access_token'=>$fa_accesstoken,
     'message'=> 'Greetings from Facebook Answers!',
     'image'=> '@'.realpath('helloworld.jpg')
     ); 

 $uploadedphoto = $facebook->api('/'.$newalbumid.'/photos/', 'post', $newphotodata);

        $url = "http://www.facebook.com/media/albums/";
        echo "Going to Galleries…";
        echo "";
        exit;  

}
        echo "";
        if (sizeof($fa_fbalbums['data'])==0)
        {
            echo "There are no albums. First you need to create an album.";
            $action = "CREATE";
        }
        else
        {
            $action = "SELECT";

        echo "Pick an album:";

        echo "";
                }
        echo "";
        echo "";
        echo "";

?>

This routine will either produce a select box allowing you to pick an album, or create an album for you if there are none.

Once you have selected/created an album, a picture is uploaded, and the albums are displayed.

The main thing to note here, is that the picture is uploaded from the server that is running your PHP application. So if you want to enable a user to upload their own picture, you will first need to upload that picture to your server.