I have set my og tags as I should. Facebook debugger tool shows the correct tags and generates the correct share preview. However the sharebutton on my site generates a different result. It adds an h2 header tag with the title and there is no summary.
My code:
<meta property="og:title" content="Page-Title"/>
<meta property="og:url" content="Page-URL"/>
<meta property="og:image" content="Page-Image"/>
<meta property="og:description" content="Page-Description" />
Initializing facebook share button
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v2.5'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
It looks like you are missing the type meta property and the html of the button itself.
It should be:
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
Related
Flutter Web
I want to download a local pdf document stored in assets/doc.pdf
The code that works in my dev environment. I.e. I'm able to download valid pdf in debug mode locally.
ByteData bytes = await rootBundle.load("doc.pdf");
final blob = html.Blob([bytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
//--
// Downloads the file
var link = html.AnchorElement(href: url);
link.download = 'doc.pdf';
link.click();
html.Url.revokeObjectUrl(url);
Problem
When I build the release build and host it on Firebase hosting, after downloading the same file, the file is only 2KB and contains this text with an error message:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<link rel="stylesheet" href="loader.css">
<!-- 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="web_portfolio">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>web_portfolio</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="loader">
<div class="lds-circle"><div></div></div>
</div>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js" ></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=2745115030');
});
}
</script>
<script>
head.js("main.dart.js?version=3", function() {
document.getElementById('loader').remove();
});
</script>
<!-- <script src="" type="application/javascript"
onendload="document.getElementById('loader').remove();"></script> -->
</body>
</html>
I have tried multiple browsers.
If I go to build\web\assets\assets, the pdf file is still valid.
I have tried opening the pdf in a new browser tab like so:
ByteData bytes = await rootBundle.load("doc.pdf");
final blob = html.Blob([bytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
//** opens a new tab with the containing pdf
html.window.open(url, "_blank");
html.Url.revokeObjectUrl(url);
But the path is still wrong and the pdf can't be displayed.
I wonder why it works locally, but paths get messed up when live on firebase hosting?
as i said in the title, i'm using an api, here is the html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<title>Ejemplo consumo web service con FETCH </title>
</head>
<body>
< <div class="container">
<div class="row">
<button class="btn btn-primary" id="btn-cargar">Cargar Información</button>
</div>
<div class="row">
<div id="info" class="text-center">
<h1></h1>
</div>
</div>
</div>
<script src="js/carga_1.js"></script>
</body>
</html>
and here is the code of the js
$("#btn-cargar").click(function (event) {
event.preventDefault();
var url = "https://api.punkapi.com/v2/beers/random";
fetch(url)
.then(response => response.json())
.then(data =>
{
var $nombre_cerveza = $('<h1>').text(data[0].name);
var $grados = "Grados: " + $('<p>').text(data[0].abv);
var $foto_cerveza = $("<p><img src='"+data[0].image_url+"'>");
$("#info").empty();
$('#info')
.append($nombre_cerveza)
.append($grados)
.append($foto_cerveza);
})
.catch(error => console.error(error));
});
it shows me the name as it should, but in the abv it shows "Grados: [object Object]" and i want it to show the abv in numbers, does anyone knows a way to fix this?
i'm sorry that all of it is in spanish
I want to add "Google +1" button to my website. I add elements
<html itemscope itemtype="http://schema.org/Other">
<meta itemprop="name" content="title">
<meta itemprop="description" content="erterter">
<meta itemprop="image" content="http://www.mmaer.com">
to my page. It works fine on single-language page, but works incorrectly in multilanguage case. My page defines language of page by language of browser and description fills depend on this language. So, even I see code of page:
<meta itemprop="name" content="Magic Screenshot">
<meta itemprop="description" content="Russian text">
<meta itemprop="image" content="http://www.magicscreenshot.com/Content/Images/error_FileNotFound_small.jpg">
when I click on "Google +1" I see english text. How to fix it?
I'm adding this button by following code
<div style="text-align: right;">
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" data-href="http://wwww.com"></div>
<script type="text/javascript">
window.___gcfg = { lang: 'ru' };
(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>
</div>
I'm using the Google+ share plugin which simultaneously does a +1 and a share.
Unfortunately, I cannot get the image that I specify to appear.
I was using an image that is 200px by 200px which complies with the size requirements. I can get the name and the description to display as specified.
The following is the code that I'm using:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Vacancy">
<head>
<meta itemprop="name" content="Vacancy">
<meta itemprop="description" content="A new job vacancy etc">
<meta itemprop="image" content="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQBafMb42NGLi-C-NEmdC-RQDJ5t8PRahD4uTdpOuSAnD5_gMU1_g">
</head>
<body>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>
<!-- Place this render call where appropriate -->
<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>
</body>
</html>
All works fine except that the correct image is not displayed on the +1 share.
Any help in this regard would be very much appreciated.
Many thanks,
Mary
The code you've supplied is working for me. An image of a cat that is 160px square is showing up in your snippet.
This is my code which i have added inside head of my website eravikant.com
<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>
and code which which will show google+ icon for +1 is
<div align="right"><g:plusone size="medium" callback="MySMSBuddy" href="http://eravikant.com/images/image.png"></g:plusone></div>
But, when i click on +1. then only image of my website has share not description and title..
Need help !!!
You need itemscope itemtype="http://schema.org/Article" in your HTML tag:
<html itemscope itemtype="http://schema.org/Article">