history of facebook open graph and twitter cards

36
Facebook Open Graph & Twitter Cards A Look Back and Forth SMX East 2014 Your Internet Marketing Department

Upload: halyard-consulting

Post on 22-Nov-2014

303 views

Category:

Marketing


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

Page 1: History of Facebook Open Graph and Twitter Cards

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

Your Internet Marketing Department

Page 2: History of Facebook Open Graph and Twitter Cards

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

Page 3: History of Facebook Open Graph and Twitter Cards

Social Sharing Using Open Graph

Your Internet Marketing Department

Page 4: History of Facebook Open Graph and Twitter Cards

Like Button

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

Your Internet Marketing Department

Page 5: History of Facebook Open Graph and Twitter Cards

Embedded Posts

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

Your Internet Marketing Department

Page 6: History of Facebook Open Graph and Twitter Cards

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

Page 7: History of Facebook Open Graph and Twitter Cards

Send Button

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

Your Internet Marketing Department

Page 8: History of Facebook Open Graph and Twitter Cards

Activity Feed

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

Your Internet Marketing Department

Page 9: History of Facebook Open Graph and Twitter Cards

Like Box

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

Your Internet Marketing Department

Page 10: History of Facebook Open Graph and Twitter Cards

Share Button

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

Your Internet Marketing Department

Page 11: History of Facebook Open Graph and Twitter Cards

Comments

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

Your Internet Marketing Department

Page 12: History of Facebook Open Graph and Twitter Cards

Follow Button

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

Your Internet Marketing Department

Page 13: History of Facebook Open Graph and Twitter Cards

Recommendation Feed

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

Your Internet Marketing Department

Page 14: History of Facebook Open Graph and Twitter Cards

Facepile

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

Your Internet Marketing Department

Page 15: History of Facebook Open Graph and Twitter Cards

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

Page 16: History of Facebook Open Graph and Twitter Cards

Preparing Your Site for Open Graph

Your Internet Marketing Department

Page 17: History of Facebook Open Graph and Twitter Cards

Basic Open Graph Tags

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

Your Internet Marketing Department

Page 18: History of Facebook Open Graph and Twitter Cards

Additional Open Graph TagsYour Internet Marketing Department

Page 19: History of Facebook Open Graph and Twitter Cards

Facebook Debugger

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

Your Internet Marketing Department

Page 20: History of Facebook Open Graph and Twitter Cards

Building Open Graph Apps

Your Internet Marketing Department

Page 21: History of Facebook Open Graph and Twitter Cards

Graph API ExplorerYour Internet Marketing Department

Page 22: History of Facebook Open Graph and Twitter Cards

The Search WarDid Facebook Already Win?

Your Internet Marketing Department

Page 23: History of Facebook Open Graph and Twitter Cards

Open Graph vs Knowledge Graph

Is this

actually better than this

Your Internet Marketing Department

Page 24: History of Facebook Open Graph and Twitter Cards

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

Page 25: History of Facebook Open Graph and Twitter Cards

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

Page 26: History of Facebook Open Graph and Twitter Cards

Social Sharing Using Twitter Cards

Page 27: History of Facebook Open Graph and Twitter Cards

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

Page 28: History of Facebook Open Graph and Twitter Cards

Summary Card with Large Image

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

Page 29: History of Facebook Open Graph and Twitter Cards

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

Page 30: History of Facebook Open Graph and Twitter Cards

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">

Page 31: History of Facebook Open Graph and Twitter Cards

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">

Page 32: History of Facebook Open Graph and Twitter Cards

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">

Page 33: History of Facebook Open Graph and Twitter Cards

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">

Page 34: History of Facebook Open Graph and Twitter Cards

Preparing Your Site forTwitter Cards

Page 35: History of Facebook Open Graph and Twitter 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">

Page 36: History of Facebook Open Graph and Twitter Cards

Thank You!

WORKPhone: 800-641-9157

Email: [email protected]: halyardconsulting.com

Twitter: @HalyardConsultFacebook: HalyardConsulting

YouTube: HalyardConsultSlideShare: HalyardConsulting

HOBBYTwitter: @AllURLivingNeed

YouTube Channel: AllURLivingNeeds

Your Internet Marketing Department

Your Internet Marketing Department