srtfisher/open-graph-protocol-tools

Open Graph Protocol Helper 工具用于构建元标签

0.1 2013-08-15 21:28 UTC

This package is auto-updated.

Last update: 2024-08-25 07:19:03 UTC


README

Open Graph protocol

Open Graph protocol 通过在HTML中的<meta>元素中包含键值对来增强与网页相关的信息。这些额外的数据被社交分享站点消费,用于填充共享链接和社会图谱中引用的对象的故事预览。

此项目包含工具,用于在您的网页上生成Open Graph协议标记之前验证和清理输入。该项目通过消费代理标准化输出,我们也让您消费远程页面并尝试解析其中的Open Graph标签。

消费代理

Facebook

Facebook 指数化 Open Graph protocol 标记,这些标记出现在成员的社会新闻源中共享的页面上。此标记还增强了由Like按钮社交插件Facebook Share生成的社会新闻源故事。

Open Graph protocol 标记将网页转换为Facebook社交图中的对象,增加了搜索曝光率,并在社交新闻源中独特地分类您的网站和故事类型。

Facebook Object Debugger 显示Facebook对您的网站Open Graph协议内容的解释。

mixi Check

Mixi 指数化 Open Graph protocol 标记在其mixi Check社交分享服务中。

Google+ Snippet

Google 指数化 Open Graph protocol 标记以填充Google+活动帖子。

结构

应用程序包含Open Graph协议中的许多核心对象。它们都位于OpenGraph命名空间下。

对象:

  • OpenGraph\Objects\Article
  • OpenGraph\Objects\Book
  • OpenGraph\Objects\Profile
  • OpenGraph\Objects\Video

媒体:

  • OpenGraph\Media\Audio
  • OpenGraph\Media\Image
  • OpenGraph\Media\Video

核心Open Graph协议

支持图像、视频和音频对象的结构化属性。

<?php
$image = new OpenGraph\Media\Image();
$image->setURL( 'http://example.com/image.jpg' );
$image->setSecureURL( 'https://example.com/image.jpg' );
$image->setType( 'image/jpeg' );
$image->setWidth( 400 );
$image->setHeight( 300 );

$video = new OpenGraph\Media\Video();
$video->setURL( 'http://example.com/video.swf' );
$video->setSecureURL( 'https://example.com/video.swf' );
$video->setType( OpenGraphProtocolVideo::extension_to_media_type( pathinfo( parse_url( $video->getURL(), PHP_URL_PATH ), PATHINFO_EXTENSION ) ) );
$video->setWidth( 500 );
$video->setHeight( 400 );

$audio = new OpenGraph\Media\Audio();
$audio->setURL( 'http://example.com/audio.mp3' );
$audio->setSecureURL( 'https://example.com/audio.mp3' );
$audio->setType('audio/mpeg');
?>

声明一个新的OpenGraphProtocol对象并设置一些属性。添加结构化媒体对象。

<?php
$ogp = new OpenGraph\Manager();
$ogp->setLocale( 'en_US' );
$ogp->setSiteName( 'Happy place' );
$ogp->setTitle( 'Hello world' );
$ogp->setDescription( 'We make the world happy.' );
$ogp->setType( 'website' );
$ogp->setURL( 'http://example.com/' );
$ogp->setDeterminer( 'the' );
$ogp->addImage($image);
$ogp->addAudio($audio);
$ogp->addVideo($video);
?>

将OpenGraphProtocol对象输出为HTML <meta>元素。默认配置使用RDFa的property属性。如果您更喜欢HTML规范兼容性和消费代理支持name属性作为property回退,请将其更改为name

<?php
$ogp->toHTML();
?>

全局对象

构建全局对象和属性。使用ISO 8601格式化的字符串或DateTime对象设置时间值。在输出之前,DateTime将转换为UTC时区以保持一致性。

<?php
$article = new OpenGraph\Objects\Article();
$article->setPublishedTime( '2011-11-03T01:23:45Z' );
$article->setModifiedTime( new DateTime( 'now', new DateTimeZone( 'America/Los_Angeles' ) ) );
$article->setExpirationTime( '2011-12-31T23:59:59+00:00' );
$article->setSection( 'Front page' );
$article->addTag( 'weather' );
$article->addTag( 'football' );
$article->addAuthor( 'http://example.com/author.html' );
?>

将全局对象转换为<meta>元素,就像使用OpenGraphProtocol一样。

<?php
$article->toHTML();
?>

结合

一个常见用例可能是将Open Graph协议对象存储在控制器中,以便您的Web应用程序使用。您可以将每个对象添加到数组中,然后稍后遍历数组以生成<head prefix=""><meta>输出。

<?php
$ogp_objects = array( $ogp, $article );
$prefix = '';
$meta = '';
foreach ( $ogp_objects as $ogp_object ) {
    $prefix .= $ogp_object::PREFIX . ': ' . $ogp_object::NS . ' ';
    $meta .= $ogp_object->toHTML() . PHP_EOL;
}
?>
<head prefix="<?php echo rtrim( $prefix,' ' ); ?>">
<?php echo rtrim( $meta, PHP_EOL ); ?>
</head>

获取

在应用程序中,获取远程页面的内容以获取Open Graph信息可能是一项繁琐的任务。通常,您必须获取一个网页,编写一些正则表达式来从中获取IMG,也许它将工作。让我们解决这个问题。

<?php
// also shown in test.php

// Include Composer Autoloader
include 'vendor/autoload.php';

$fetch = new OpenGraph\Fetcher('http://www.cnn.com/2013/08/15/opinion/bergen-zawahiri-egypt/index.html?hpt=hp_t1');
var_dump($fetch->getKeys());
?>

这将给您一个类似这样的东西

array (size=6)
  'description' => string 'Ayman al-Zawahiri, who has warned against Islamist parties taking part in elections, is emerging as a stronger leader than predicted' (length=132)
  'title' => string 'Al Qaeda leader's 'I told you so' on Egypt' (length=42)
  'type' => string 'article' (length=7)
  'url' => string 'http://www.cnn.com/2013/08/15/opinion/bergen-zawahiri-egypt/index.html' (length=70)
  'site_name' => string 'CNN' (length=3)
  'image' => string 'http://i2.cdn.turner.com/cnn/dam/assets/130815122452-08-egypt-0815-story-top.jpg' (length=80)

我们正在寻找进一步改进它的方法(如果在页面内容中未指定og:image,则在页面中找到一张图片)。请保持关注。