I have read tons of posts about how to do this and they all say to use:
gapi.client.setApiKey('AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ')
gapi.client.rpcRequest('pos.plusones.get', 'v1', {
nolog: true,
id: "http://www.google.com/",
source: "widget",
userId: "#viewer",
groupId: "#self"
}).execute(function(resp) {
console.log('count:', resp.result.metadata.globalCounts.count)
});
rpcRequest no longer appears to be supported the accepted call is to .request but when using pos.plusone.get it just 404's. Is there another URL to use? Is this no longer possible. What Gives?
This still works for me:
HTML
<script src="https://apis.google.com/js/plusone.js"></script>
<script src="https://apis.google.com/js/client:plusone.js"></script>
JS
var params = {
nolog: true,
id: "http://www.google.com/",
source: "widget",
userId: "#viewer",
groupId: "#self"
};
gapi.client.setApiKey('AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ')
gapi.client.rpcRequest('pos.plusones.get', 'v1', params).execute(function(resp) {
console.log('count:', resp.result.metadata.globalCounts.count)
});
JSF: http://jsfiddle.net/rs7z5aLc/
Also, you will get the following warning:
gapi.client.rpcRequest is deprecated. See https://developers.google.com/api-client-library/javascript/reference/referencedocs
So it might be just a matter of time.
Related
I am using Vue Meta 3 to provide meta data to the website. The API for this is here
I do not understand how to provide custom meta tags( e.g Open Graph tags such as og:type). This is what I have tried to do in a component:
setup() {
useMeta({
title: "Homepage",
meta: [
{name: "hunky:dory", content: "website"}
],
description: "This is the homepage."
})
},
The HTML that gets outputted ends up like this:
<head>
<title>Homepage</title>
<meta name="description" content="This is the homepage.">
<meta name="meta" content="website"> <!-- should be <meta name="hunky:dory content="website"> -->
</head>
If I change the code to this:
setup() {
useMeta({
title: "Homepage",
"hunky:dory": [
{content: "website"}
],
description: "This is the homepage."
})
},
I get illegal HTML output:
<head>
<title>Homepage</title>
<meta name="description" content="This is the homepage.">
<hunky:dory>website</hunky:dory> <!-- total nonsense -->
</head>
How do I get the output to be:
<head>
<title>Homepage</title>
<meta name="description" content="This is the homepage.">
<meta name="hunky:dory" content="website">
</head>
There are 2 parts to getting og meta working -- I think I can help with part 1:
Correct vue-meta syntax
Server-Side Rendering (SSR)
Part 1: vue-meta for Vue 3
I wrote this with vue-class-component, and it seems to be working:
meta = setup(() => useMeta(computed(() => ({
title: this.event?.name ?? 'Event not found',
og: {
image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
}
}))))
...which presumably translates to this in vanilla Vue 3:
setup() {
useMeta(
computed(() => ({
title: this.event?.name ?? 'Event not found',
og: {
image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
}
}))
)
}
Result:
<meta property="og:image" content="http://cloudstorage.com/images/event-123.png">
References:
GitHub -> vue-meta#next -> example for vue-router
Also hinted in the readme
Part 2: SSR
Once I'd done part 1, I realized that I hadn't setup SSR... so I'm only rendering the meta for my users, not for Facebook's crawler (not very useful). I'm afraid I haven't fixed this yet on my project; perhaps someone else can pitch in that part!
Until then, maybe this will get you started:
SSR options
Vue 3's native SSR
Note on SSR in the vue-meta readme
Note: vue-meta is under the Nuxt GitHub organization => you might consider migrating to Nuxt v3 (which is built on top of Vue):
Nuxt v3 tracker issue
Slides suggesting beta this month (June 2021).
A bit late but maybe not useless for anyone facing issues with Vue 3 (and vue-meta). With the below detailed woraround, you are not dependent on any 3rd party lib.
My project is currently in development stage in local environment (so not fully tested), but a probable workaround is using beforeCreate lifecycle hook for adding meta tags if you are using Options API in Vue 3 (with vue-router), SFC way (e.g. If you are using single-file-component views for "pages" and you want them all to have their custom meta info).
In the hook method you can create DOM nodes and append them to the head like:
...
beforeCreate(){
// adding title for current view/page using vue-i18n
let title = document.createElement(`TITLE`)
title.innerText = this.$t(`something`)
document.querySelector(`head`).appendChild(title)
// adding og:image
let ogImage = document.createElement(`META`)
ogImage.setAttribute(`name`,`og:image`)
ogImage.setAttribute(`content`,`YOUR-IMAGE-URL`)
document.querySelector(`head`).appendChild(ogImage)
}
...
I'm not sure yet if this is an efficient way to make it work, but gonna try to update this post when the project is in production.
I have tested this solution with chrome plugins like this one:
Localhost Open Graph Debugger
I was having the same issues then I came across this which solves the problem for me.
Here is the link to the original post: vue3 vue-meta showing name="meta"
In vue js 3 you should use the vue3-meta or alpha version. Then do the
following
metaInfo() {
return {
htmlAttrs: { lang: 'en', amp: true },
title: "page title",
description : "Page description",
twitter: {
title: "twitter title",
description: "twitter description",
card: "twitter card",
image: "twitter image",
},
og: {
title : 'og title!',
description : 'og description!',
type : 'og type',
url : 'og url',
image : 'og image',
site_name : 'og site name',
}
}
}
if you want to use meta name then change the config in main.js
import { createMetaManager, defaultConfig, plugin as metaPlugin } from 'vue-meta'
const metaManager = createMetaManager(false, {
...defaultConfig,
meta: { tag: 'meta', nameless: true },
});
and in your component use the meta name below
metaInfo() {
return {
meta: [
{'name' : 'author', 'content' : 'author'},
{ name: 'description', content: 'authors' },
]
}
}
I am porting a chrome extension to firefox and want to keep as much code as possible. I am working with the sdk and I am new with JavaScript, so please bear with me if it is just a nooby mistake ;)
I need to get some stuff via a couple of XMLHttpRequests in content-scripts.
The "firefox-way" of doing things would be to use the sdk-request-api and work via messages between the main- and the content-script like so. Besides the fact that it would mean a lot of work for me to implement this throughout the whole addon, I also need to get binary data, which seems not to be possible.
The workaround for this is documented here. I would prefer to avoid this, since I think I read somewhere that it is a beta-feature right now and it seems to be pretty "work-aroundy".
Ideally I would like to implement it this way. In the upcoming Firefox 24 it should be possible to allow content scripts to access certain domains. Therefore I am using Firefox Aurora right now. I added the following code to my package.json:
"permissions": {
"cross-domain-content": ["http://mozilla.org"]
}
My main.js creates a panel when a button is clicked and loads the scripts into it:
var testPanel = require("sdk/panel").Panel({
contentURL: data.url("pages/background.html"),
contentScriptFile: [data.url("util/jquery-1.8.2.min.js"), data.url("pages/xhrTest.js")]
})
testPanel.show();
And this is my xhrTest.js:
var xhr = new XMLHttpRequest();
xhr.open("GET","http://mozilla.org",true);
xhr.onerror = function () {
console.log("Error");
};
xhr.onload = function () {
console.log("loaded");
}
xhr.send();
While debugging, it jumps from status 2 to 4 with an empty response and calls the "onerror". The status is 0, statustext is empty and I don't see any other indicators of what went wrong.
Now I don't know if this is still the same-origin-policy blocking me, or if I did something else wrong?
I'd really appreciate any help I can get :)
Thanks in advance,
Fabi
Hrm, I can't really see a glaring error. Here is an example add-on based on the docs that does work, at least it does for me in Firefox 24 Beta:
Main.js:
// main.js
var data = require("sdk/self").data;
var panel = require("sdk/panel").Panel({
height: 250,
contentURL: data.url("panel.html"),
contentScriptFile: data.url("panel-script.js")
});
panel.on("show", function(){
panel.port.emit("show");
});
require("sdk/widget").Widget({
id: "test-widget",
label: "Test-Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: panel
});
Panel.html:
<!doctype HTML>
<html>
<meta charset="utf-8">
<head></head>
<body>
<pre id="forecast_summary"></pre>
</body>
</html>
Content script:
// panel-script.js
var url = "https://hn-test.firebaseio.com/articles/e5b10c82600b51732af584583a7f57c4a7c01bff.json";
self.port.on("show", function () {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.onload = function () {
var element = document.getElementById("forecast_summary");
// formatting
var pretty = JSON.stringify(JSON.parse(request.responseText), null, ' ');
element.textContent = pretty;
};
request.send();
});
Package.json:
{
"name": "jp-crossdomain-xhr",
"fullName": "jp-crossdomain-xhr",
"id": "jid1-B2RaQxOBKox8wA",
"description": "a basic add-on",
"author": "",
"license": "MPL 2.0",
"version": "0.1",
"permissions": {
"cross-domain-content": ["https://hn-test.firebaseio.com"]
}
}
Github Repo
I begin learn about Sencha Touch 2. So, I have had many problems to ask! ^^ Let's research it.
Now I have a data json like:
{
result: "SUCCESS",
national: [
"Afghanistan",
"Albania",
"Albania",
"Algeria",
"American Samoa",
"Andorra"
]
}
Then, I will load it from url: nation.php file.
How can i load it to My Select Field.??????
Share and Support to me.! Thanks :).
I don't know how to do this in Sencha Architect 2 ( i am not using it).. but still
Instead of asking question without try (I mean you didn't post tried code here), Better you start with Sencha Touch Documentation.
Anyway, you can do it as follows
Model
Ext.define('AppName.model.countries', {
extend : 'Ext.data.Model',
config: {
fields: [
{name: 'name', convert: function(value, record) {
return record.raw;
}}
],
}
});
Store
var myStore = Ext.create("Ext.data.ArrayStore", {
model : 'AppName.model.countries',
proxy: {
type: "ajax",
url : "nation.php",
reader: {
type: 'json',
rootProperty : function(data) {
return data.national;
}
}
},
autoLoad: true
});
Select Field in View
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'selectfield',
store: myStore ,
valueField:'name',
displayField:'name'
}]
});
With Viswa's Support. :) I found this problem - XMLHttpRequest cannot load. Origin is not allowed by Access-Control-Allow-Origin error (browser policy security).
And Sencha Touch document say: " The JsonP proxy is useful when you need to load data from a domain other than the one your application is running on. If your application is running on http://domainA.com it cannot use Ajax to load its data from http://domainB.com because cross-domain ajax requests are prohibited by the browser.
" Also, All we need to do is - "Implement all api in Your Webserver" and Follow JsonP's format code: ( in PHP)
$callback = $_REQUEST['callback'];// check callbackkey
// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');// output data.
//start output
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
If. Using Sencha Touch 2.1, You can use:
Ext.data.JsonP.request({
url: 'http://otherdomain/svn_visaapi/trunk/api/visa_api.php/test_json',
callbackKey: 'callback',
success: function(result) {
console.log(result);
//Your success function here...
}
});
- If, Using Sencha Architect, you can use a Store.proxy.JsonP to call api.
- Read more document Sencha Touch 2.1 to see that.
i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp
I'm using MonoRail and tried to write a tag within a .vm view to write some JavaScript:
<script type="text/javascript">
//<![CDATA[
$j(document).ready(function()
{
$j('#business_parentbusinesstype_id').change(function()
{
$j.ajax({
url:'http://localhost:88/admin/business/GetChildBusinessTypes',
data: { parentId: $j('#business_parentbusinesstype_id').val() },
dataType: 'script'
});
});
});
//]]>
</script>
You would think that this would work since it's an HTML page but it gives me this error:
Unable to process resource 'admin\business\new.vm': Encountered "\r\n url:\'http://localhost:88/admin/business/GetChildBusinessTypes\',\r\n data: { parentId: " at line 7, column 12.
Was expecting:
...
What am I missing?
I'm wondering if nVelocity is seeing the "$j" and trying to find it in the property bag and execute the "ajax" method. If the "$j" is the short-hand for jQuery, try changing it to the full "jQuery" and see if that works.
Monorail uses the $ sign for objects in the Property Bag. Some things you can do is you can either use the longhand(jQuery.someFuntion()), or move the js to its own js file that you then just include in your vm file.