Setting Facebook meta tags

A goal for many of the sites we build is for them to be shared on Facebook. The least we can do is make sure they look good when it happens.

The first thing you’ll want to do is run your site through the Facebook Debugger.

I’m currently setting this up for Invoice Ninja. You can see below what our site looked like before setting the meta tags. In the “Open Graph Warnings That Should Be Fixed” section there are a number of properties which are inferred.

Facebook Debugger

To set the metadata (and resolved the warnings) you just need to add the following meta tags to the website, filling in your own values for the content fields.

<meta property="og:url" content=""></meta>
<meta property="og:title" content=""></meta>
<meta property="og:image" content=""></meta>
<meta property="og:description" content=""></meta>

It’s worth noting that after your site gets 50 likes the title becomes fixed.

For a listing of all available tags and options check out the Open Graph documentation at http://ogp.me/.

Friendly URLs with per-account incrementing Ids in Laravel

For Invoice Ninja we wanted each account to be able to use friendly URLs where their Ids would increment.

This would mean the URL for the first client they create would be https://www.invoiceninja.com/clients/1

Many accounts are stored in the same database so we’re not able to use the auto-incrementing Id field. The solution we’re using is to have all classes which store user data (ie, clients, invoices, payments, etc) extend the EntityModel class. To create a new instance you call the createNew() method.

Here are the benefits of this approach:

  • Context is tracked: The account and user the record belong to is automatically set. If an item is created by the system (ie, an automatically sent recurring invoice) the context can be inherited from an existing record.
  • Out of the box security: When setting foreign key values we use getPrivateId() to resolve the public id to a private table Id. This prevents the user from hand modifying the HTML to reference another account’s data.
  • Easy scoping: Using the scope() method we’re able to easily load data filtered by the account. For example Client::scope()->get() returns all of the accounts clients, while Client::scope($publicId)->get() returns a client using its public Id.

And finally the code…

class EntityModel extends Eloquent
{
	protected $softDelete = true;
	public $timestamps = true;
	
	protected $hidden = ['id', 'created_at', 'deleted_at', 'updated_at'];

	public static function createNew($parent = false)
	{		
		$className = get_called_class();
		$entity = new $className();
		
		if ($parent) 
		{
			$entity->user_id = $parent->user_id;
			$entity->account_id = $parent->account_id;
		} 
		else if (Auth::check()) 
		{
			$entity->user_id = Auth::user()->id;
			$entity->account_id = Auth::user()->account_id;			
		} 
		else 
		{
			Utils::fatalError();
		}

		$lastEntity = $className::withTrashed()->scope(false, $entity->account_id)->orderBy('public_id', 'DESC')->first();

		if ($lastEntity)
		{
			$entity->public_id = $lastEntity->public_id + 1;
		}
		else
		{
			$entity->public_id = 1;
		}
		
		return $entity;
	}

	public static function getPrivateId($publicId)
	{
		$className = get_called_class();
		return $className::scope($publicId)->pluck('id');
	}

	public function scopeScope($query, $publicId = false, $accountId = false)
	{
		if (!$accountId) 
		{
			$accountId = Auth::user()->account_id;
		}
		
		$query->whereAccountId($accountId);

		if ($publicId)
		{
			if (is_array($publicId))
			{
				$query->whereIn('public_id', $publicId);
			}
			else
			{
				$query->wherePublicId($publicId);
			}
		}
		
		return $query;
	}
}

I’m sure there are other ways to tackle this problem. Let me know in the comments or on twitter @hillelcoren if you have a different solution.

Logging errors in Laravel

Laravel comes with a really helpful Log::error() function to write messages to the log file. Here’s how you can use it to track PHP and JavaScript errors along with useful contextual information to help troubleshoot problems.

The Log::error() function accepts a second optional parameter allowing you to specify additional info. To make setting this easier create a logError() function in a Utils class.

public static function logError($error, $code = '', $context = 'PHP')
{
	$count = Session::get('error_count', 0);
	Session::put('error_count', ++$count);

	$data = [
		'context' => $context,
		'user_id' => Auth::check() ? Auth::user()->id : 0,
		'user_name' => Auth::check() ? Auth::user()->getDisplayName() : '',
		'url' => Request::url(),
		'user_agent' => isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '',
		'ip' => Request::getClientIp(),
		'count' => $count,
		'code' => $code
	];

	Log::error($error, $data);
}

Most of the code should be self explanatory. getDisplayName() is a function I add to the User class (as well as other classes) where there is logic involved in determining the name. In this case it may be the user’s full name or email address.

To configure Laravel to use this function by default change the App::error() function in app/start/global.php to the following.

App::error(function(Exception $exception, $code)
{
	Utils::logError($exception, $code);
});

To catch all JavaScript errors enable accessing the Utils::logError() function by adding this to your routes.php file.

Route::get('/log_error', function() 
{
	return Utils::logError(Input::get('error'), '', 'JavaScript');
});

And finally, add the following to function to your master template file.

window.onerror = function(e) {
	try {
		$.ajax({
			type: 'GET',
			url: '{{ URL::to('log_error') }}',
			data: 'error='+e
		});     
	} catch(err) {}
	return false;
}

The future of web development is Laravel

PHP is an old friend, going back close to 15 years. It was the first language I used. Back then it was the obvious choice for web development if you were running Linux/Apache, it was free and it was popular.

Over the years other languages/frameworks have appeared which have definitely captured the “cool” factor. The two obvious ones are Ruby on Rails and Python/Django. It’s possible to argue that Ruby and Python are more aesthetically pleasing languages to code in but their real draws are the MVC implementations of Rails and Django.

From a business stand point PHP makes a lot of sense. The more recent versions are dramatically improved and it’s incredibly well supported. There are far more PHP developers which helps keep costs down and it scales. If it’s good enough for Facebook chances are it’s good enough for you.

The challenge has always been finding the right MVC framework. Laravel solves this problem. It provides a best-in-class MVC implementation for PHP.

Reading the tea leaves it’s clear that I’m not the only one who feels this way. This is from Google Trends and leanpub.com. It feels good to be excited about PHP again.

As a side note, using puPHPet, Vagrant and VirtualBox to create virtual machines to play with Laravel makes me feel like a programming super hero with the power to create worlds.

The iOS7-ification of an app

iOS7 has gotten rid of button borders. While the lists and table views in my latest iPhone app converted automatically, I ran into a problem with the main UI as it’s made up entirely of buttons.

To get a flat iOS7 looking UI while still retaining the button backgrounds I used the excellent FlatUIKit collection of components.

Here’s a comparison of the iOS6 and iOS7 versions of the app.

mscmkr

The server committed a protocol violation

I’m currently working on a C#/.net project. Early on we found the following error kept appearing. The server committed a protocol violation. Section=ResponseHeader.

Numerous Google searches all returned the same piece of advice: add the useUnsafeHeaderParsing flag to the config file. Although this seemed to resolve the error, now that we’ve started to get serious usage we’ve noticed the error still appears every now and then in the logs.

The root of this problem appears to be related to security measures implemented in the HttpWebRequest class. A good solution we’ve found is to use a TCP client instead as this completely bypasses any checks of the HTTP headers.

Here’s the code:

string response = string.Empty;

Uri uri = new Uri("http://www.domain.com:80/script");
TcpClient tcpClient = new TcpClient(uri.Host, uri.Port);            

using (NetworkStream networkStream = tcpClient.GetStream())
{
	StreamWriter streamWriter = new StreamWriter(networkStream);
	StreamReader streamReader = new StreamReader(networkStream);

	streamWriter.WriteLine(string.Format("POST {0} HTTP/1.0", uri.AbsolutePath));
	streamWriter.WriteLine(string.Format("Host: {0}", uri.Host));
	streamWriter.WriteLine(string.Format("Content-Length: {0}", data.Length));
	streamWriter.WriteLine("");
	streamWriter.WriteLine(data);
	streamWriter.Flush();

	var isBody = false;
	while (streamReader.Peek() >= 0)
	{
		var line = streamReader.ReadLine().Trim();
                    
		if (line == string.Empty)
		{
			isBody = true;
		}
		else if (isBody)
		{
			response += line;
		}                    
	}
                
	streamReader.Close();
	streamWriter.Close();
}

tcpClient.Close();                

A programmer’s attempt at marketing

I’ve always believed that if you create an amazing app people will find you. While I still think that’s true, what if you simply don’t have the time, resources or ground breaking idea to create an amazing app. If you’re just experimenting with a new framework you might be limited to creating just ok apps. Apps which may offer a novel experience but don’t have the same level of polish as apps by big name publishers.

This is where I found myself a few months ago. I’d like to share with you my successes and failures thus far. If you have suggestions for things to try in the future please post your suggestions in the comments below.

First a brief explanation of the app. It’s called Music Maker Pro and is available for 99 cents in the Apple App Store. It enables you to easily create music by tapping a few boxes. In an effort to increase awareness of the app I created a free browser-based version which you can try at http://mscmkr.com.

On to the traffic… the graph shows the number of new users per day over the past three months to both the free and paid versions. It can be roughly divided into four sections.

Stats

  • Paid advertising (blue) To get started I used a combination of AdMob and Facebook ads. While paying money definitely got me traffic the conversion rates were way too low for this approach to be profitable.
  • One big tweet (red) My next tactic was to try to get well-known people to spread the word. Scott Hanselman was kind enough (thanks again Scott!) to share the link on Twitter and Google+, the results speak for themselves.

  • Letting time do it’s thing (yellow) Here again the results speak for themselves. Doing nothing achieves nothing. I may have posted to the app’s Facebook group or sent some random emails but I clearly didn’t do anything to move the dial much.
  • The Chrome Web Store (green) I wasn’t expecting much but this has turned out be my best move to date. The app is now available here and so far has generated decent growth in traffic.

As I opened with, I think a key determinant of the stats is the app itself. While mine isn’t total crap it probably won’t win any design awards either. The competition in the app market is pretty intense. With the advent of in-app purchases, publishers can spend millions of dollars developing apps which they release for free.

Any time I read a random article on a developer’s download stats I’m always hoping to get a dollar amount. On average I sell about one or two apps a day. While it’s not a lot it pays for the server costs and definitely beats my last two mobile apps for which I’m still in the red :/

Follow

Get every new post delivered to your Inbox.

Join 80 other followers

%d bloggers like this: