CODEWITHSUNDEEP
htmlfacebookimagehyperlink
mike
mike

Reputation: 23821

Specify facebook image for github.io hosted site

Using the answers to this question, I've implemented the following approaches to specifying an image to appear on facebook with a link, but it does not appear:

<head>
<meta property="og:image" content="lib/divvy.png">
<link rel="image_src" href="lib/divvy.png">
</head>

Is there a reason why this wouldn't work with github hosted sites (or a .png file)? This is the page I'm trying to share:

http://mkfreeman.github.io/divvy/

Upvotes: 2

Views: 1071

Answers (3)

CharlesW
CharlesW

Reputation: 1072

Updating to today:

Put the extra HEAD lines of HTML in the file _includes/custom-head.html in your github root directory.

The path to a raw image in your repo is:

https://raw.githubusercontent.com/yourname/reponame/master/path_to_image.jpg

And the debugging url for facebook is now:

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

Upvotes: 0

Jun
Jun

Reputation: 3044

You have to specify the absolute path to the image. You will know if it works when the url path of the image will be displayed as an image on a browser instead of a github blob object.

https://github.com/mkfreeman/divvy/blob/master/lib/divvy.png

I found out from what Mike has implemented. 

http://mfviz.com/divvy/lib/divvy.png

Upvotes: 4

Tobi
Tobi

Reputation: 31479

You can use the Open Graph Debugger for this:

https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmkfreeman.github.io%2Fdivvy%2F

It returns:

Open Graph Warnings That Should Be Fixed  
Inferred Property   The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags. 
Inferred Property   The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.

See also the hints from FB towards Open Graph sharing and optimized distribution here: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#tags

Upvotes: 3

Related Questions