Mick Redman

Wednesday, 2 February 2011

Sharing data from the Facebook API

In the simple example below I am sending a request to Facebook through the Graph API. I supply my App ID. In return, Facebook provides me with a JSON object. I then process the JSON, using PHP to create a link to my Facebook application. Simple I know, and but that's the point.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
</style>
</head>
<body>
<?php
$url = 'https://graph.facebook.com/yourAppID';
$JSONobj = json_decode(file_get_contents($url));
echo '<hr />';
echo '<a href="';
echo $JSONobj->{'link'};
echo '">';
echo $JSONobj->{'name'};
echo ' Facebook page</a>';
?>
</body>
</html>

Forgive me, for I have sinned

No, of course I haven't suddenly got religion. I'm so for removed, I needed to use the spell checker for the word 'religion'. The real sin, is that I did not thoroughly check that some of the examples I have provided in previous blog posts did not work in IE.

I've fixed them now. Namely :
http://effectivewebdesigns.blogspot.com/2010/08/simple-layout-1.html
That's a bad start isn't it.
http://effectivewebdesigns.blogspot.com/2010/09/simple-layout-3.html
http://effectivewebdesigns.blogspot.com/2010/09/simple-layout-4.html
http://effectivewebdesigns.blogspot.com/2010/12/two-equal-row-layout-beginnings.html

One which I should have uploaded, but didn't :
http://effectivewebdesigns.blogspot.com/2011/02/simple-layout-15.html

Simple layout #15

Here is another layout which uses jquery corners.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
   font-family:Georgia, Times New Roman, Times, serif;
   text-transform:uppercase;
color:#000000;
}
h1
{
   font-size:5em;
}
h2
{
   font-size:4em;
}
p
{
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-variant: normal;
   letter-spacing:0.1em;
   text-align:justify;
}
p
{
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
  <h1>header 1</h1>
  <h2>header 2</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
</header>
<div id="tl" class="">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>

</body>
</html>

A beginners guide to get your website working with Facebook

Below are 3 steps to :

Get Facebook functionality into your website.
Have a Facebook application presence for your website.

Step 1 :
Register your website to get an AppID here http://developers.facebook.com/setup/
Receieve your AppID and App secret.
You also get an example page with a login and like plugin, which you can extract and embed into your site.

Step 2 :
Seeing this in action gives you the confidence to move to the next stage. You can go to http://developers.facebook.com/docs/plugins. Here you will see other plugins which can be easily embeded into your site. Some of these plugins are designed to work in co-ordination with the Facebook Page you get with your application ID. This is available through http://www.facebook.com/apps/application.php?id=yourAppID

Step 3 :
You may also access the Social Graph API. Documentation of which resides here http://developers.facebook.com/docs/api. An example being that using https://graph.facebook.com/yourAppID will return JSON data about your application.
If for example, your website uses PHP, you may process this JSON data and represent it on your website.

Monday, 31 January 2011

Smooth fonts. No really! Just use Cufón.

There is a little pain in this exercise, but it genuinely works. It's worth it.

You see, when I'm at my day job, I have to use Windows. It's rubbish. And particularly rubbish is the way it handles fonts through a web browser. Even IE! Knowing that lots of other poor people have to use Windows, it's important to me to try and make the fonts of my site nice and smooth. I've done quite a bit of surfing on this, but I believe I've currently got the answer. Use Cufón. Available from http://cufon.shoqolate.com.

Step 1:
Find a TTF or OTF copy if the font you would like in your page. Yes, the file.
Step 2:
Go to http://cufon.shoqolate.com and get the latest version of the JavaScript file.
Step 3:
After the style references in your web page, add a reference to the newly downloaded JavaScript file thus:
<script type="text/javascript" src="cufon-yui.js"></script>

Step 4:

Convert your font by posting it up to http://cufon.shoqolate.com, remembering to check the boxes saying "The EULAs of these fonts allow Web Embedding" and "I acknowledge and accept these terms". Completing this process gives you a .js file for your font.

Step 5:

Add a reference to the .js file you got from http://cufon.shoqolate.com thus:

Step 6:

Add the necessary conversions to your page thus:

Cufon.replace('h1', { fontFamily: 'myNewFont' });

</script>

Step 7:

Below the body tag of your page, add the line:
<script type="text/javascript">Cufon.now();</script>

This is for IE. I know!

Behold! Smooth fonts for your website. Even in Windows!

Tuesday, 25 January 2011

ccrypt to encrypt files

If you need to encrypt a file which contains personal data, you can use ccrypt. It's not installed by default on ubuntu so you'll have to do a:

sudo apt-get install ccrypt
but once done you can encrypt your file using

ccrypt -e filename
and decrypt using

ccrypt -d filename

How much RAM do I have on my GNU/Linux machine?

free -m
For a result like this
total used free shared buffers cached
Mem: 1899 1273 626 0 17 858
-/+ buffers/cache: 397 1502
Swap: 5561 23 5538