Open Graph & Twitter Cards: Thumbnail picture when i share my hype link on Facebook?


(james koh) #1

how do i make a thumbnail picture to appear on Facebook?


Facebook Link Image
#2

Here’s a generator for that code http://www.metataggenerator.org/open-graph-meta-tags/


(james koh) #3

@Daniel thank you always~


#4

Here’s example code (that we use on http://tumult.com/hype/pro)

<meta property="og:title" content="Introducing Hype Professional" />
<meta property="og:type" content="product" />
<meta property="og:image" content="http://tumult.com/hype/media/HypePro01.jpg" />
<meta property="fb:admins" content="10238205,13739734" />
<meta property="og:description" content="Tumult Hype Professional is the most advanced app for creating stunning animated and interactive HTML5 content. Documents made with Tumult Hype work on desktops, smartphones and iPads. No coding required." />
<meta property="og:email" content="contact@tumult.com" />
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="hypeapp">
<meta name="twitter:title" content="Introducing Tumult Hype Professional">
<meta name="twitter:description" content="Tumult Hype Professional is the most advanced app for creating stunning animated and interactive HTML5 content. Documents made with Tumult Hype work on desktops, smartphones and iPads. No coding required.">
<meta name="twitter:image:src" content="http://tumult.com/hype/media/HypePro01.jpg">
<meta name="twitter:player" content="https://www.youtube.com/embed/lfbO_reb5Xw">
<meta name="twitter:player:width" content="640">
<meta name="twitter:player:height" content="360">
<meta name="twitter:url" content="http://tumult.com/hype/pro/" />

Here’s info about Facebook and Twitter meta tags:

https://developers.facebook.com/docs/sharing/best-practices#tags & https://dev.twitter.com/cards/overview


(Gabriel) #5

hi, Daniel.

I cannot make it work for my page :frowning:

Twitter seems to work fine with text but not with the image. I don’t know why but it’s not even showing up when I go to the correct link. eg: www.test.com/test.hyperesources/image.png

Facebook doesn’t work at all. I’m using their Debugger tool and it can’t find any property at all.

Any tips?

Thanks!!


(Olof Pock) #6

what is the debugging tool saying about? in my case i had to put the image outside the hyperesources folder as you can see in my example. same domain is also important. never tried twitter.

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<meta property="og:title" content="Interactive: Euro 2016" />
	<meta property="og:description" content="Who plays who at Euro 2016? Who are the stars? What do the stadiums look like? Everything you need to known about the teams, stadiums and the schedule can be found here."/>
	<meta property="og:url" content="http://dw.com/flashes/html5/em16schedule_br/em16schedule_br.html" />
	<meta property="og:image" content="http://dw.com/flashes/html5/em16schedule_br/UEFA-EURO-Infografik-Teaser_facebook.png" />
	<meta property="og:image:type" content="image/png" />
	<meta property="og:image:width" content="1024" />
	<meta property="og:image:height" content="576" />
	<meta property="og:site_name" content="DW.COM">
	<title>Interactive: Euro 2016</title>

(Gabriel) #7

After all it was just FB cache :sweat_smile: