Is it possible to construct the og metatags of a website such that when the website link is shared to facebook, the preview image (a gif), animates automatically?
Here & here it's talked about how Giphy accomplishes it, by essentially wrapping the gif in an swf file. But it's 2016 so is there a better (and supported) way to accomplish this? I couldn't find anything in the facebook docs and I'd like to keep my og:type meta tag as having a value of website.
Here's a snippet of my metatag config obejct (I use React Helmet to populate the tags):
{ property: 'fb:app_id', content: 'some_app_id' },
{ property: 'og:description', content: 'My site's description' },
{ property: 'og:image', content: 'http://example.com' },
{ property: 'og:image:type', content: 'image/gif' },
{ property: 'og:title', content: 'My Site' },
{ property: 'og:url', content: 'http://example.com' },
{ property: 'og:type', content: 'website' },
{ property: 'og:image:width', content: '657' },
{ property: 'og:image:height', content: '411' },
{ charset: 'utf-8' },
{ property: 'og:site_name', content: 'My Site' },
{ property: 'og:locale', content: 'en_US' },
I looked into this last summer. My understanding was you must wrap your image in a SWF file or a javascript video player (which is really just a javascript program as far as I could tell). Many of the big players (check out any youtube page) will have a number of ways they present their content using OG - including SWF, javascript player, just as an image, etc so that as the device they are being viewed on might not have the ability to use one or more of the methods, it can fall back on another method - i.e. degrade gracefully.
Here is a youtube header (a bit overkill?):
<meta property="og:site_name" content="YouTube">
<meta property="og:url" content="https://www.youtube.com/watch?v=UKOpnK5fC4k">
<meta property="og:title" content="Pearl Jam 10-16-2014 Detroit Mi Full Show Multicam SBD Blu-Ray">
<meta property="og:image" content="https://i.ytimg.com/vi/UKOpnK5fC4k/maxresdefault.jpg">
<meta property="og:description" content="Pearl Jam 10-16-2014 Detroit Michigan Full Show Multicam SBD Blu Ray 2014 Lightning Bolt Tour Full Show Blu Ray Torrent (Added 06-05-2015) Option 1 - http://...">
<meta property="al:ios:app_store_id" content="544007664">
<meta property="al:ios:app_name" content="YouTube">
<meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=UKOpnK5fC4k&feature=applinks">
<meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=UKOpnK5fC4k&feature=applinks">
<meta property="al:android:app_name" content="YouTube">
<meta property="al:android:package" content="com.google.android.youtube">
<meta property="al:web:url" content="https://www.youtube.com/watch?v=UKOpnK5fC4k&feature=applinks">
<meta property="og:type" content="video">
<meta property="og:video:url" content="https://www.youtube.com/embed/UKOpnK5fC4k">
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/UKOpnK5fC4k">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta property="og:video:url" content="http://www.youtube.com/v/UKOpnK5fC4k?version=3&autohide=1">
<meta property="og:video:secure_url" content="https://www.youtube.com/v/UKOpnK5fC4k?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta property="og:video:tag" content="Pearl Jam (Musical Group)">
<meta property="og:video:tag" content="Pearl Jam">
<meta property="og:video:tag" content="PJ">
<meta property="og:video:tag" content="Full Show">
<meta property="og:video:tag" content="Full Concert">
<meta property="og:video:tag" content="HD">
<meta property="og:video:tag" content="Blu Ray">
<meta property="og:video:tag" content="Live">
<meta property="og:video:tag" content="Eddie Vedder (Musical Artist)">
<meta property="og:video:tag" content="Black">
<meta property="og:video:tag" content="Alive">
<meta property="og:video:tag" content="Even Flow">
<meta property="og:video:tag" content="Sirens">
<meta property="og:video:tag" content="Complete Concert">
<meta property="og:video:tag" content="Frozen Let It Go">
<meta property="og:video:tag" content="Pearl Jam Concert">
<meta property="og:video:tag" content="Pearl Jam Full Show">
<meta property="og:video:tag" content="Pearl Jam Full Concert">
<meta property="og:video:tag" content="Pearl Jam 2014">
<meta property="og:video:tag" content="Pearl Jam 10-16-2014">
<meta property="og:video:tag" content="Pearl Jam 16-10-2014">
<meta property="og:video:tag" content="10-16-2014">
<meta property="og:video:tag" content="16-10-2014">
<meta property="og:video:tag" content="Pearl Jam Detroit Full Show">
<meta property="og:video:tag" content="Pearl Jam Detroit 2014">
<meta property="og:video:tag" content="10-16-2014 Detoit">
<meta property="og:video:tag" content="Pearl Jam Joe Louis Arena">
<meta property="og:video:tag" content="Pearl Jam Michigan">
<meta property="og:video:tag" content="PJ Detroit">
<meta property="og:video:tag" content="Joe Louis Arena">
Related
I'm currently having a problem where if I build my webpack for development(probably have the same in production), that I see duplicate meta tags. When I open up the browser inspector I also see duplicate react components within my code. I'm assuming there's something going on with my webpack.config.js.
Here's my webpack code
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
aboutme: [
path.resolve(__dirname,'src/about-me.js'),
]
},
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
}
}
My React Code
import { createRoot } from 'react-dom/client';
import './index.css';
import AboutMePage from './pages/aboutme';
const aboutMeCont = document.getElementById('about-me-root');
const aboutMeRoot = createRoot(aboutMeCont);
aboutMeRoot.render(<AboutMePage />);
HTML Input
<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">
<title><%= htmlWebpackPlugin.options.title %></title>
<%= htmlWebpackPlugin.tags.headTags %>
</head>
Here's the html output that I am getting:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="">
<meta name="viewport" content="">
<meta name="author" content="">
<meta name="og:title" content="">
<meta name="twitter:title" content="">
<meta name="og:image" content="">
<meta name="twitter:image" content="">
<meta name="description" content="">
<meta name="og:description" content="">
<meta name="twitter:description" content="">
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="og:url" content="">
<meta name="og:type" content="">
<link rel="icon" href="favicon.ico">
<script defer src="aboutme.js"></script>
<meta name="author" content="">
<meta name="og:title" content="">
<meta name="twitter:title" content="">
<meta name="og:image" content="">
<meta name="twitter:image" content="">
<meta name="description" content="">
<meta name="og:description" content="">
<meta name="twitter:description" content="">
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="og:url" content="">
<meta name="og:type" content="">
<link rel="icon" href="favicon.ico">
<script defer src="aboutme.js"></script>
</head>
Here's the browser output
hi i am trying to convert my html code into an image
this i my python code:
def cnv2image():
options = {
"--enable-local-file-access": None,
"--enable-javascript": None,
"--javascript-delay": 10000,
"--debug-javascript": None
}
imgkit.from_file("tweet_embed.html", "result.pdf", options)
and this is my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="jpg" name="imgkit-format">
<script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<title>Document</title>
</head>
<body>
<blockquote class="twitter-tweet" data-theme="dark"><p dir="ltr" lang="en">be honest, do you kiss your dog goodnight?</p>— ᴘᴀᴠʟᴏᴠ ᴛʜᴇ ᴄᴏʀɢɪ 🐶 (#PAVGOD) August 18, 2021</blockquote>
</body>
</html>
the problem is that when i try to convet html to image js wont get load and i get a screenshot only from html
this is the result that i get:
this is what i expect:
I am trying to share images and video on social media ( mostly FB,twitter,linkedIn )in reactjs app , have added react-helmet for the same but still unable to share image below is the link which i am referring and my code.
https://medium.com/camperstribe/react-social-media-integration-with-react-share-and-react-helmet-84d9def6a445
Above solution is not working
import React from "react";
import { Helmet } from "react-helmet";
// import { useLocation } from "react-router-dom";
export default function HelmetMetaData(props) {
// let location = useLocation();
let quote = props.quote !== undefined ? props.quote : "";
let title =
props.title !== undefined
? props.title
: "CampersTribe - World is yours to explore";
let image =
props.image !== undefined
? props.image
: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80";
let description =
props.description !== undefined
? props.description
: "CampersTribe lets you experience the camping culture. We discover the hidden gems in the nearby to help you connect with nature & yourself by learning in the woods, on the riverbank under the open sky." +
"Trust us, its million dollars experience to ride away from city life, pitch a tent, do campfire and endless talk!" +
"So, join us on this voyage, and explore the beauty and miracle of being yourself!";
let hashtag = props.hashtag !== undefined ? props.hashtag : "#camperstribe";
return (
<Helmet>
<title>{title}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="csrf_token" content="" />
<meta property="type" content="website" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta name="_token" content="" />
<meta name="robots" content="noodp" />
<meta property="title" content={title} data-react-helmet="true"/>
<meta property="quote" content={quote} data-react-helmet="true"/>
<meta name="description" content={description} data-react-helmet="true"/>
<meta property="image" content={image} data-react-helmet="true"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:quote" content={quote} />
<meta property="og:hashtag" content={hashtag} />
<meta property="og:image" content={image} data-react-helmet="true"/>
<meta property="og:image:secure_url" content={image} data-react-helmet="true"/>
<meta content="image/*" property="og:image:type" data-react-helmet="true"/>
<meta property="og:site_name" content="CampersTribe" />
<meta property="og:description" content={description} />{" "}
</Helmet>
);
}
i have created helmetMetaData component and calling in top of my social share component
return (
<div className="app-content content">
<HelmetMetaData />
<FacebookShareButton
windowWidth="800"
windowHeight="500"
url={
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
}
quote={"test sharing"}
image={
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
}
imageURL={
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
}
// hashtag="#camperstribe"
// className={classes.socialMediaButton}
>
<FacebookIcon size={36} />
</FacebookShareButton>
)
but not working only getting url and title on facebook share dialog,
anybody knows how to share image on social media in reactjs?
I know it's an old question, but try to insert image meta tag directly into public/index.html. As it said in this issue: adding meta on client side dynamically does not work. Crawlers (fb, tw, etc) can see only static html. And it seems like FacebookShareButton doesn't have image as an optional prop.
gmap3 doesn't work on my website and I don't know why, can someone help me to find the error ?
"I need to add some words to publish my question, so don't read that line sorry"
here is my link:
http://www.booclin.ovh/site/plan.html
Here is my code:
<!DOCTYPE html> <html lang="fr">
<head>
<!--[if lt IE 9]> <div style="background:#fff; font-size:1.2rem; line-height:1.8em; padding-top:300px;color:#282828; height:100%; width:100%; z-index:999999999999999; position:fixed; text-align:center;"> <div style='margin:0px 20px 0 20px; width:100%; max-width:600px; margin:0 auto; '>Vous utilisez une ancienne version d'Internet Explorer. Pour des raisons de sécurité, vous devez mettre à jour votre navigateur. S'il vous plaît aller dans "mises à jour de Windows" et installer la dernière version. Merci </div> </div> <![endif]-->
<!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <![endif]-->
<head> <meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
<meta property="og:description" content="">
<meta name="keywords" content="">
<meta name="LANGUAGE" content="FR">
<meta name="SUBJECT" content="">
<meta name="ROBOTS" content="All">
<meta name="OWNER" content="">
<meta name="RATING" content="">
<meta name="COPYRIGHT" content="">
<meta name="expires" content="never">
<meta name="GOOGLEBOT" content="index">
<meta name="Slurp" content="index">
<meta name="MSNBot" content="index">
<meta name="ICBM" content="">
<meta name="Identifier-URL" content="">
<link property="stylesheet" rel="canonical" href=""/>
<link property="stylesheet" type="image/x-icon" rel="shortcut icon" href=""/>
<link property="stylesheet" type="image/x-icon" rel="icon" href=""/>
<link property="stylesheet" rel="image_src" href=""/>
<meta property="og:image" content=""/>
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:description" content="">
<meta name="keywords" content="">
<link property="stylesheet" rel="stylesheet" type="text/css" href="index/css/style.css">
<link property="stylesheet" rel="stylesheet" type="text/css" href="index/font/font.css"/>
</head>
<body>
<div class="left part">
<div style="border:80px solid #fff; width:500px;height:500px;" id="adresse" class="gmap3"> </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"> </script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"> </script>
<script type="text/javascript" src="index/js/gmap3.js"> </script>
<script type="text/javascript">
$(function(){
$('#adresse').gmap3({marker:{address: "Apple Store, Saint-Laurent-du-Var, France"},
map:{options:{zoom: 17}
}
});
});
</script>
</body>
</html>
Your api key is missing, as you can see in the console:
Google Maps API error: MissingKeyMapError
Follwing the configuration page of the documentation: http://gmap3.net/configuration.html
You can load the library with the api key
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY®ion=GB"></script>
Or use the api key when loading the map
$.gmap3({
key: 'YOUR_API_KEY'
});
When I invoke facebook javascript to implement payment feature, I always got the error code: 1383146, and error_message: "invalid og type. Expected og:product, got website".
The code is copy from facebook example:
function buy() {
var obj = {
method: 'pay',
action: 'purchaseitem',
product: 'https://xxxxxx/test3.html'
};
FB.ui(obj, function(data) {
console.log(data);
});
}
The test3.html:
<!DOCTYPE html>
<html>
<head prefix=
"og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
product: http://ogp.me/ns/product#">
<meta property="og:type" content="og:product" />
<meta property="og:title" content="The Smashing Pack" />
<meta property="og:description" content="A smashing pack full of items!" />
<meta property="og:image" content="http://www.friendsmash.com/images/pack_600.png" />
<meta property="og:url" content="http://www.friendsmash.com/og/smashingpack.html" />
<meta property="product:price:amount" content="2.99"/>
<meta property="product:price:currency" content="USD"/>
<meta property="product:price:amount" content="1.99"/>
<meta property="product:price:currency" content="GBP"/>
</head>
</html>