Facebook Open Graph Protocol on Tumblr - facebook

When a link from my Tumblr blog is posted on Facebook, Facebook grabs the title between the title tags and not the one specified in the Open Graph meta tags. Why is it doing this? Is there any way to fix it?

Without seeing the code, I'm not sure what you're problem is exactly, but for anyone else searching for this looking for how to set up Open Graph on their blog, try doing something like this:
<!-- FACEBOOK OPEN GRAPH -->
<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<meta property="og:site_name" content="{Title}"/>
{block:PermalinkPage}
<meta property="og:url" content="{Permalink}"/>
<meta property="og:type" content="article"/>
{block:Posts}
{block:Text}
{block:Title}<meta property="og:title" content="{PlaintextTitle}"/>{/block:Title}
<meta property="og:description" content="{PlaintextBody}"/>
{/block:Text}
{block:Photo}
<meta property="og:image" content="{PhotoURL-500}"/>
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}
{block:Photoset}
{block:Photos}
<meta property="og:image" content="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photoset}
{block:Quote}
<meta property="og:title" content="{PlaintextQuote}"/>
<meta property="og:description" content="{PlaintextSource}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Quote}
{block:Link}
<meta property="og:title" content="{PlaintextName}"/>
<meta property="og:description" content="{PlaintextDescription}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Link}
{block:Chat}
<meta property="og:title" content="{PlaintextTitle}"/>
<meta property="og:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Chat}
{block:Audio}
<meta property="og:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
<meta property="og:description" content="{PlaintextCaption}"/>
{block:AlbumArt}<meta property="og:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
{/block:Audio}
{block:Video}
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Video}
{block:Answer}
<meta property="og:title" content="{PlaintextQuestion}"/>
<meta property="og:description" content="{PlaintextAnswer}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Answer}
{/block:Posts}
{/block:PermalinkPage}
{block:IndexPage}
<meta property="og:title" content="{Title}"/>
<meta property="og:type" content="blog"/>
<meta property="og:description" content="{MetaDescription}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:IndexPage}
Should cover just about anything you can through at it!
Remember that all of the code belongs before the closing </head> tag.

Related

Facebook OG Meta set by PHP not Being recognized

We have a website with facebook share, so we are setting OG tags by php
LINK
https://ph.mosaique.life/AizelleJoe/Goodpaying-Job-in-Japan-for-Filipinos
FACEBOOK DEBUG TOOL
https://developers.facebook.com/tools/debug/echo/?q=http%3A%2F%2Fph.mosaique.life%2FAizelleJoe%2FGoodpaying-Job-in-Japan-for-Filipinos
My issue is on our site the OG tags have content
<meta property="og:url" content="https://ph.mosaique.life/Goodpaying-Job-in-Japan-for-Filipinos" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Good-paying Job in Japan for Filipinos" />
<meta property="og:description" content="If you are searching for a job not so miles away from the Philippines, Japan may be the best choice. " />
<meta property="og:image" content="https://mosaique.life/uploads/user-19/20181003084830572.png" />
<meta property="og:image:secure_url " content="https://mosaique.life/uploads/user-19/20181003084830572.png" />
<meta property="og:image:alt" content="Good-paying Job in Japan for Filipinos" />
but when we use Facebook tool is is all empty
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:image:secure_url " content="">
<meta property="og:image:alt" content="">

save button showing on facebook share

We are using this example to share content on facebook.
http://flowplayer.blacktrash.org/fbshare.html
But when we are sharing as per example its showing a save button on share dialog. Please tell us how we can remove this.
<meta name="medium" content="video">
<meta name="title" content="Flowplayer Demo Video">
<meta name="description" content=
"This Flowplayer demo video is coming from a page providing only the most minimal content to share a video on Facebook with Flowplayer.">
<meta name="video_type" content="application/x-shockwave-flash">
<meta name="video_height" content="300">
<meta name="video_width" content="500">
<link rel="video_src" href=
"http://flowplayer.blacktrash.org/flowplayer-3.2.18.swf?config=%7B%27clip%27%3A%7B%27url%27%3A%27http%3A%2F%2Fstream.flowplayer.org%2Fflowplayer-700.flv%27%7D%7D">
<link rel="image_src" href="http://flowplayer.org/img/home/flow_eye.jpg">
<meta property="og:url" content="http://flowplayer.blacktrash.org/fbshare.html">
<meta property="og:site_name" content="Flowplayer Demos">
<meta property="og:type" content="movie">
<meta property="og:title" content="Flowplayer Demo Video">
<meta property="og:description" content=
"This Flowplayer demo video is coming from a page providing only the most minimal content to share a video on Facebook with Flowplayer.">
<meta property="og:video:height" content="300">
<meta property="og:video:width" content="500">
<meta property="og:image" content="http://flowplayer.org/img/home/flow_eye.jpg">
<meta property="og:image:secure_url" content=
"https://d12zt1n3pd4xhr.cloudfront.net/fp/img/flow_eye.jpg">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content=
"http://flowplayer.blacktrash.org/flowplayer-3.2.18.swf?config=%7B%27clip%27%3A%7B%27url%27%3A%27http%3A%2F%2Fstream.flowplayer.org%2Fflowplayer-700.flv%27%7D%7D">
<meta property="og:video:secure_url" content=
"https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer-3.2.18.swf?config=%7B%27clip%27%3A%7B%27url%27%3A%27https%3A%2F%2Fd12zt1n3pd4xhr.cloudfront.net%2Ffp%2Fflowplayer-700.flv%27%7D%7D">

Face book video share

i am trying to share video, but somehow i am not able to share it
i can only see image, title description but not video
following is the meta tag i have use
<meta property="fb:app_id" content="xxxxx-fb id-xxx">
<meta property="og:url" content="http://example.com/fbshare.php">
<meta property="og:title" content="meta title">
<meta property="og:description" content="meta desc...">
<meta property="og:type" content="video">
<meta property="og:image" content="http:path to image/example.jpg">
<meta property="og:video" content="http://example.com/example.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="398">
<meta property="og:video:height" content="224">
<meta property="og:site_name" content="example">
let me know what things i have to set or update it

OG tags are not parsed into scraper

I'd like to post articles from my site onto my timeline, however somewhere along the line the metatags are emptied. For example:
http://www.uisge-beatha.eu/logboek/401/Verbouwing-koelbox-3.html
If I look at the source of the site I see the following OG-tags
<link rel="canonical" href="http://www.uisge-beatha.eu/logboek/401/30/Verbouwing-koelbox-3.html" />
<meta property="fb:app_id" content="175931732519501" />
<meta property='og:type' content='article'>
<meta property="og:url" content="http://www.uisge-beatha.eu/logboek/401/30/Verbouwing-koelbox-3.html" />
<meta property="og:image" content="http://www.uisge-beatha.eu/uploads/cgblog/id401/Koelkast_-_30.jpg" />
<meta property="og:title" content="Verbouwing koelbox - 3" />
<meta property="og:description" content="Het testen van de compressor..." />
By checking the FB debugger, it sometime process it ok and sometimes it fails. All for unknown reason. https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.uisge-beatha.eu%2Flogboek%2F401%2FVerbouwing-koelbox-3.html
In the case it processes ok, I do see the information I would expect based on the source of the page, by looking at the OG-metatags. However, if I look at scraper, than these metatags are empty.
<link rel="canonical" href="http://www.uisge-beatha.eu/Nieuwtjes.html">
<meta property="fb:app_id" content="175931732519501">
<meta property="og:type" content="article">
<meta property="og:url" content="">
<meta property="og:image" content="/">
<meta property="og:title" content="">
<meta property="og:description" content="">
Don't know why these are empty. Been digging for an solution for hours, but find none.
The template of the site responsible for "filling" the metatages contains smarty logic:
<link rel="image_src" type="image/jpeg" href="{$entry->file_location}/{$entry->fieldsbyname.facebook_thumbnail->value}" alt="{$entry->title|escape}" />
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />
{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />
{/if}
<meta property="fb:app_id" content="175931732519501" />
<meta property='og:type' content='article'>
<meta property="og:url" content="{$canonical}" />
<meta property="og:image" content="{$entry->file_location}/{$entry->fieldsbyname.facebook_thumbnail->value}" />
<meta property="og:title" content="{$entry->title|escape}" />
<meta property="og:description" content="{$entry->summary|strip_tags:false}" />
Anyone who is willing to help me out on this somehow strange behaviour?

how do I generate a custom widget on facebook when people post a link to our site?

When you post a youtube link on facebook a player will show up on your wall, letting other people play the video right away. How is this done, and how can you do the same thing for your own website, such that when people post a link to one of your pages, you can make a widget show up on facebook instead of the actual link?
It´s actually pretty simple you need to add several meta tags to your website
Open Graph Protocol
Something like:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
if you want to embedded a video you can just do:
<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:secure_url"
content="https://secure.example.com/awesome.swf" />
<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />
...
</head>
</html