How to Collect the Images and Meta Tags from a Webpage with PHP

Stoimen — Fri, 25 Feb 2011 09:23:50 +0000

Meta Tags and the Facebook Example

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.

fig. 1 - Facebook Attach a Link Prompt Screen

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.

fig. 2 - Facebook Attached Link Screen

Facebook prefers for the thumb the image set into the . 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).

fig. 3 - Vimeo Thumb

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 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.</p> <p>However the <a title="Default HTML Meta Tags Specification" href="http://www.w3schools.com/tags/tag_meta.asp" target="_blank">default HTML meta tags</a> cannot contain everything. Thus for example you cannot point the preferable thumbnail for a webpage. The solution is the <a title="The Open Graph Protocol Homepage" href="http://ogp.me/" target="_blank">Open Graph Protocol</a>. 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.</p> <p>That’s really useful, but how you can read them?</p> <h2>PHP, Meta Tags and Regexps</h2> <p>When you try to read information from a webpage source the first possible path is by using <a title="Regular Expressions Explained on Wikipedia" href="http://en.wikipedia.org/wiki/Regular_expression" target="_blank">regular expressions</a>. However PHP is smart enough to offer you some useful functions. Such a function is <a title="PHP get_meta_tags Function Documentation" href="http://php.net/manual/en/function.get-meta-tags.php" target="_blank">get_meta_tags()</a>. As you may guess this method reads the meta tags by given URL.</p> <pre lang="php" escaped="true"> $a = get_meta_tags('http://vimeo.com/10758212'); var_dump($a); </pre> <p>However this method can’t read Open Graph tags. So finally you’ve to use some regexps.</p> <pre lang="php" escaped="true"> preg_match('/<meta property="og:image" content="(.*?)" \/>/', $source, $matches); </pre> <p>Now you can grab the og:image tag. And even more – grab every image () from that page.</p> <pre lang="php" escaped="true"> preg_match_all('/ <div class='yarpp-related-rss'> <p>Related posts:<ol> <li><a href="/2010/04/20/how-to-sanitize-user-input-in-php/" rel="bookmark" title="How to Sanitize User Input in PHP?">How to Sanitize User Input in PHP? </a></li> <li><a href="/2010/08/03/html-tags/" rel="bookmark" title="HTML Tags: <base>">HTML Tags: <base> </a></li> <li><a href="/2010/09/10/automatically-upload-images-with-php-directly-from-the-uri/" rel="bookmark" title="Automatically Upload Images with PHP Directly from the URI">Automatically Upload Images with PHP Directly from the URI </a></li> <li><a href="/2011/01/18/download-images-with-php/" rel="bookmark" title="Download Images with PHP">Download Images with PHP </a></li> </ol></p> </div> </article> <article> <h1>HTML Tags: <base></h1> <p>Stoimen — Tue, 03 Aug 2010 12:38:03 +0000</p> <h2>Overview</h2> <p><a href="/wp-content/uploads/2010/08/base.jpg"></a></p> <p>Somehow the <base> tag remains unknown to most of the web developers, but that’s quite normal. However let see what it can do. By adding the <base> tag in the head of the page you tell every link into that page how to open and a default href value. Thus if you have:</p> <pre lang="html4strict"> <base href="/"> </pre> <p>every link without a href attribute will open this link. That’s really useful in some cases. However the most interesting part of the base tag is the target attribute.</p> <h2>target=”_blank”</h2> <p>Everybody knows what will result from this attribute attached to a anchor tag.</p> <pre lang="html4strict"> <a href="http://www.stoimen.com/" target="_blank">Click Here</a> </pre> <p>But with only adding this base tag:</p> <pre lang="html4strict"> <base target="_blank"> </pre> <p>into the head … all the links will open in a new tab/window, depending on the browser preferences.</p> <h2>Watch out!</h2> <p>If you add the line above somewhere into the <body> tag the browser, will put it into the <head> which will make it difficult to track. A good practice is to place it directly into the <head>!</p> <div class='yarpp-related-rss'> <p>Related posts:<ol> <li><a href="/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/" rel="bookmark" title="How to Collect the Images and Meta Tags from a Webpage with PHP">How to Collect the Images and Meta Tags from a Webpage with PHP </a></li> <li><a href="/2009/02/22/html-object-and-embed-tags/" rel="bookmark" title="Html object & embed tags">Html object & embed tags </a></li> <li><a href="/2010/03/10/change-the-viewport-be-ready-for-the-iphone/" rel="bookmark" title="Change the Viewport, be Ready for the iPhone!">Change the Viewport, be Ready for the iPhone! </a></li> <li><a href="/2010/03/11/html-tag-semantics-strong-vs-b/" rel="bookmark" title="HTML Tag Semantics. STRONG vs. B!">HTML Tag Semantics. STRONG vs. B! </a></li> </ol></p> </div> </article> <article> <h1>Bind Zend Action with Non-Default View – Part 2</h1> <p>Stoimen — Wed, 23 Jun 2010 14:26:41 +0000</p> <h2>Typical Setup</h2> <p>Typically <a href="http://framework.zend.com/">Zend Framework</a> is setup to bind every controller’s action to a specific view. The names of the action and the view script must be the same, or at least must be similar – following the ZF’s convention.</p> <p>Thus if you name an action, let’s say, indexAction(), you’ve to create an index.phtml file into the views/scripts/index/ folder. Let me remind you that this is what is called a typical setup, but this may vary from one installation to another.</p> <p>Thus everything’s fine and the MVC does its best. After the user requests a specific uri, the framework parses it and finds the controller, than the action and than the view script – and there is a view script for every single action.</p> <p><a href="/wp-content/uploads/2010/06/typical-zend-framework-setup.jpg"></a></p> <p>When there are two or more actions – there are two or more .phtml (view scripts) files.</p> <p><a href="/wp-content/uploads/2010/06/typical-zend-framework-setup2.jpg"></a></p> <h2>Some Exceptions</h2> <p>Sometimes you have very similar logic, but very different markup between two actions. As the logic goes to the controller/action and the markup into the view, the question is can you simply have one action in the controller, but with two different .phtml file as a view scripts? Of course switching between those two (or more) with some conditionals.</p> <h3>Solution No. 1</h3> <p>However once I posted a simple, and working, <a href="/2010/06/07/bind-zend-action-with-non-default-view/">solution</a>. There you have again two actions and two scripts:</p> <pre lang="php"> <?php class IndexController extends Zend_Controller_Action { public function firstAction() { // place all the logic you need here // and every view placeholder assignment $this->view->title = "My Title"; // if the logic requires a different markup // simply redirect to another view if (some_expression) { $this->_forward('second'); } } public function secondAction() {} } // in the application/views/scripts/index // 1. first.phtml <h1><?php echo $this->title ?></h1> // 2. second.phtml <h2><?php echo $this->title ?></h2> </pre> <p>As you can see in the second action there’s no logic – it’s only serving the role of a bridge between the views. Everything is setup into the first action, but the second action is doing the relation with the second.phtml view script.</p> <h3>Solution No. 2</h3> <p>However there’s another solution with only one action and two scripts which makes something like that shown on the diagram bellow:</p> <p><a href="/wp-content/uploads/2010/06/zend-framework-one-action-multiple-views.jpg"></a></p> <p>The only thing to do is to add some code to your action:</p> <pre lang="php"> <?php class IndexController extends Zend_Controller_Action { public function firstAction() { // place all the logic you need here // and every view placeholder assignment $this->view->title = "My Title"; // if the logic requires a different markup // simply redirect to another view if (some_expression) { echo $this->view->render('index/second.phtml'); $this->_helper->viewRenderer->setNoRender(true); } } } // in the application/views/scripts/index // 1. first.phtml <h1><?php echo $this->title ?></h1> // 2. second.phtml <h2><?php echo $this->title ?></h2> </pre> <p>Note that you’ve to setNoRender on the view renderer once you render the other script!</p> <div class='yarpp-related-rss'> <p>Related posts:<ol> <li><a href="/2010/06/07/bind-zend-action-with-non-default-view/" rel="bookmark" title="Bind Zend Action with Non-Default View">Bind Zend Action with Non-Default View </a></li> <li><a href="/2010/06/24/zend-framework-inject-javascript-code-in-a-actionview/" rel="bookmark" title="Zend Framework: Inject JavaScript Code in a Action/View">Zend Framework: Inject JavaScript Code in a Action/View </a></li> <li><a href="/2010/01/29/escaping-strings-in-a-zend-framework-view-prevent-unclosed-tags/" rel="bookmark" title="Escaping strings in a Zend Framework view. Prevent unclosed tags!">Escaping strings in a Zend Framework view. Prevent unclosed tags! </a></li> <li><a href="/2010/04/27/inline-scripts-with-zend_view_helper_inlinescript/" rel="bookmark" title="Inline Scripts with Zend_View_Helper_InlineScript">Inline Scripts with Zend_View_Helper_InlineScript </a></li> </ol></p> </div> </article> <article> <h1>Change the Viewport, be Ready for the iPhone!</h1> <p>Stoimen — Wed, 10 Mar 2010 15:07:08 +0000</p> <h2>Sites for mobile</h2> <p>Have you ever noticed that once you start designing a site for mobile, as <a title="Apple iPhone" href="http://www.apple.com/iphone/" target="_blank">iPhone</a> and <a title="Nexus One from Google" href="http://www.google.com/phone/" target="_blank">Nexus One</a> from Google are, the site is looking really ugly! These two devices in particular, as may other using <a title="Opera Mini" href="http://www.opera.com/mini/" target="_blank">Opera Mini</a> for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.</p> <p>This is nice because news sites as <a title="CNN" href="http://cnn.com/" target="_blank">cnn.com</a> or <a title="Le Monde France" href="http://lemonde.fr/" target="_blank">lemonde.fr</a> 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.</p> <p><a href="/wp-content/uploads/2010/03/mobile.twitter.png"></a></p> <h2>How to make a site visible in mobile …</h2> <p>Look at the <a title="Mobile Twitter" href="http://mobile.twitter.com/" target="_blank">http://mobile.twitter.com/</a> – 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.</p> <h2>You can see how it’s made on …</h2> <p>The digg’s mobile version. Look at <a title="Digg for mobile" href="http://m.digg.com/" target="_blank">http://m.digg.com/</a>. 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!</p> <p>Don’t scale my site anymore:</p> <pre lang="html4strict" escaped="true"><html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> </head> ... </html></pre> <div class='yarpp-related-rss'> <p>Related posts:<ol> <li><a href="/2010/03/17/stop-coding-iphone-apps-begin-with-html5-mobile-sites/" rel="bookmark" title="Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites">Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites </a></li> <li><a href="/2010/03/22/php-mobile-devices-http_user_agent-strings/" rel="bookmark" title="PHP: Mobile Devices HTTP_USER_AGENT Strings">PHP: Mobile Devices HTTP_USER_AGENT Strings </a></li> <li><a href="/2010/01/31/speed-up-the-javascript-it-can-change-dramatically-the-user-experience/" rel="bookmark" title="Speed up the JavaScript. It can change dramatically the user experience.">Speed up the JavaScript. It can change dramatically the user experience. </a></li> <li><a href="/2010/08/03/html-tags/" rel="bookmark" title="HTML Tags: <base>">HTML Tags: <base> </a></li> </ol></p> </div> </article> <article> <h1>HTML5 video support. Detecting, playing and progressive enhancement!</h1> <p>Stoimen — Fri, 26 Feb 2010 13:31:36 +0000</p> <h2>HTML5 video</h2> <p>HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!</p> <h2>Performance of HTML5 video tag against Flash video players</h2> <p>As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from <a title="ajaxian" href="http://ajaxian.com/" target="_blank">ajaxian.com</a>, where the author points on his turn an interesting <a href="http://ajaxian.com/archives/i-cant-believe-its-not-flash" target="_blank">presentation</a>. Indeed the performance of HTML5 video was way, way better:</p> <p><a href="/wp-content/uploads/2010/02/flashhtml5video.png"></a></p> <p>But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.</p> <p>First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.</p> <h2>Detection and integration</h2> <p>Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.</p> <p>You can find the source <a href="http://camendesign.com/code/video_for_everybody" target="_blank">here.</a></p> <p>Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.</p> <div class='yarpp-related-rss'> <p>Related posts:<ol> <li><a href="/2010/03/04/does-firefox-play-mp4-h-264-within-the-html5-video-tag/" rel="bookmark" title="Does Firefox play mp4 h.264 within the HTML5 video tag?">Does Firefox play mp4 h.264 within the HTML5 video tag? </a></li> <li><a href="/2010/01/23/youtube-and-vimeo-goes-html5-with-video-tag-usage-catch-them-up/" rel="bookmark" title="YouTube and Vimeo goes HTML5 with video tag usage! Catch them up!">YouTube and Vimeo goes HTML5 with video tag usage! Catch them up! </a></li> <li><a href="/2010/03/05/video-sites-must-use-mp4-and-only-mp4/" rel="bookmark" title="Video sites must use … mp4 and only mp4!">Video sites must use … mp4 and only mp4! </a></li> <li><a href="/2011/01/27/few-thoughts-on-web-video/" rel="bookmark" title="Few Thoughts on Web Video">Few Thoughts on Web Video </a></li> </ol></p> </div> </article> <article> <h1>jQuery tooltip plugin!</h1> <p>Stoimen — Tue, 16 Feb 2010 11:43:57 +0000</p> <h2>Tooltips and jQuery</h2> <p>In order to complete the tooltip post series I decided to make a plugin for <a title="jquery" href="http://jquery.com/" target="_blank">jQuery</a> that implements tooltips in the most simple way I was able to find! I have no idea what are the other plugins for tooltips and I never used such plugin, but however I needed one in order to complete my task an suddenly I turn it into a plugin.</p> <p>What I’d like to hear is requests for improvements and bugs reported, just to make the plugin as useful as possible.</p> <p>Let’s start in that post with some primary HTML markup, here are the <a title="jquery tooltip plugin source" href="http://www.stoimen.com/jquery.tooltip.plugin/jquery.tooltip.js" target="_blank">complete source</a> and <a title="jquery tooltip plugin" href="http://www.stoimen.com/jquery.tooltip.plugin/" target="_blank">demo page</a>.</p> <blockquote> <pre><html> <head> <title>jQuery tooltip

A DIV element wrapped in another DIV that's 800 pixels wide and thus defines the bounds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus vulputate arcu in mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla nunc libero, eleifend in imperdiet lacinia, pellentesque eget turpis. Nulla consectetur augue vulputate arcu porta tempus. Mauris nisl risus, fermentum posuere sodales sed, accumsan in massa. Pellentesque facilisis, felis sit amet vulputate egestas, nibh lacus sollicitudin nulla, non commodo nunc elit et eros. Nulla eu placerat mauris. Phasellus sit amet odio nec dui pharetra pulvinar. Nunc sollicitudin, nisl quis interdum consequat, diam dolor condimentum felis, ac porttitor turpis augue nec sapien. Quisque pulvinar nulla ut elit dapibus in tempus ipsum interdum. Pellentesque feugiat tempus tortor, mollis fringilla ligula faucibus nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus ullamcorper lacus. Maecenas at blandit justo. Maecenas adipiscing velit luctus mauris gravida adipiscing. Morbi molestie ipsum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sapien mi, hendrerit sit amet semper ut, condimentum et risus. Nulla facilisi.

When defined over an image the tooltip gets the text into the alt attribute by default

When you attach the .tooltip() method on a link it gets its title attribute for the tooltip by default. Note that you can add more and more links after you attach the .tooltip() method on that class name. This is because the plugin make use of the .live() method of jQuery

Just a link!

And right after that the JavaScript:

HTML element – stoimen's web log

How to Collect the Images and Meta Tags from a Webpage with PHP

Meta Tags and the Facebook Example

Meta Tags and The Open Graph Protocol