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

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!

Related

Fb Pages embedding plugin not load

I'm trying to use the plugin
https://developers.facebook.com/docs/plugins/page-plugin/
to load the timeline of a page on a php site
I also created at https://developers.facebook.com
an app ... and I put it live
but nothing has changed.
it's strange because on some computers it works, on others it doesn't
how it doesn't work on mobile.
I don't understand why.
the error message makes me think that the problem is browsers blocking the plugin and I tried to follow this, to catch the problem.
Facebook Sdk blocked : How to detect if a user is using Ghostery?
the code taken from fb is the following:
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v15.0&appId=536891684570335&autoLogAppEvents=1" nonce="Y1MwGcHs"></script>
<div class="fb-page" data-href="https://www.facebook.com/autodriveskicup/" data-tabs="timeline" data-width="500" data-height="725" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/autodriveskicup/" class="fb-xfbml-parse-ignore">
Autodrive Ski Cup
</blockquote>
</div>
the result can be seen here:
www.autodrive.org
Can anyone help me?
I just want the plugin to load the timeline
or alternatively be able to read the error and hide the fb div and show an alternative image when the plugin doesn't work

How can I integrate Google Charts on AMP pages

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>

Add2Any print preview instead of print

I use AddToAny plugin to a Joomla website. I need to replace the code so I can "preview page" instead of "print" (ctrl+p).
I found AddToAny files into /plugins/content/addtoany, but I see no code for print service code
There is no code in the plugin for links generation, unless if you're talking about the css class to add a specific link (see below).
All the links are generated via the AddToAny's js: http://static.addtoany.com/menu/page.js
As you probably already know, all the rendering is generated with classes (powered by the js file above): https://www.addtoany.com/buttons/customize/standalone_services
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
This means the links themselves are not "generated" in the plugin, so your solutions are whether try to override the plugin via the MVC override plugin or develop your own solution.

Facebook Share Button breaks my SSL/HTTPS

Facebook Share Button breaks my SSL/HTTPS connection in Chrome. Chrome is displaying a red HTTPS with a (/) slash displaying acroess the https.
Its states:
Your connection to XXXXXXXXXX.com is encrypted with 256-bit encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the behavior of the page.
The connection uses TLS 1.0
The connection is encrypted using AES_256_CBC, with SHA1 for message authentication and DHE_RSA as the key exchange mechanism
The connection is not compressed.
How can I fix this issue? My code for Facebook is listed below:
name="fb_share"
share_url="https://mysexywear.com/product_details.php?prodId=<?php echo $prodId;?>&catId=<?php echo $catId;?>"
href="https://www.facebook.com/sharer.php">Share
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"
Try using a relative protocol, like so:
name="fb_share" share_url="//mysexywear.com/product_details.php?prodId=&catId=" href="//www.facebook.com/sharer.php">
try this url ;)
https://facebook.com/connect.php/js/FB.Share
src="https://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"
Surely that would work?
use this codes:
<script>
function fbs_click()
{
u=location.href;
t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<style>
html .fb_share_link {
height:18px;
display:block;
float:right;
margin-top:1px;
width:57px;
background:url(https://www.kiraguru.com/images/fbshare.png) no-repeat top left;
}
</style>
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link"></a>
Change the " https://www.kiraguru.com/images/fbshare.png " field and change style code for your custom design.
!!! Important -> You have to use https:// for share button image.
Thanks.
Referencing this link to the Share Button JavaScript code will return a Security Certificate error warning in each of the major web browsers:
https://static.ak.fbcdn.net/connect.php/js/FB.Share
Until Facebook resolves the issue it is not possible to acheive a satisfactory user experience that uses the JavaScript-implemented Share button within a website served over https.
I'd suggest one of two workarounds:
1) Implement a "fake" Share button by creating a Share URL and applying it to an image:
<a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.your_url_encoded_webaddress.com" target="_blank">
<img src="../images/Share_Button.png" border="0" />
</a>
2) Use one of Facebook's non-deprecated Social Plugins ("Like" or "Send") to achieve similar functionality. Both of these are still fully supported and work over https:
http://developers.facebook.com/docs/plugins/

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.