The Opengraph tagging on [a site I develop][1] is setup as well as I can tell. Works fine on facebook but 'can't be displayed on linkedin'.
Having done my research I'm aware of the caching period and different ways to deliver opengraph. Can anyone shed light on what I'm missing?
Have tried two separate implementations:
A script based implementation
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"mainEntityOfPage": {
"#type": "WebPage",
"#id": "https:https://www.tssimmigration.com.au/news/single/skilled-190-visa-pathway-for-stem-graduates"
},
"headline": "Skilled 190 Visa pathway for STEM graduates",
"image": [
"https://www.tssimmigration.com.au/images/uploads/home/171215_DM_TSS_384_1.jpg"
],
"datePublished": "19 JAN 2018",
"author": {
"#type": "Person",
"name": "Micaela Hoglund"
},
"publisher": {
"#type": "Organization",
"name": "TSS Immigration",
"logo": {
"#type": "ImageObject",
"url": "https://www.tssimmigration.com.au/img/tss.immi3.png"
}
},
"description": "<p>Just one of the range of immigration pathways open to those skilled in a STEM profession is the Skilled Nominated (Subclass 190) Visa.</p>"
}
</script>
And a Meta Tagging implementation
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.tssimmigration.com.au/images/uploads/home/hero6_copy.jpg" />
<meta property="og:url" content="https://www.tssimmigration.com.au/" />
<meta property="og:title" content="Australian Migration Agents & Consultants in Melbourne | TSS Immigration" />
<meta property="og:description" content="TSS Immigration are registered migration agents based in Melbourne. Our Expert Migration Agents will evaluate your eligibility and assist you to get an Australian Visa." />
It seems to be the same issue as here Linkedin Open Graph Sharing not working
I don't know if this is the truth but the first comment says that "it depends on the site popularity".
If your site is not popular enough, LinkedIn won't display it.
I have the same issue on one of my site, OG works perfectly on facebook but never showing on Linkedin.
Even though I copy/paste an html page from a site where the OG is showing on LinkedIn...
Related
I'm trying to create a small app where I'm going to play a DRM encoded video using azure media player. It is showing error code "(0x10500001)"
[enter image description here][1]
FYI- Player is playing DRM video on all browsers perfectly.
Here is the URL for JSFiddle for AMP DRM Play - https://jsfiddle.net/f0pewmqz/
<!DOCTYPE html>
<html lang="en-US"><head><meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Azure Media Player</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Sample: DRM - PlayReady, Widevine, and FairPlay (no token)</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "//ampvideos.streaming.mediaservices.windows.net/9b77ed82-94af-41bc-b08b-537e7a530eb6/sintel_trailer-1080p_fp.ism/manifest", type: "application/vnd.ms-sstr+xml", protectionInfo: [{ type: "PlayReady" }, { type: "Widevine" },{ type: "FairPlay", certificateUrl: "//yourdomain/fairplay.der" }] }, ]);
</script>
</body>
To quickly replicate the issue on MS Teams Desktop app and Browser app:
Copy the URL - https://dhananjaytest.w3spaces.com/saved-from-Tryit-2023-02-14-jhqwb.html
In MS Teams select add Tab option (+).
Select Website option.
Add URL and save.
If you are using Teams on browser you can replicate this by following link and follow the above steps.
https://dhananjaytest.w3spaces.com/saved-from-Tryit-2023-02-14-jhqwb.html
I want to post a message to the Google blogger API with R, but I am puzzled how to format the request with R, httr and jsonlite. GET works, but the formatting of the POST message and the JSON isn't clear to me.
The example of a POST is shown at the Google developer page:
POST https://www.googleapis.com/blogger/v3/blogs/8070105920543249955/posts/
Authorization: /* OAuth 2.0 token here */
Content-Type: application/json
{
"kind": "blogger#post",
"blog": {
"id": "8070105920543249955"
},
"title": "A new post",
"content": "With <b>exciting</b> content..."
}
Creating the message:
amesg <- list(
kind = "blogger#post",
blog =list(id = "..."),
Title = "A new post",
content = "With exciting content...")
jsnmesge <- jsonlite::toJSON(amesg,pretty = TRUE, auto_unbox = TRUE)
httr::POST("https://www.googleapis.com/blogger/v3/blogs/.../posts/key=...",
body = jsnmesge)
Gives as response:
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 404 (Not Found)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;p...
</style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>404.</b> <ins>Thatβs an error.</ins>
I've got an idea to run Flutter app on WebOS. I've downloaded the latest WebOS sdk and a Simulator (as they already deprecated the Emulator)
I've created a simple Hello World app that simply uses HTML and it ran just fine on the Simulator. Then I decided to add a logic for running Flutter app to it. So now the compiled app structure is like this
The content of the index.html is as follows
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_iz_tube_tv">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>IZ Tube TV</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '3924677883';
</script>
<script src="flutter.js" defer></script>
<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
And here is the content of appinfo.json
{
"id": "com.example",
"version": "0.0.1",
"vendor": "Test TV",
"type": "web",
"main": "index.html",
"title": "tv_app",
"icon": "icon.png",
"largeIcon": "largeIcon.png"
}
This app runs fine in browser if I use a web server.
But the problem starts when I load it on a WebOS Simulator using App button on RCU.
I just cannot run. And the problem is, obviously, because it uses a simple file: protocol instead of running an http server.
I've googled a lot and haven't found a solution to this.
Does anyone know how to run an app like this in simulator?
I've found out it's impossible to do in a Simulator. But there is a workaround. We can add a redirection to the "head" part of index.html file like this (https://webostv.developer.lge.com/develop/app-developer-guide/hosted-web-app/):
<meta http-equiv="refresh" content="0;url=http://0.0.0.0:8080/index.html">
Thus effectively redirecting it to the remote app. And WebOS can display a Flutter app
I have created a web app for my bot and also integrated the telegram "web app Script"
https://telegram.org/js/telegram-web-app.js
The code of my web app is shown in the below.
The only data I'm receiving from window.Telegram.WebApp is this :
using reply Markup keyboard:
{
"initData": "",
"initDataUnsafe": {
},
"version": "1.0",
"colorScheme": "dark",
"themeParams": {
"bg_color": "#17212b",
"button_color": "#5288c1",
"button_text_color": "#ffffff",
"hint_color": "#708499",
"link_color": "#6ab3f3",
"text_color": "#f5f5f5"
},
"isExpanded": true,
"viewportHeight": 621,
"viewportStableHeight": 621,
"MainButton": {
"text": "CONTINUE",
"color": "#5288c1",
"textColor": "#ffffff",
"isVisible": false,
"isProgressVisible": false,
"isActive": true
}
}
using inline button :
{
"initData": "query_id=AAFdL6MsAAAAA122voywCSO1y&user=%7B%22id%22%3A748891997%2C%22first_name%22%3A%22%F0%9D%97%A6%F0%9D%97%94%F0%9D%97%A0%F0%9D%97%9C%22%2C%22last_name%22%3A%22%22%2C%22username%22%3A%22samyar%22%2C%22language_code%22%3A%22en%22%7D&auth_date=1651749255&hash=34f3a0de3e0dc7b8d5735d0a85b265763c5c490917180fef40e4df61c819949e",
"initDataUnsafe": {
"query_id": "AAFdL6MsAAAAAFbvoywCSO1y",
"user": {
"id": 748291957,
"first_name": "π¦ππ π",
"last_name": "",
"username": "samyar",
"language_code": "en"
},
"auth_date": "1651749255",
"hash": "34f3a0de3e0dc7b8d5735d0a85b265265cdc490917280fef40e4df61c819949e"
},
"version": "1.0",
"colorScheme": "dark",
"themeParams": {
"bg_color": "#17212b",
"button_color": "#5288c1",
"button_text_color": "#ffffff",
"hint_color": "#708499",
"link_color": "#6ab3f3",
"text_color": "#f5f5f5"
},
"isExpanded": true,
"viewportHeight": 621,
"viewportStableHeight": 621,
"MainButton": {
"text": "CONTINUE",
"color": "#5288c1",
"textColor": "#ffffff",
"isVisible": false,
"isProgressVisible": false,
"isActive": true
}
}
I need to access many other options, but I don't have.i just need the user's profile info.
The WebApp :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<title>Web app</title>
</head>
<body>
<div class="user-info">
<!-- Data -->
<img id="profile" />
<h1 id="name"></h1>
<h3 id="username"></h3>
<!-- -->
<p id="test">
This page is a simple webapp integrated with telegram bot π₯
</p>
</div>
<script>
const profileEl = document.getElementById("profile");
const nameEl = document.getElementById("name");
const usernameEl = document.getElementById("username");
const test = document.getElementById("test");
window.Telegram.WebApp.ready();
test.innerText = `${JSON.stringify(window.Telegram.WebApp)}`;
const { first_name, last_name, username, photo_url } =
window.Telegram.WebAppUser;
// set the profile
profileEl.src = photo_url;
nameEl.innerText = `${first_name} ${last_name}`;
usernameEl.innerText = username;
</script>
</body>
</html>
The bot code :
basically, it's just going to send an replyMarkupKeyboard
#app.on_message(filters.private)
async def hello(client, message):
# await message.reply("Just a web app integrated withen telegram! π",
# reply_markup=InlineKeyboardMarkup(
# [
# [
# InlineKeyboardButton(
# "Open Web app π₯",web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
# ]
# ]
# ))
await message.reply("Just a web app integrated withen telegram! π",
reply_markup=ReplyKeyboardMarkup(
[
[
KeyboardButton(
"Open Web app π₯",
web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
]
]
))
const { first_name, last_name, username } = window.Telegram.WebApp.initDataUnsafe.user;
Works fine for me.
I also stumbled upon this problem. For my case it was a good decision to implement web app by menu button
https://core.telegram.org/bots/webapps#launching-web-apps-from-the-menu-button
By this method I got the full user information
I'm working on a project where I'm searching locations using Google Maps API v3 places (with auto complete service).
It works nicely and allows you to search from many different countries, how ever I was hoping to add some custom results (e.g. "Mikes place") to the result pane as well (if someone started typing "Mike").
Is it possible to add my own results to the Google Maps places search results or should I use some jQuery auto complete feature and try to add Google results with my own?
It's probably a bit late for you but I stumbled across your question before deciding to implement this myself in a Google Maps Autocomplete component for Angular JS which I maintain. Hopefully someone finds it helpful.
Using the component you can specify custom places results which get blended into the results that come back from the AutocompleteService.
Here's a working example:
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Injecting Custom Place Predictions</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../src/autocomplete.css">
<!-- Required dependencies -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-touch/angular-touch.js"></script>
<!-- Google Places Autocomplete directive -->
<script src="../src/autocomplete.js"></script>
<script>
angular.module('example', ['google.places'])
// Setup a basic controller
.controller('MainCtrl', function ($scope) {
$scope.place = null;
$scope.myPlaces = [
toGooglePlacesResult({
label: 'International Airport - T1, Sydney, New South Wales',
address: {
street: 'International Airport - T1',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.936722, longitude: 151.164266 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T2, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T2',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933617, longitude: 151.181630 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T3, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T3',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933076, longitude: 151.181270 }
})
];
function toGooglePlacesResult(config) {
return {
formatted_address: config.label,
address_components: [
{
long_name: config.address.street,
short_name : config.address.street,
types: [ 'route' ]
},
{
long_name: config.address.suburb,
short_name: config.address.suburb,
types: [ 'locality' ]
},
{
long_name: config.address.state,
short_name: config.address.state,
types: [ 'administrative_area_level_1' ]
}
],
geometry: {
location: {
lat: function () { return config.location.latitude },
lng: function () { return config.location.longitude }
}
}
};
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Injecting Custom Place Predictions</h1>
<form class="form">
<input class="form-control" g-places-autocomplete custom-places="myPlaces" ng-model="place"/>
</form>
<h5>Result:</h5>
<pre>{{place | json}}</pre>
</div>
</div>
</div>
</body>
</html>
The important parts are making sure your custom places results actually look minimally like a real places result, then wiring up your results to the directive using the custom-places attribute.