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

micro tutorial, PHP, web development, , , , , , , , , , , , , , , , , ,

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.

Facebook Attach a Link Prompt Screen
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.

Facebook Attached Link Screen
fig. 2 - Facebook Attached Link Screen

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

<meta property="og:image" content="http://b.vimeocdn.com/ts/572/975/57297584_200.jpg" />

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

Vimeo Thumb
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. Continue reading How to Collect the Images and Meta Tags from a Webpage with PHP →

Adding a Custom Button to TinyMCE – REVISED

javascript, micro tutorial, , ,

Driven by the comment of Afraithe I have to apologize about the yesterday’s post. Here’s a much much simpler, cleaner way do add a custom button to TinyMCE.

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});
</script>
 
<form method="post" action="somepage">
        <textarea name="content" style="width:100%">
        </textarea>
</form>

The Problem

There is only one problem – I still cannot find easily the section of the site in TinyMCE. So I’m supposed to click on the comment’s link. This is a pity and perhaps that’s why I couldn’t find it before. Moxiecode should make this section more accessible!

Adding a Custom Button to TinyMCE

javascript, micro tutorial, , , , , , , , , , , , , , ,

TinyMCE

First thing to say TinyMCE is a very popular WYSIWYG online based editor. It’s very widely used in the web, as may already know it it’s part of the default WordPress installation. Out of the web, of course, there are some other editors as well. The most used and well developed projects are the Yahoo!’s YUI 2 Rich Text Editor and CKEditor also known with his past name – FCKEditor.TinyMCE Full Featured Example

Before I proceed with this post, let me say that I’m working and this tutorial is based on version 3.1.1 released on 18 Aug 2008. Continue reading Adding a Custom Button to TinyMCE →

From SVG to Geo Coordinates – A Complete Guide

micro tutorial, PHP, web development, , , , , , , , , , , , , , ,

Why This Task Is Not Trivial?

First of all what do we have? There is a vector shape, which may represent a map, which we’d like to convert into a GEO map. In other words there is a SVG file containing the source shape, that you’d like to convert in geoJSON or whatever collection of geo points. This is not trivial, of course, first of all because there’s no an algorithm or automation that can do this, and because everybody knows that the resulting map will be only approached, but will never be so accurate as the vector shape. This is because in a vector shape you may contain Bézier Curves, which I’ll show a little bit later in this post, that are difficult to represent in geo coordinates.

So the first task will be to find an approaching algorithm. However there are two things that are optimistic:

  1. You can’t effectively represent Bézier curves in geo coordinates, but even if you could do it there’s no practical need, because the collection of geo coordinates will be huge and this will slow down you’re application. Remember that geoJSON is yet again possibly used by your browser and the amount of geo points will be proportionally slowing down the app.
  2. As you may know Google’s visualization map is representing the World’s countries again with quite approached maps. Take a look at the following image – the country borders are quite sharpened:

Google Visualization Map

So far we know that we need an approaching algorithm that will convert vector lines and possibly curves in geo coordinates, but before we proceed we’ve to understand the SVG format. Continue reading From SVG to Geo Coordinates – A Complete Guide →

Wanted – onfocus/onblur. Why They Don’t Work Always!

javascript, web development, , , , , , , , ,

On Focus

onfocus

Perhaps you think of onfocus and onblur events as a default behavior existing in any web page. This is not quite true! Onfocurs and onblur are well known in web developing (js) and are fired, of course, when the user tries to point something or leaves some element. Onfocurs is fired when the user either goes to an element with the Tab button on with the mouse. When the element is on focus, evidently, the onfocus event is fired. Actually you can see which element is on focus, like an anchor or input, when the element is outlined by the browser by default. In the same scenario, when some element has been on focus and than the user switches to another element, the onblur event is fired. Thus you may guess that this element is no longer on focus. Continue reading Wanted – onfocus/onblur. Why They Don’t Work Always! →