Facebook Answers

Home
About

Installing Xampp for local development

June 8th, 2013

admin

Having dealt with Wampserver in the previous article I am now going to turn my attention to Xampp. The reason I am doing two WAMPs is because I want to do some Laravel dev in the future, and that requires a rather custom environment. I will use Xampp for Laravel, leaving Wampserver for all my other dev stuff.

So bear with me.

Anyway, I will be briefer with Xampp.

First go to http://www.apachefriends.org/en/xampp-windows.html

Select your flavour. Note that this contains PHP 5.4 for instance….

Don’t install to Program Files. I am installing to D:\XAMPP

Its all fairly straightforward.

I decided against having an FTP server…

I also didn’t want any extra add-ons.

Other than that its nothing complicated…

Until you get to…

… the Control Panel…

Right, if you are this far then you are nearly there. You just need to start Apache and MySql. Actually, the Mysql is optional, but I will definately need it. You will definately need Apache loaded though!

Ok, so to test this, browse to http://localhost

Once there, select your language.

Your should now get this splash screen.

Returning to the ControlPanel. If you click the explorer button you will be in the Xampp directory. Now navigate to the HTDOCS folder and create a folder in there called MYFIRST. (lower case)

In this folder, create a file called INDEX.PHP and copy the following into it:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>My First Xampp Site</title>
</head>
<body>
<h1>Hello World!</h1>
</body>

</html>

Now browse to http://localhost/myfirst

If you get the above web page you are all set!

In the next article we will create a local site that is facebook aware, before tackling the elephant in the room: local SSL.

Installing Wampserver for local development

May 12th, 2013

admin

If you are serious about developing web sites, you really need to be looking at a local web server so that you can quickly test ideas without worrying about uploading files to the live server and potentially damaging the live system.

In an ideal world, you will have a small network at home and it will be a small expense to set up a linux box to act as a web server. But what happens if you have a laptop, and wan’t to take your development environment with you?

Enter the world of the Wamp. Wamps are self contained web servers that run in a windows environment. Once installed, you can create entire websites on your local PC and browse to them as if you were online. You don’t need an internet connection, so you can carry on working without worrying about disconnecting from your host. You can also use a Wamp to create facebook applications, which is why I am interested in them here.

There are numerous Wamps available. I am going to document setting up two of them. I will then look at getting them working with facebook. In the first article, I am going to look at WAMP Server.

To install Wamp Server, go to the following URL:

http://www.wampserver.com/en/

Once there, click DOWNLOAD, and select the package that suites you. I selected the 64bit version featuring PHP 5.3. I didn’t go for the PHP 5.4 as my live environment using PHP 5.3, and it is important that your Dev environment matches your live environment. Now, if you are setting up a dev environment purely and simply to test the features of PHP 5.4 then this obviously doesn’t apply. All I am saying is give a bit of thought to this stage.

Once you select your version, you get the following window. At this point you may need to install Runtime Windows C++. Its already on my system though, so I just clicked the direct download link.

The file should then download.

Once downloaded, run the file…

Click NEXT, and carry on through the screens until you get to specify the path. I am installing on E:\WAMP

There is nothing Earth-shattering in this so far.

Click INSTALL when ready.

Now you can specify the default browser. I usually just click ENTER, as I can still use whatever browser I want. However, if you want to get fully integrated it may be worthwhile browsing to your chrome directory or whatever you use.

Next you will get a firewall warning. Allow it.

Finally you need to specify email information. I normally leave this at the default values.

And thats it!

If you click FINISH, you should see a new icon appear on your taskbar. You can click on it to access Wampserver settings.

To test everything is hunky dorey, browse to the following URL:

http://localhost

You should get this:

Now lets make a web site!

Browse to the www folder within your Wamp folder. Once there create a folder called myfirst.

In this folder, create a file called index.htm and fill it with something like the following:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>My First Wamp Site</title>
</head>
<body>
<h1>Hello World!</h1>
</body>

</html>

Save the file, as shown:

Now if you go back to localhost, you will see a new project is shown.

Either click on it, or browse to the following URL

http://localhost/myfirst

And thats it!

In the next article, we will do the same with XXAMP. Why bother with two, you may ask? Well, I also want to do some local dev with Laravel. Laravel requires a bit of work to play nicely with Wamp, so its handy if you have one WAMP for Laravel and one WAMP for your other projects. Just make sure you don’t try and run them both at the same time!

Uploading Pictures to Galleries

December 3rd, 2012

admin

I looked into this last year, and published a blog article showing how to do it. It was fine as far as it went, but I want to expand it. My goal is to write a tool allowing me to bulk upload pictures into a gallery of a business page I administer. So that, for instance, whenever new stock arrives, I can generate a gallery containing images of the stock and links to buy it onsite.

So far, I have had partial success. I can create a gallery, however, it doesn’t generate the crucial wall post that Facebook itself does if you create a gallery using Facebook. You know, it looks something like this:

Typical Front Screen for Facebook-posted Gallery

You get a lovely big wallpost, featuring the cover photo and smaller thumbs of some of the other photos. Without this wall post, nobody will really be aware that you have added a gallery, so we need this wall post.

The bad news is that I have yet to fathom out how to get Facebook to make such a post for us. However, I have got around this myself by first creating the gallery using facebook, and adding four pictures. This will generate a gallery as shown. I have then used the automated process I am about to describe, to stuff the gallery full of all the other pictures I wanted to add. So you get the nice wall post, but you don’t have to spend hours manually adding all the pictures.

It is a compromise, but its a heck of a lot better than having to manually add each picture.

So, how do we add pictures automatically, to a gallery we have created in Facebook? That is what I am about to explain…

First things first, I am assuming the following: the pictures you want uploaded to the gallery will be located on the same website that you are going to write the uploader. I am also assuming you have a suitable app id etc.

When you connect your uploader app to facebook, you will need the following permissions:

read_stream, manage_pages, publish_stream, photo_upload, user_photos, user_photo_video_tags

Ok, so what next? Well, lets assume you have the following:


$user = $facebook->getUser();
$accessToken = $facebook->getAccessToken();

To obtain a list of fanpages associated with your id, you need to make the following call:

$fanpages = $facebook->api('me/accounts?access_token='.$accessToken);

Please note the following: the data returned from facebook queries is stored as records in a multi-dimensional array. Normally, all the data is wrapped in an array called “data”. So when you are processing a facebook array, you should use:

Foreach ($fanPages[data] as $fa_fanpage)

Instead of:

Foreach ($fanPages as $fa_fanpage)

Which would just return one array containing everything.

When we give the structure of a facebook result set, we will omit the data array, and assume you are accessing it as above. This is for the sake of brevity. So the structure given will refer to a single record within the whole result set.

Each record will consist of one or more fields. Occasionally, those fields will themselves contain arrays. In this case, we give the full structure of the array, as some possess their own data wrapper, but by no means all of them.

So, to get the fanpages of your account, you make the call given above, and this will return an array of results with the following structure:

name
access_token
category
id
perms=>array(LIST OF PERMS)

This gives you a list of fanpages. Assuming you have selected the fan page you want, at the very least you should assign a couple of variables:

$fanPageId = id
$fanPageAccessToken = access_token

Now, to find out which galleries belong to your fan page you have to do the following:

$fan_albums = $facebook->api($fanPageId.'/albums/');

Note that you are not querying your own id, but the id of the fanpage.

Each fan_album will have the following structure:

id
from – array(name, category, id)
name
description
link
cover_photo
privacy
count
type
created_time
updated_time
can_upload
likes => array => [data]=>[n][id][name]
paging => array => next

The key field there is once again, id, so store that in $albumId;

So, now you have your $fanPageId, your $fanPageAccessToken, and your $albumId. You can now add a picture to your album using the following call:


$newphotodata = array(

'access_token' => $fanPageAccessToken,

'message' => $message,

'no_story' => 1,

'aid' => $albumId,

'image' => '@' . $picturePath);

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

The important things to note are:

When you make the call to the facebook api, you are using the access token of the fanpage, not your user access token.
picturePath must point to the picture on the server
It takes time to upload a picture. So if you are attempting to upload 100s of pictures, you will probably find your PHP file timing out. The way around this would be to keep the routine that does the actual uploading in a separate PHP file, and use Ajax to pump data tot it, in groups of 10.

We have used the no_story flag. If you don’t include this, then you get a story posted for EVERY picture loaded. However, before you get too excited, the story posted is NOT the same as the one Facebook generates when you create a gallery, instead, you get one story for EACH picture, which is way too many.

I haven’t finished with photo galleries by a long shot. I have posted my documentation thus far as it may be of use to somebody, and it will certainly be of use to me when I return to it…

100% height content with headers and footers.

May 17th, 2012

admin

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!

Multiple columns with 100% height

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
html,body {
height:100%;
margin:0;
padding:0;
}

body {
font-family:sans-serif;
font-size:12px;
line-height:1.4em;
min-width:600px;
color:#333;
}



#wrapper {
height:auto;
min-height:100%;
width:100%;
position:relative;
}

#maincontentwrap {
height:100%;
color:#333;
}

#maincontentwrap,#footer {
margin-left:165px;
}

#maincontent {
padding-bottom:65px;
float:left;
width:100%;
}

#menuback,#menuwrap,#menu {
width:145px;
}

#menuback {
position:absolute;
top:0;
bottom:0;
z-index:-1;
}

ul#menu {
clear:left;
margin:0;
padding:0;
list-style:none;
}

.clear {
clear:both;
}

#menuback,#menuwrap {
border-width:0 1px 0 0;
border-style:solid;
background-color:#ececec;
border-color:#ccc;}

#menuwrap {
position:relative;
float:left;
}

#maincontentwrap, ul#menu {
padding-top:28px;
}

#header * {
height:auto;
width:auto;
margin:0;
padding:0;
}

#header {
color:#ccc;
font:normal 13px/28px sans-serif;
height:28px;
position: absolute;
top:0;
left:0;
width:100%;
min-width:600px;
z-index:99999;
background-color:#464646;
}

#footer {
position:absolute;
bottom:0;
left:0;
right:0;
padding:0;
margin: 0 0 0 146px;
border-top-width:1px;
border-top-style:solid;
border-color:#dfdfdf;
background-color: #444;
color: white;
}

</style>
</head>

<body>
<div id="wrapper">
<div id="menuback"></div>
<div id="menuwrap">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li>Option 10</li>
</ul>
</div>

<div id="maincontentwrap">
<div id="maincontent">
<p>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?
</p>

<div class="clear"></div></div>  
<div class="clear"></div></div>  

<div id="footer">
This is the footer
<div class="clear"></div>
</div>

<div id="header" >
This is the header
</div>

<div class="clear"></div></div><!-- wrapper -->
</body>
</html>

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

May 8th, 2012

admin

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:

<div class="pz_c_one pz_fbplugin">
<fb:activity site="quniverse.co.uk" app_id="403933906306438" width="300" height="300" header="true" recommendations="true"></fb:activity>
</div>
<div class="pz_c_twothree pz_fbplugin">
<fb:comments href="http://www.quniverse.co.uk/" num_posts="5" width="610"></fb:comments>
</div>

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:

<fb:activity site="quniverse.co.uk" app_id="403933906306438" width="300" height="300" css="mycss.css" header="true" recommendations="true"></fb:activity>

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

<fb:tag name='link'>
<fb:tag-attribute name='rel'>stylesheet</fb:tag-attribute>
<fb:tag-attribute name='href'>YOUR_FACEBOOK_CANVAS_PAGE/style.css</fb:tag-attribute>
<fb:tag-attribute name='type'>text/css</fb:tag-attribute>
<fb:tag-attribute name='media'>all</fb:tag-attribute>
</fb:tag>

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.

<fb:activity site="quniverse.co.uk" app_id="403933906306438" width="300" height="300" css="mycss.css" header="false" recommendations="true"></fb:activity>

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.

<div class="pz_c_one">
<div id="pz_fbactivity">
<fb:activity site="quniverse.co.uk" app_id="403933906306438" width="300" height="300" header="false" recommendations="true">
</fb:activity>
</div>
</div>
<div class="pz_c_twothree pz_fbplugin">
<fb:comments href="http://www.quniverse.co.uk/" num_posts="5" width="610"></fb:comments>
</div>

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.

May 7th, 2012

admin

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.

May 7th, 2012

admin

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…

…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. 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.

May 6th, 2012

admin

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.

May 6th, 2012

admin

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.

December 14th, 2011

admin

A tech savvy teenager, yesterday.
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?