History of Facebook Open Graph and Twitter Cards

Post on 22-Nov-2014

303 views 0 download

description

This is the presentation I was supposed to give at SMX East 2014 but unfortunately due to unforeseen circumstances I had to back out at the last minute. The presentation focuses on the History of Facebook Open Graph and Twitter Cards.

Transcript of History of Facebook Open Graph and Twitter Cards

Facebook Open Graph & Twitter CardsA Look Back and Forth SMX East 2014

Your Internet Marketing Department

Jonathan Edward Goodman

● President of Halyard Consulting, an Internet marketing and public relations firm, located in New Jersey. The company was established in 2007 to provide entrepreneurs and small businesses with services allowing them to leverage online tactics often used by Fortune 500 companies.

● The author of the book series and podcast host of The World of Internet Marketing.

● Host of the YouTube Channel All Your Living Needs making predictions on EPL & MLS soccer matches.

Your Internet Marketing Department

Social Sharing Using Open Graph

Your Internet Marketing Department

Like Button

https://developers.facebook.com/docs/plugins/like-button

Your Internet Marketing Department

Embedded Posts

https://developers.facebook.com/docs/plugins/embedded-posts

Your Internet Marketing Department

Embedded Post Case Study:All Your Living Needs

● Goal: Increase Brand Awareness● Spend: $100● Ad Cycle: July 20th to Sept 3rd● Demographic:

● 18 - 24 Men● Interest: Major League Soccer

● Result:● Clicks = 995

● Clicks are the total number of clicks on your ad.

● Actions = 673● Actions include Page likes, app installs, conversions,

etc.

● Click Through Rate = 8.265%● Avg. Cost Per Thousand = $8.63● Avg. Cost Per Click = $0.10

Send Button

https://developers.facebook.com/docs/plugins/send-button

Your Internet Marketing Department

Activity Feed

https://developers.facebook.com/docs/plugins/activity

Your Internet Marketing Department

Like Box

https://developers.facebook.com/docs/plugins/like-box-for-pages

Your Internet Marketing Department

Share Button

https://developers.facebook.com/docs/plugins/share-button

Your Internet Marketing Department

Comments

https://developers.facebook.com/docs/plugins/comments

Your Internet Marketing Department

Follow Button

https://developers.facebook.com/docs/plugins/follow-button

Your Internet Marketing Department

Recommendation Feed

https://developers.facebook.com/docs/plugins/recommendations

Your Internet Marketing Department

Facepile

https://developers.facebook.com/docs/plugins/facepile

Your Internet Marketing Department

Facebook Login

The Most Important of All Facebook Plugins● Users Decide which apps Share with their friends.● Login to favorite apps with no additional username or

password.● Login accesses personal Facebook information

providing a more social and personalized experience.

Your Internet Marketing Department

Preparing Your Site for Open Graph

Your Internet Marketing Department

Basic Open Graph Tags

https://developers.facebook.com/docs/plugins/checklist

Your Internet Marketing Department

Additional Open Graph TagsYour Internet Marketing Department

Facebook Debugger

https://developers.facebook.com/tools/debug

Your Internet Marketing Department

Building Open Graph Apps

Your Internet Marketing Department

Graph API ExplorerYour Internet Marketing Department

The Search WarDid Facebook Already Win?

Your Internet Marketing Department

Open Graph vs Knowledge Graph

Is this

actually better than this

Your Internet Marketing Department

Let’s Compare

Google SearchAbout- Actor- Born Date, Cambridge, United Kingdom

- Height: 5' 7" (1.70 m)

- Spouse

- Sheila Sim (m. 1945)

Siblings

- David Attenborough

- John Attenborough

- Irene Bejach

- Helga Bejach

Awards: Academy Award for Best Picture,

Movies

Facebook SearchAbout Richard Attenborough- Actor- Film Director- Film Producer- Parents - Frederick (Teacher)- Children - Michael- Born in Cambridge, United Kingdom- Nationality England

Richard Attenborough in Movies- Acted In- Directed

Related Pages

Related Groups

Your Internet Marketing Department

One to OneConversations

Open Graph SearchPeople named "evan" who live in New York, New

York and work at The New York Times

Knowledge Graph SearchEvan Sandhaus

Your Internet Marketing Department

Social Sharing Using Twitter Cards

Summary Card<meta property="twitter:card" content="summary" />

Summary Card with Large Image

<meta name="twitter:card" content="summary_large_image">

Photo Card<meta property="twitter:card" content="photo" />

Gallery Card

<meta name="twitter:card" content="gallery" />

<meta name="twitter:image0" content="http://www.example.com/image1.jpg"><meta name="twitter:image1" content="http://www.example.com/image2.jpg"><meta name="twitter:image2" content="http://www.example.com/image3.jpg"><meta name="twitter:image3" content="http://www.example.com/image4.jpg">

App Card

<meta name="twitter:card" content="app">

<meta name="twitter:app:country" content="US"><meta name="twitter:app:name:iphone" content="Example App"><meta name="twitter:app:id:iphone" content="306934135"><meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"><meta name="twitter:app:name:ipad" content="Example App"><meta name="twitter:app:id:ipad" content="306934135"><meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"><meta name="twitter:app:name:googleplay" content="Example App"><meta name="twitter:app:id:googleplay" content="com.example.app"><meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef">

Player Card

<meta name="twitter:card" content="player">

<meta name="twitter:player" content="HTTPS URL"><meta name="twitter:player:width" content="Width of IFRAME"><meta name="twitter:player:height" content="Height of IFRAME"><meta name="twitter:image" content="If platform doesn’t support iframes"><meta name="twitter:player:stream" content="URL to raw stream"><meta name="twitter:player:stream:content_type" content="The MIME type/subtype describing the content">

Product Card

<meta name="twitter:card" content="product">

<meta name="twitter:data1" content="Label Value = Price, Stock, Sizes, etc"><meta name="twitter:label1" content="Data Type = Price, Stock, Sizes, etc">

Preparing Your Site forTwitter Cards

Card Tags

● If you're already using Open Graph you don’t need to duplicating your tags for Twitter Card.● However there are some minor enhancements you get by adding Twitter Cards data.● Only one card per-page is currently supported.

<meta name="twitter:card" content="summary">// content type choices = summary, photo, gallery, product, app, player

<meta name="twitter:site" content="@AllURLivingNeed">// @username for the website used in the card footer.

<meta name="twitter:creator" content="@johnoed">// @username for the content creator or author.

The Rest is All Open Graph:<meta property="og:url" content="http://allyourlivingneeds.com/colorado-rapids-vs-portland-timbers/"><meta property="og:title" content="Colorado Rapids vs Portland Timbers"><meta property="og:description" content="The Colorado Rapids face off against the Portland Timbers today Saturday September 6th"><meta property="og:image" content="http://allyourlivingneeds.com/images/teams/colorado-portland.jpg">

Thank You!

WORKPhone: 800-641-9157

Email: jgoodman@halyardconsulting.comWebsite: halyardconsulting.com

Twitter: @HalyardConsultFacebook: HalyardConsulting

YouTube: HalyardConsultSlideShare: HalyardConsulting

HOBBYTwitter: @AllURLivingNeed

YouTube Channel: AllURLivingNeeds

Your Internet Marketing Department

Your Internet Marketing Department