You’ve definitely seen the “share a link” screen in Facebook. When you paste a link into the box (fig. 1) and press the “Attach” button you’ll get the prompted cite parsed with a title, description and possibly thumb (fig. 2). This functionality is well known in Facebook, but it appears to be well known also in various social services. In fact Linkedin, Reddit, Dzone‘s bookmarklet use it.

Fist thing to notice is that this information, prompted by Facebook, is the same as the meta tag information. However there is a slight difference.

Facebook prefers for the thumb the image set into the <meta property=”og:image” … />. In the case above this tag appears to be:

And the image pointed in the SRC attribute is exactly the same as the one prompted by Facebook (fig. 3).

First thing to note is that the real thumb is bigger than the thumb shown in Facebook, so Facebook resizes it and the second thing to note is that there are more meta tags of the og:… format.

Meta Tags and The Open Graph Protocol

By default meta tags contain various information about the web page. They are not visible in the webpage, but contain some info about it. The most common meta tags are the title, description and keywords tags. They of course contain the title of the page, not that this can be different from the <title> tag, a short description of the page and some keywords describing the content of the page. They are well known also because the search engines make use of them when trying to collect information about the page and the process of SEO passes through it.

However the default HTML meta tags cannot contain everything. Thus for example you cannot point the preferable thumbnail for a webpage. The solution is the Open Graph Protocol. It comes with meta tags that can contain more and more valuable info. Such a tag is the og:image meta tag. Note that all the Open Graph (og) meta tags are defined by the og: prefix before the entity name. Thus og:image comes for images, while og:longitude for geo positioning.

That’s really useful, but how you can read them?

PHP, Meta Tags and Regexps

When you try to read information from a webpage source the first possible path is by using regular expressions. However PHP is smart enough to offer you some useful functions. Such a function is get_meta_tags(). As you may guess this method reads the meta tags by given URL.

$a = get_meta_tags('http://vimeo.com/10758212');
var_dump($a);

However this method can’t read Open Graph tags. So finally you’ve to use some regexps.

preg_match('//', $source, $matches);

Now you can grab the og:image tag. And even more – grab every image (<img>) from that page.

preg_match_all('/

Related posts:

How to Sanitize User Input in PHP? 
HTML Tags: <base> 
Automatically Upload Images with PHP Directly from the URI 
Download Images with PHP 


]]>
			/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/feed/
		6
		
		
		
		/2010/03/10/change-the-viewport-be-ready-for-the-iphone/
		/2010/03/10/change-the-viewport-be-ready-for-the-iphone/#comments
		Wed, 10 Mar 2010 15:07:08 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=1247
		Continue reading Change the Viewport, be Ready for the iPhone! →


Related posts:

Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites 
PHP: Mobile Devices HTTP_USER_AGENT Strings 
Speed up the JavaScript. It can change dramatically the user experience. 
HTML Tags: <base> 


]]>
				Sites for mobile
Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.
This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.

How to make a site visible in mobile …
Look at the http://mobile.twitter.com/ – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.
You can see how it’s made on …
The digg’s mobile version. Look at http://m.digg.com/. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!
Don’t scale my site anymore:
<html>
 <head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 </head>
...
</html>

Related posts:

Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites 
PHP: Mobile Devices HTTP_USER_AGENT Strings 
Speed up the JavaScript. It can change dramatically the user experience. 
HTML Tags: <base> 


]]>
			/2010/03/10/change-the-viewport-be-ready-for-the-iphone/feed/
		4