Wie haben sie es geschafft, dass, wenn man einen youtube-Link in "Was machst du gerade?" einfügt, unter Links das youtube-Bild + Titel + Beschreibung erscheint? Ein Beispiel dafür wäre toll!
Antworten
Zu viele Anzeigen?Die Erkennung in Facebook funktioniert für die meisten Links, und nicht nur für die Top-Links wie YouTube. Ich vermute also, dass sie versuchen, herauszufinden, ob die Seite einen Link zu einer alternativen Darstellung wie einem Feed enthält. Wenn sie diesen Link finden, rufen sie den Inhalt des Feeds ab. Feed-Formate sind meist standardisierte RSS- oder Atom-Formate und haben klar identifizierbare Eigenschaften wie title
, thumbnail
, description
, usw.
Nehmen wir also an, Sie hätten einen YouTube-Video-Link wie http://www.youtube.com/watch?v=0Mz4NTozNXw . In seinem Quelltext enthält er die folgenden Links mit alternativen Darstellungen, die die erforderlichen Metadaten liefern können:
<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D0Mz4NTozNXw&format=json" title="Crispy Onion Rings Recipe - How to Make Crispy Onion Rings" />
<link rel="alternate" type="text/xml+oembed" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D0Mz4NTozNXw&format=xml" title="Crispy Onion Rings Recipe - How to Make Crispy Onion Rings" />
Wenn wir den Inhalt des Links mit type="text/xml+oembed"
erhalten wir das folgende XML zurück:
<oembed>
<provider_url>http://www.youtube.com/</provider_url>
<title>Crispy Onion Rings Recipe - How to Make Crispy Onion Rings</title>
<html><object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/0Mz4NTozNXw&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/0Mz4NTozNXw&fs=1" type="application/x-shockwave-flash" width="480" height="295" allowscriptaccess="always" allowfullscreen="true"></embed></object></html>
<author_name>foodwishes</author_name>
<height>295</height>
<thumbnail_width>480</thumbnail_width>
<width>480</width>
<version>1.0</version>
<author_url>http://www.youtube.com/user/foodwishes</author_url>
<provider_name>YouTube</provider_name>
<thumbnail_url>http://i1.ytimg.com/vi/0Mz4NTozNXw/hqdefault.jpg</thumbnail_url>
<type>video</type>
<thumbnail_height>360</thumbnail_height>
</oembed>
Daraus können Sie die Informationen zum Titel und zur Miniaturansicht erhalten, die dann dem Endbenutzer angezeigt werden können. Dieser Ansatz ist allgemein genug, um die meisten Online-Links verarbeiten zu können. Führen Sie einen Katalog von Link-Typen, die Sie unterstützen, wie zum Beispiel:
application/atom+xml
application/rss+xml
application/json+oembed
application/json+oembed
...
Prüfen Sie, ob einer der Links auf der Seite den von Ihnen unterstützten Typen entspricht. Wenn dies der Fall ist, folgen Sie diesem Link und holen Sie sich die erforderlichen Informationen. Die Kenntnis des Typ-Attributs gibt Ihnen Informationen über das zu erwartende Format für das Parsing im Voraus.
Eine Möglichkeit, dies zu tun, ist die Verwendung der Youtube Data API ( http://code.google.com/apis/youtube/2.0/developers_guide_protocol_video_entries.html ).
Sie senden die Video-ID, die sich im Link zu einem Video befindet, an die API, und diese gibt alle benötigten Daten in einem xml/JSON-Format zurück, je nachdem, was Sie in der URL angeben.
Beispiel:
Wenn Sie den Video-Link erhalten haben http://www.youtube.com/watch?v=NWHfY_lvKIQ Sie können alle Informationen über das Video über diesen Link abrufen, http://gdata.youtube.com/feeds/api/videos/NWHfY_lvKIQ . Die zurückgegebenen Daten enthalten alle Informationen über das Video, einschließlich des Titels, der Beschreibung und einer Miniaturansicht.