Code Monkey home page Code Monkey logo

open-graph-protocol-tools's Introduction

Open Graph protocol

Open Graph protocol

Open Graph protocol enhances information associated with a webpage through key-value pairs included as <meta> elements in your HTML. This additional data is consumed by social sharing sites, populating a story preview for shared links and referenced objects in the social graph.

This project includes tools to validate and sanitize inputs before generating Open Graph protocol markup on your webpages. This project standardizes outputs for easy indexing by consuming agents.

Consuming agents

Facebook

Facebook indexes Open Graph protocol markup found on pages shared in a member's social news feed. This markup also enhances social news feed stories generated by the Like button social plugin and Facebook Share.

Open Graph protocol markup turns webpages into objects within the Facebook social graph, increasing search exposure and uniquely classifying your site and story type within the social news feed.

The Facebook Object Debugger displays a Facebook interpretation of your site's Open Graph protocol content.

mixi Check

Mixi indexes Open Graph protocol markup in its mixi Check social sharing service.

Google+ Snippet

Google indexes Open Graph protocol markup to populate a Google+ activity post.

Sample code

Core Open Graph protocol

Support for structured properties for image, video, and audio objects.

<?php
$image = new OpenGraphProtocolImage();
$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 OpenGraphProtocolVideo();
$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 OpenGraphProtocolAudio();
$audio->setURL( 'http://example.com/audio.mp3' );
$audio->setSecureURL( 'https://example.com/audio.mp3' );
$audio->setType('audio/mpeg');
?>

Declare a new OpenGraphProtocol object and set some properties. Add structured media objects.

<?php
$ogp = new OpenGraphProtocol();
$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);
?>

Output your OpenGraphProtocol object as HTML <meta> elements. Default configuration uses the property attribute from RDFa. Change to name if you prefer HTML specification compliance and consuming agents support the name attribute as a property fallback.

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

Global objects

Build global objects and attributes. Set time values using either an ISO 8601 formatted string or a DateTime object. DateTimes will be converted to the UTC timezone before output for consistency.

<?php
$article = new OpenGraphProtocolArticle();
$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' );
?>

Convert a global object to <meta> elements just as you would with OpenGraphProtocol.

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

Combined

A common use case might be storing Open Graph protocol objects in a Controller for use by your web application. You can add each object to an array and later iterate through the array for <head prefix=""> and <meta> outputs.

<?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-protocol-tools's People

Contributors

erunion avatar niallkennedy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.