Please see these below code which I am using for Facebook Open Graph:
<meta property="fb:app_id" content="XXXXX" />
<meta property="og:type" content="collection" />
<meta property="og:url" content="http://XXXXXXXXXXXXX/" />
<meta property="og:title" content="" />
<meta property="og:image" content="http://XXXXXXXXXXXXXXXXXXXXXXXXXX.jpeg"/>
<script type="text/javascript">
function postCook() {
var parameters = new Array();
parameters["og:title"] = "some_text";
FB.api(
'me/<namespace>:<wwwww>',
'post', {
collection: 'http://XXXXXXXXXXXXXXXXX/'
},
function(response) {
//alert(response.responseText);
console.log(response);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Other22 was successful! Action ID: ' + response.id);
}
});
}
</script>
Here I want to pass og:title and some other also as parameter instead of using in the meta tag. Is there any way to pass some more parameters in FB.api?
Thanks.
While I could be wrong about this (as Facebook shifts their API around mercilessly), they don't allow you to pass in any custom tag information, possibly as it could be used to misrepresent information.
Instead, once the publish action hits Facebook, Facebook will immediatelly scrape the url passed in, and grab all the meta data it can find, prioritising any open graph tags first before falling back to other traditional methods of meta information retrieval (title tags, scraping the body text, etc).
One possible "workaround" would be to pass an "echo" url to Facebook instead of the target url itself. This relies on you using a server-side solution, however, as I don't believe you can do this with the JS SDK.
i.e. Instead of passing http://www.foobar.com to facebook, pass http://www.barbaz.com/echo.php?title=your%20custom%2otitle&description=etcetc&url=myurl
Tailor the url parameters as necessary, and they will be readable in echo.php through $_GET. echo.php would then contain the open graph tags to be read by Facebook, and then redirect the user via javascript to the proper URL. Facebook's scraper won't follow the javascript redirect.
echo.php:
<html>
<head>
<meta property="og:title" value="<?=$_GET['title']?>">
</head>
<body>
<script>
window.location.href = '<?=$_GET['url']?>';
</script>
</body>
</html>
Alternatively, you could check for facebook's user-agent string at the top of echo.php and redirect any non-hits to the proper url using header();, and only render the bounce page for the facebook bot.
Here I want to pass og:title and some other also as parameter instead of using in the meta tag.
This is not how Open Graph objects work.
The URL identifies the object, and any data has to be in the HTML code that this URL delivers.
Related
I have the following front matter in a markdown file.
---
title: "Hello world!"
excerpt: "Lorem ipsum dolor sit amet"
coverImage: "/assets/blog/hello-world/cover.png"
date: "2020-03-16T05:35:07.322Z"
author:
name: Mario
picture: "/assets/blog/authors/mario.png"
ogImage:
url: "/assets/blog/hello-world/cover.png"
---
I require passing the full url of the image to twitter card meta twitter: image and open graph meta property = "og: image"
For this I need to obtain the base url of the site to use it as a prefix to the image path that I obtain through front matter
<Head>
{/* Twitter */}
...
<meta name="twitter:image" content={data.ogImage.url} />
{/* Open Graph */}
...
<meta property="og:url" content={``} key="ogurl" />
<meta property="og:image" content={data.ogImage.url} key="ogimage" />
</Head>
For now data.ogImage.url has the value /assets/blog/hello-world/cover.png but in order to work I need to prefix this output with site base url
How do I get the base url of the site in nextjs?
There are several ways to achieve such a thing:
Create your base URL in env file and refer it by proccess.env (This may help with this approach).
The .env file:
// .env
REACT_APP_BASE_URL=http://example.com/
The index file:
<!-- index -->
<meta property="og:image" content={`${process.env.BASE_URL}${data.ogImage.url}`} key="ogimage" />
Using a relative path, in this approach, you should use image relative path which work like this (this may help with it):
Let's say we have below structure:
--src
|--assets
|--images
|--image.png
--index
If we are in index file we will refer to that image like this:
<meta property="og:image" content={`./src/${data.ogImage.url}`} key="ogimage" />
|__let's say this will return assets/images/image.png
Use javascript built-in methods like window.location. To access the base URL we can get origin property from it like this: window.location.origin (For using this method in next.js this may probably help).
<meta property="og:image" content={`${window.location.origin}${data.ogImage.url}`} key="ogimage" />
NOTE: As #AlexeiLevenkov mentioned in comments since you are asking for the full path of the image, the best way to do it would sticking with the first approach.
Assuming you can use normal client-side JavaScript (I haven't used nextjs before) you can access the base url of the page with window.location.origin
The following screenshot explain everything in itself. If you aren't able to access the window object then probably you are using at a place where it is actually not accessible. You can try writing your short script in tag and can update the meta values. In that script, you'd access to the window object.
During server side rendering you have no window, so you cant get access to location.
But you can leave url prefix empty on server side and define it on client.
As explained in this answer https://stackoverflow.com/a/55151122/615274 Using side effect in the component allows me to access the window object and in consequence to window.location.href the final solution looks similar to this
export default function Post({ post, name }) {
const { data, content } = post;
const [origin, setOrigin] = React.useState("");
React.useEffect(() => {
setOrigin(window.location.origin); // <-- here I get access to window
}, []);
return (
<Layout title={data.title} description={data.excerpt}>
<Head>
{/* Twitter */}
<meta name="twitter:image" content={`${origin}${data.ogImage.url}`} />
{/* Open Graph */}
<meta property="og:image" content={`${origin}${data.ogImage.url}`} key="ogimage"
/>
</Head>
<main>
<PostBody data={data}>{content}</PostBody>
</main>
</Layout>
);
}
In the content attribute of twitter:image and og:image I can set the full url like this `${origin}${data.ogImage.url}`
Does anyone know of an effective way of triggering a window refresh for a deployed Google Appscript Web Application using Javascript?
I've searched and tested variations of window.location.href = window.location.href, window.reload(true), etc.
Nothing seems to work.
The only work-around that I've found is creating a hidden web-address link and using the .click() command to navigate to the same page (i.e. refresh), but lately, this is causing issues, especially because I now have to keep track of different link addresses.
Does anyone have a better alternative to this?
HTML:
<html>
<head>
<title>Finance Mileage Entry</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<?!= include("page-css");?>
<a id="refreshLink" href="<?= ScriptApp.getService().getUrl() ?>?v=home" style="display:none"></a>
JS:
function refresh(){
var link = document.getElementById("refreshLink")
link.click();
};
In order to refresh the Web App, you can just use Window.open(url, windowName), like this:
window.open("https://script.google.com/macros/s/{your-webapp-id}/exec", "_top");
Update:
You could also retrieve the script URL via ScriptApp.getService().getUrl(), instead of writing it yourself. To do that, you would have to retrieve this information from the server-side (you cannot access classes like ScriptApp from the client-side). You have to use google.script.run to execute server-side functions from the client-side:
function retrieveUrl() {
google.script.run.withSuccessHandler(refresh).getUrl();
}
This way, retrieveUrl will execute a function called getUrl from your server code (.gs), which could be something like this:
function getUrl() {
return ScriptApp.getService().getUrl();
}
Finally, when getUrl returns successfully, the success handler will execute a client-side function called refresh (and its return value –the script URL– will be passed as a parameter):
function refresh(scriptUrl) {
window.open(scriptUrl, "_top");
}
Reference:
Window.open
This example shows how to redirect to a url:
<meta http-equiv="refresh" content="0; url=http://example.com/" />
But, i do not want to redirect to a url, i want to redirect to a javascript snippet:
javascript:(function(){s=document.createElement("script");s.type="text/javascript";s.src="https://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js";document.body.appendChild(s);})();
Goal is to do this with a single file.
I tried replacing the url in the meta redirect above with my js snippet, but it fails. I believe the problem is the double-quotes embedded in the js:
<meta http-equiv="refresh" content="0; url=javascript:(function(){s=document.createElement("script");s.type="text/javascript";s.src="https://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js";document.body.appendChild(s);})();" />
I tried replacing the double-quotes in the js with " but that did not work. Also tried %22, also did not work.
I'm not trying to redirect using javascript, i'm trying to redirect to javascript (using meta or another non-js method). However, if there's a way to execute the above script using another piece of script, that's fine.
Not trying to redirect to a .js file-- i want to embed the js snippet inside the redirect.
This question is not a duplicate, because they are not redirecting a page, they are redirecting a link.
i guess you want to load the js file Dynamically! if so ..,here is my code i used before
(function( window, undefined ){
//设置meta 禁止缓存
document.write('<meta http-equiv="content-type" content="text/html; charset=GBK"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache">');
//加载公共JS文件
var jsFile = [
CONTEXT_PATH_NAME+"/js/jquery-1.4.2.min.js",
CONTEXT_PATH_NAME+"/js/jquery.easyui.min.js",
CONTEXT_PATH_NAME+"/js/jquery.cookie.js",
CONTEXT_PATH_NAME+"/js/Toolbar.js",
CONTEXT_PATH_NAME+"/js/common.js",
CONTEXT_PATH_NAME+"/js/ajax-request.js",
CONTEXT_PATH_NAME+"/js/validator.js",
CONTEXT_PATH_NAME+"/js/tooltip_split.js",
CONTEXT_PATH_NAME+"/js/cattMsg.js",
CONTEXT_PATH_NAME+"/js/watermark.js",
CONTEXT_PATH_NAME+"/html/js/session.jsp"
];
var jsTags = "";
for(var i in jsFile) {
jsTags += '<script type="text/javascript" src="' + jsFile[i] + '"></script>';
}
document.write(jsTags);
})( window );
The widget I'm making uses Open Graph tags and I'm running into a complication when it comes to the "og:image" meta tag. I stripped out the rest of the irrelevant code, but this is what is causing the problem:
<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget>
<parameters>
<file name="ogImage" label="Image"/>
<!-- This enables the user to upload an image-->
</parameters>
<headHTML>
<meta property="og:image" content="{param_ogImage}" />
</headHTML>
</HTMLWidget>
The code that this will output is:
<meta property="og:image" content="/assets/example-image.png"/>
Facebook debugger will then say:
Object at URL
'http://www.example.com/' of type 'website' is invalid because the given value
'/assets/image.png' for property 'og:image:url' could not be
parsed as type 'url'.
So, my question is, is there a way to automatically grab and place the domain name in front of the {param_ogImage} content? Is it possible to use something like this to accomplish this task?
<script>
function myFunction() {
var x = document.domain;
document.getElementById("demo").innerHTML = x;
}
</script>
Not with current mucow's (version 3). This does appear to be something that is being added in the future version.
I've been reading about this on StackOverflow and facebook doc, yet I dont seem to be able to submit my action type.
I have the following code from the FB doc
<script type="text/javascript">
console.log("Function begins");
function postForm()
{
console.log(FB);
FB.api(
'/me/concoursvelirium:form',
'post',
{ recipe: 'http://concours.gestev.com/fbvel2012/form.php' },
function(response) {
console.log("Stay");
if (!response || response.error) {
console.log("error: " + response);
} else {
console.log('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
I have added my values from FB autogenerated values, it now looks like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# concoursvelirium: http://ogp.me/ns/fb/concoursvelirium#">
<meta property="fb:app_id" content="194081877384051" />
<meta property="og:type" content="concoursvelirium:form" />
<meta property="og:title" content="Concours Vélirium" />
<meta property="og:image" content="http://www.velirium.com/++resource++snowjamboree.theme.images/velirium-avatar-128x128.png" />
<meta property="og:description" content="Concours Vidéotron au Vélirium" />
<meta property="og:url" content="http://concours.gestev.com/fbvel2012/form.php" />
And yet I see no output in the console past the console.log(FB);
I have no idea what I'm doing wrong. I'm also getting the Unsafe JavaScript attempt to access frame with URL error, but I have read here that I should just ignore it.
Ty, Axel
I think you have two problems here:
og:url should have a valid url.
og:image can't refer to an image hosted on Facebook's servers.
I finally found the issue, and it's not that hard, provided you don't read too much facebook's doc. Even tough they give you a POST command and a JS code to validate your action, I wasn't able to validate mine. Tough there's an easier way to submit actions for approval:
Head to your app settings In the open graph section go to dashboard
Next to the action type you want to submit click the "get code"
link(remember.. action type, not the object type "get code" button)
Copy the code inside the "Create a new Complete action:" box in a
linux terminal If you got an output like: {"id":"[YOUR-ID-NUMBER]"}
congratulations, you can now submit your action!
GL HF everyone