I am trying to figure out how to show an image preview on WhatsApp Desktop.
Recently WhatsApp Desktop was updated. Since then my code has no longer been functional on this.
It remains working on WhatsApp mobile.
My index.html script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="og, image, test" />
<meta name="description" content="Og:image test" />
<meta name="author" content="Maurício Ramos da Silva">
<meta property='og:image' content='https://teste.mauricioramos.com.br/003.jpg'/>
<meta property='og:url' content='https://teste.mauricioramos.com.br'/>
<meta property='og:type' content='website'/>
<meta property='og:title' content='Duplex/Casa Geminada Venda'/>
<meta property='og:description' content='Residência geminada com 2 dormitórios (suíte americana), banheiro social, living amplo integrado a cozinha, área de serviço e estacionamento para 2 carros. Forro em laje de concreto, aberturas em alumínio, amplo pátio fechado e individual.'/>
</head>
<body>
<h1>WhatsApp Desktop og: Test</h1>
<button onclick="share()">Share</button>
<img src="003.jpg" width="300"/>
<script>
const content = 'Residência geminada com 2 dormitórios (suíte americana), banheiro social, living amplo integrado a cozinha, área de serviço e estacionamento para 2 carros. Forro em laje de concreto, aberturas em alumínio, amplo pátio fechado e individual. https://teste.mauricioramos.com.br';
const result = 'https://wa.me/?text=' + content;
function share() {
console.log('open');
window.open(result, '_blank')
}
</script>
</body>
It show like:
Image showing share result on WhatsApp
I have tried to change SSL key, from Cpanel Inc. to ZeroSSL with no success.
Furthermore, you can test online here:
Click to show webpage
What more I can do?
Related
I'm trying to add some meta tags from widget (/views/parts/ folder) that gets data from database outside of orchard. I need to put them to head section, and frankly I got no idea how to achieve that.
I tried:
using (Script.Head())
{
<meta property="description" content="ABC">
}
SetMeta("ABC", "description");
But none of these work :-(
Edit: our document.cshtml code:
#using Orchard.Mvc.Html;
#using Orchard.UI.Resources;
#{
RegisterLink(new LinkEntry { Type = "image/x-icon", Rel = "shortcut icon", Href = Url.Content("~/modules/orchard.themes/Content/orchard.ico") });
string title = Convert.ToString(Model.Title);
string siteName = Convert.ToString(WorkContext.CurrentSite.SiteName);
string classForPage = "static " + Html.ClassForPage();
}
<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>#Html.Title(title, siteName)</title>
<meta name="viewport" content="width=device-width">
#{
Display(Model.Head);
}
<meta property="og:title" content="#Layout.Title - #Convert.ToString(WorkContext.CurrentSite.SiteName)">
<meta property="og:site_name" content="#Convert.ToString(WorkContext.CurrentSite.SiteName)">
<meta property="og:url" content="#Request.Url">
<meta property="og:type" content="article">
<script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script>
</head>
<body>
#Display(Model.Body)
#Display(Model.Tail)
</body>
</html>
Does anybody know how to achieve that?
IResourceManager provides the necessary methods.
For use it in view:
var resourceManager = WorkContext.Resolve<Orchard.UI.Resources.IResourceManager>();
resourceManager.SetMeta(new Orchard.UI.Resources.MetaEntry
{
Name = "description",
Content = "ABC"
});
But it can be also used in other places (e.g. part driver).
Edit
using SetMeta("description", "ABC") in view give the same results.
I used the following code in my layout.cshtml file before header tag and it worked.
#using (Script.Head())
{
<meta name="description" content="<your description>"/>
<meta name="keywords" content="<your keywords here>"/>
}
Enjoy!!!
I have a facebook application where the user choose 4 of his friends and then it creates a video (swf) with the pictures of your friends in it (loaded via xml). So I need to share this video on the user timeline. Everything works fine but the video is not embedded in the post on his timeline, there is only a post with the link to the page in it.
The weird thing is, if I post the url directly on my timeline, the video is embedded, but not if the same link is posted via the application.
here is my code called by the share button in js :
function postToFeed() {
var obj = {
method: 'feed',
link: 'https://mysite.com/flash/share-page.php?id=22',
picture: 'https://mysite.com/images/video-preview.jpg',
name: 'Name',
caption: 'Caption',
description: 'Description'
};
function callback(response) {
//some code here
}
FB.ui(obj, callback);
}
and the code in my share-page.php
<?php
$id_inscription = $_GET['id'];
$video_url = 'https://mysite.com/flash/share-page.php?id=22';
$video_preview_image = 'https://mysite.com/images/video-preview.jpg';
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:video" content="<?php echo $video_url; ?>"/>
<!-- Open grah tags for Facebook -->
<meta property="og:title" content="Test video player" />
<meta property="og:description" content="A video player interface experiment." />
<meta property="og:type" content="video" />
<meta property="og:url" content="<?php echo $video_url; ?>"/>
<meta property="og:image" content="<?php echo $video_preview_image; ?>"/>
<meta property="og:site_name" content="Site name"/>
<!-- Video specific open graph tags -->
<meta property="og:video" content="<?php echo $video_url; ?>" />
<meta property="og:video:secure_url" content="<?php echo $video_url; ?>" /> <!-- Required for people on Facebook who have secure browsing enabled! -->
<meta property="og:video:width" content="325" />
<meta property="og:video:height" content="180" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<script src="js/swfobject.js"></script>
<script>
var flashvars = {
xmlUrl:"xml/data-<?php echo $id_inscription; ?>.xml",
policyFileUrl:"http://profile.ak.fbcdn.net/crossdomain.xml"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "opaque"
//wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"content"
};
swfobject.embedSWF(
"app.swf",
"altContent", "480", "270", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<p>Get Adobe Flash player</p>
</div>
</body>
</html>
Found it, in the javascript you have to add
source: 'https://mysite.com/flash/app.swf'
DOesnt work for me .
Also facebook says ,It is NOT supposed to work By Design .
https://developers.facebook.com/bugs/589975484398226?browse=external_tasks_search_results_526fc388b99e18881434478
Please share here your code snippet if you could make it work . I have the meta tags taking care for the secure video Url as well .
My problem was when some one is liking my website, the image, description, title etc. where completly wrong it took the first which is the service level agreement in my website. So I figured I have to add opengraph meta tags so I did:
<meta property="og:url" content="http://url.com/" />
<meta property="og:site_name" content="My Web" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Web.com" />
<meta property="og:image" content="http://url.com/logo.png" />
<meta property="og:description" content="My Web is a new community" />
<meta property="fb:app_id" content="7363627862327638" />
The problem is, it is still not working, the likes information is wrong, and I waited atleast 72 hours, so the cache of Facebook is not the problem.
Does anyone know what could be the problem? Thanks alot already!
Checkout this.. tutorial.
and use facebook debug tool to clear cache and set new metatags for your page.
Try this it worked for me -
Use Dynamic content in meta tag.
<?php
$params = array();
if(count($_GET) > 0) {
$params = $_GET;
} else {
$params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Open Graph meta tags -->
<meta property="fb:app_id" content="MY_APP_ID" />
<meta property="og:site_name" content="meta site name"/>
<meta property="og:url" content="URL?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
<meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
<meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
<meta property="og:title" content="<?php echo $params['title']; ?>"/>
<meta property="og:image" content="URL<?php echo $params['image']; ?>.png"/>
<meta property="og:description" content="<?php echo $params['description']; ?>"/>
</head>
</html>
how to add Facebook, Google+ and twitter like/share button on my website, to sharing details of my website. because, i tried the following code in my website for google+. But, it's only sharing my website pic not the description and title of my website
<meta itemprop="name" content="MySMSBuddy">
<meta itemprop="description" content="Description of my webpage">
<meta itemprop="image" content="http://eravikant.com/images/image.png">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Any help and idea will be appreciated !!!
Those sites use the title tag for page title, and meta name="description" for description (not itemprop="description".
<title>Title of your page</tile>
<meta name="description" content="Description of your page" />
For Facebook, you can also use open graph meta tags:
<meta property="og:title" content="Title"/>
<meta property="og:description" content="Description"/>
Im trying to add a facebook like button to a website im working on, but none of the meta attributes i add show up.
I have the following in my html, (irrelevant parts not included)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
...
<meta property="og:site_name" content="My Site" />
<meta property="og:title" content="Some Product"/>
...
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPIKEY',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
...
...
<fb:like layout="button_count"></fb:like>
...
Any pointers on what im doing wrong would be much appreciated.
I realised, the problem was that i was testing the machine on my local computer. It started working once i put the website online.
Believing the Facebook page
http://developers.facebook.com/docs/guides/web
it should look like this :
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
You're missing a number of the required open graph tags. They're defined here. At a minimum you're looking for -
<meta property="og:title" content="Title of page"/>
<meta property="og:type" content="CONTENT TYPE"/>
<meta property="og:url" content="URL of PAGE"/>
<meta property="og:image" content="URL of IMAGE"/>
<meta property="og:site_name" content="SITE NAME"/>
<meta property="fb:admins" content="USER_ID"/>