How can I integrate Google Charts on AMP pages - charts

I use Google Table Charts in my "normal" (NON-AMP) pages. But in the AMP pages they are not there. When I load my page without /AMP at the end I can see the tables and with /AMP at the end not.
Example:
https://lotto-6-aus-49.de/lottozahlen-von-heute-mittwoch-den-20-03-2019
and
https://lotto-6-aus-49.de/lottozahlen-von-heute-mittwoch-den-20-03-2019/amp
To get AMP pages on my site I use a wordpress plugin. I searched for adding "java scripts" in AMP site but cannot find.
Can someone help me?

First of all you need a template with your charts. Let's call that template.html
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="/template.html"></amp-iframe>
You can put all of your js into that template. The iFrame should work.
But please keep in mind that iFrames are only allowed when below 80% from the top of the page.
if you need to load dynamic content, you could create a php file which accepts parameters and returns a html file that does include the chart.
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="/charts.php?startDate=2019-01-01&endDate=2019-02-01"></amp-iframe>

Actually you can't.
You need JavaScript for that which doesn't work with AMP.
added:
iFrame Solution:
First you create a template (html + js) that does show the chart you want to display. Then you import that template file using amp-iframe.
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="pathtotemplate/template.html">
</amp-iframe>

Related

Why my amp site with amp-facebook-comments not show?

My website at: https://2top.xyz
My issues:
AMP Facebook Comment plugin not show
Test site: https://2top.xyz/dieu-khoan-cung-cap-va-su-dung-dich-vu-tai-website-2top.1574766128301
I read at: https://amp.dev/documentation/examples/components/amp-facebook-comments/?format=websites and my code is:
At header:
<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
At my body post:
<amp-facebook-comments width="486"
height="657"
layout="responsive"
data-href="https://2top.xyz/dieu-khoan-cung-cap-va-su-dung-dich-vu-tai-website-2top.1574766128301">
</amp-facebook-comments>
I don't know why this plugin not show, please help me! Thanks!
Note: this is my custom site I build with golang, upcloud vps and cloudflare cdn!
I resolved this issues myself. Because I didn't define width of parent <div> which contains the <amp-facebook-comments> component. So my final code is:
<div class="comment" style="width:100%">
<amp-facebook-comments
width="480"
height="720"
layout="responsive"
data-href="https://2top.xyz/dieu-khoan-cung-cap-va-su-dung-dich-vu-tai-website-2top.1574766128301">
</amp-facebook-comments>
</div>
And it's working now!

create muliple HTML page in GWT

I am new in GWT. Is this possible to create multiple HTML pages in GWT? and if can create, than it is relevant to create page?
If you find any html page in gwt, you will find two entries which is common to all html page of gwt.
That is below.
<script type="text/javascript" language="javascript" src="{modulename}/{modulename}.nocache.js"></script>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
It loads module.cache.js into iframe.
So In short gwt work on one page only. it is single page application.
Refer: how you can do multipage in gwt?
If your objective is to have multiple page patterns for the same GWT application, you can create multiple pages, GWT won't prevent you from doing that (it doesn't even know it is called from different HTML pages).
So technically it is possible, now it is said, I won't recommend you doing that. You'd rather do different css files and swap between them. It will be easier to maintain your app.

Facebook comments are duplicated on every page

I am trying to integrate facebook comments into my website (I tried to do it several months ago but there didn't seem much support about and I couldn't fathom it). The comments are showing and I managed to get the comment to show on my facebook wall under the individual post/item they were meant for but unfortunately it is posting the same comment under every post. You can see the box working here: http://www.roomfor5.co.uk/item/6726
The website is php based and the code I am using is: " title="" url="" width="600" publish="true" >
I have also used this code without success: " width="600" publish="true" >
I know it's something to do with the xid attribute but I am stumped as to why it is duplicating:(
Hi when looking at the view source of your page I see this:
<fb:comments
xid="http://www.roomfor5.co.uk-<?=str_replace('/','-',$_SERVER['REQUEST_URI']);?>"
num_posts="2"
width="600"
publish="true" >
</fb:comments>
So the fb:comments tag is not getting rendered out fully.
Also on the rendered page, it says you haven't specified the url. while there is a malformed xid= attribute, you really should have a url= attribute. See https://developers.facebook.com/docs/reference/plugins/comments/
Warning: this comments plugin is operating in
compatibility mode, but has no posts yet.
Consider specifying an explicit 'href' as
suggested in the comments plugin documentation
to take advantage of all plugin features.
EDIT:
For http://www.roomfor5.co.uk/item/6726, you have
<div
class="fb-comments"
data-href="http://www.roomfor5.co.uk"
data-num-posts="5"
data-width="600">
</div>
The data-href attribute should be http://www.roomfor5.co.uk/item/6726 not http://www.roomfor5.co.uk
If you click 'View source' you'll see the rendered HTML:
<fb:comments xid="http://www.roomfor5.co.uk-<?=str_replace('/','-',$_SERVER['REQUEST_URI']);?>" num_posts="2" width="600" publish="true" >
It looks like you're trying to specify a unique xid for the page but the server-side script is behaving like plain text.

Is it possible to put an iframe inside a Facebook page tab?

According to the Facebook developer roadmap, it will soon be possible to put iframes inside page tabs but it's not yet available. I came across this Store Locator on Coach page which uses an iframe to display a Google map inside a tab :
http://www.facebook.com/Coach?v=app_168904438199&ref=ts
Looking at the source code, I see the map really is inside an iframe. How is this possible?
in STATIC FBML pages you CAN'T USE IFRAMES - no matter what FBML code you put in there, facebook have specifically made the code not work in in business page/tab static fbml pages - my guess is so they can prevent people setting up Amazon stores or other content that uses IFrame (spammers and spyware often use iframes) - the updates are in their 2010 wiki - so it's probabley also a security thing.
I frames can still be used on developers canvas pages apparently but the customer has to click on an image for it to activate rather than the iframe automatically loading - again this is probably a security issue to prevent driveby downloads - where zwinky and similar toolbars are forced onto people computers in the background via iframes without their knowledge.
However some say it does work although you need a user to click on it before it works. if you can live with that then go for it.
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;"><center>→our website</center></a><div id="outside_location"> <fb:iframe width="730" height="400" frameborder="0" src="http://www.fborder.com/" /> </div>
<fb:js-string var="location_two"> <fb:iframe width="730" height="600" frameborder='0' src='http://www.fborder.com/' /> </fb:js-string> <script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script>
check out this post. people have got it to work. and some say it wont work for the obvious reasons. such as security and so on. but give it a go regardless.
http://www.facebook.com/topic.php?uid=4949752878&topic=7081
PK

Facebook IFrame on page canvas?

Hey guys, I have developed a small site that i would like to embed into a tab on a facebook page.
Previously I used this code to load in an iframe, it worked great:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Link 1</a> | <a class="red" onClick="outside_location.setInnerFBML(link_2);" style="cursor: pointer;">Link 2</a>
<div id="outside_location"></div>
<fb:js-string var="link_1"><fb:iframe width="760" height="1280" frameborder='0' src='http://www.WebWhispers.in' /></fb:js-string>
<fb:js-string var="link_2"><fb:iframe width="760" height="1280" frameborder='0' src='http://google.com/' /></fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = d
document.getElementById('outside_location');
</script>
However, it has stopped working. I dont think facebook allows iframe inside of pages, only applications.
How can I load this page in without learning FBML? The site uses Jquery so I cant use FBML anyway.
I know applications can use iFrames, can I make it an application and then embed the application into a page tab somehow?
No. Tab pages can not contain iFrames. They must be written using FBML and FBJS.
One reason for this is that Facebook does not want to enable Tab pages to detect who looks at them. All requests (including images) on tab pages are proxied through Facebook for this reason. If iframes were allowed then the application would be able to detect who looked at it, which would present a privacy issue for Facebook users.
This is either a policy change by Facebook or, more likely, a bug. I say it's unlikely to be a policy change as it throws a script error, whereas a policy change would more likely strip the code out before it's rendered.
There's a bug report you can add votes to and follow here.