Like button does not display the comment box - facebook-like

I use the code:
<script type="text/javascript">
//<![CDATA[
(function() {
document.write('<fb:like data-href="MY_SITE" class="fb-like" data-send="false" data-layout="stardant" data-width="450" data-show-faces="false" data-action="like" data-colorscheme="dark" data-font="verdana"><\/fb:like>');
var s = document.createElement('SCRIPT'), s1 =document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://connect.facebook.net/pt_BR/all.js#xfbml=1';
s1.parentNode.insertBefore(s, s1);
})();
//]]>
</script>
The problem is when you click the button, the comment box is not displayed, but the LIKE works normal, appear on my profile. I need this code because it is valid XHTML.

I think that it should be data-layout="standard" instead of stardant. Data-layout is a valid FB property?
And 2nd: If you have an old vers on IE and want to use you have to add an XML namespace to html tag:
<html xmlns:fb="http://ogp.me/ns/fb#">

Related

Create multiple links to websites in main menu of Google Sheets

Well, thanks in advance for those who will help me to solve this one.
What I am trying to do is to create clickable itens in the main menu of Google Sheets. The step of creating multiple drop list items is already overcome, using this script to create menu itens:
const onOpen = () => {
const ui = SpreadsheetApp.getUi();
const parentMenu = ui.createMenu('Partners');
parentMenu.addItem('Thebest50s','openWebsite');
parentMenu.addItem('The20best','openWebsite');
parentMenu.addToUi();
};
Used this HTML as a reference:
<!DOCTYPE html>
<html>
<body>
Click here to open the webpage.
</body>
<script>
var windowReference = window.open('<?= url; ?>', '_blank');
if (windowReference !== null) {
google.script.host.close();
}
</script>
</html>
And this script to open the first item of the menu when the client click in it:
const openWebsite = () => {
const htmlTemplate = HtmlService.createTemplateFromFile('url.html');
htmlTemplate.url = 'https://www.theworlds50best.com/list/1-50';
const htmlOutput = htmlTemplate.evaluate().setHeight(50).setWidth(200);
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(htmlOutput, 'Thebest50s');
Utilities.sleep(2000)
But obviously I didn't open the second item when I click in it.
I try to put some conditions, but it didn't help. Could someone help to solve this: when click in The20best items it opens https://www.getbento.com/blog/best-restaurant-websites-design/
Try using this script:
function onOpen() {
SpreadsheetApp.getUi().createMenu("Partners")
.addItem("Thebest50s", "openBest50")
.addItem("The20best", "openBest20")
.addToUi();
}
/**
* Run when "Thebest50s" is selected from the "Partners" menu is clicked.
*
*/
function openBest50(){
openUrl("https://www.theworlds50best.com/list/1-50'")
};
/**
* Run when "The20best" is run from the "Partners" menu or when the red YouTube button is clicked.
*/
function openBest20(){
openUrl("https://www.getbento.com/blog/best-restaurant-websites-design/")
}
function openUrl(url){
const blob = `
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div id="blocked" hidden>
<p>Go to link! \>\></p>
<p>You may have popups blocked for Google Workspace.</p>
<p>You can always remove the popup block for next time. 👍</p>
<button onclick="google.script.host.close()">Close</button>
</div>
<script>
const urlLinked = window.open("${url}");
if(urlLinked){
google.script.host.close()
}else{
document.getElementById("blocked").hidden = false;
}
</script>
</body>
</html>
`
const html = HtmlService.createHtmlOutput(blob)
.setWidth(400)
.setHeight(200);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html,"Link")
};
This script should show create a custom menu with 2 different options: TheBest50s and The20Best. You may want to update the menu information as you desire. The problem with your previous script is that you never set the URL for The20Best therefore clicking on it will not redirect the user anywhere.

Values from controller are not displayed

I am trying to introduce Angular in my Django app. I doubt, that my problem is directly correlated with interpolateProvider which is needed because of django templates... but who knows.
I also have a problem with simplified version of that: http://jsfiddle.net/33417xsm/
This is my current version:
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="/static/js/libs/angular/angular.js"></script>
<script type="text/javascript" src="/static/js/app/app.js"></script>
</head>
<body>
<div ng-controller="MyAppController">
[[ 2 + 4 ]]
<p>[[ MyAppController.product.title ]]</p>
</div>
</body>
</html>
file: app.js
(function(){
var app = angular.module('MyApp', []);
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}
);
app.controller('MyAppController', function (){
this.product = gem;
});
var gem = {
'title': 'Inferno'
};
})();
My result:
As you can guess, I want to also display Inferno. What I am doing wrong?
Your app config is ok. But i see, you didn't understand clearly angular concept.
You must use $scope to binding data. Also you never need "myController.product" like this notation.
I updated your code http://jsfiddle.net/33417xsm/4/
<div ng-app="MyApp" ng-controller="MyAppController">
{{ 2 + 4 }}
<p>{{product.title}}</p>
</div>
var app = angular.module('MyApp', []);
app.controller('MyAppController', function ($scope){
$scope.product = {"title":"product title"};
});

document.getElementById to include href

<script type="text/javascript">
document.getElementById("IDOFELEMENT");
</script>
What is the correct way to turn this into a link?
Can I write
<script type="text/javascript">
document.getElementById("IDOFELEMENT").href("http://www.address.com");
</script>
Many thanks.
javascript:
// this changes the href value<br>
document.getElementById("IDOFELEMENT").href = "http://www.address.com";
and the html:
<a href="www.toBeChanged.com" id="IDOFELEMENT">To Website< /a>
You should specify what kind of element is IDOFELEMENT. But you can't convert it to a link by just adding a href attribute, it only works if IDOFELEMENT
is an hyperlink like <a id="IDOFELEMENT">stuff</a>
Simplest way is to add an onclick event to the element that changes the url to desired address:
<script type="text/javascript">
var element = document.getElementById("IDOFELEMENT");
element.setAttribute('onclick', 'window.location.href=\'http://address.com\'');
</script>
Or if you wanna wrap it with a hyperlink:
<script type="text/javascript">
var element = document.getElementById("IDOFELEMENT");
var parent = element.parentNode;
var link = document.createElement('a');
link.href = 'http://www.address.com';
link.appendChild(element.cloneNode(true));
parent.replaceChild(link, element);
</script>
I hope this helps you.
I came accross the issue - Javascript error: Cannot read property 'parentNode' of null.
I discovered this was due to executing this code while the DOM is not ready.
window.onload solved the issue for me.
<script>
window.onload = function() {
var element = document.getElementById("IDOFELEMENT");
var parent = element.parentNode;
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(element.cloneNode(true));
parent.replaceChild(link, element);
};
</script>
You just need to wrap your element in an anchor tag as follows...
<a href="http://www.address.com">
<div id="IDOFELEMENT">
... content ...
</div>
</a>

Use of functions in Facebook's JavaScript SDK

I got the Facebook login/logout functionality to work, but had to do it with this un-elegant code like this:
<script type="javascript">
function loadfb() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<body onload="loadfb()">
I plan on putting that Facebook login button on all the pages of the site, so I really don't want to have this function called onload of every page.
Is this function necessary? I don't completely understand what it is for. What is a better way to do this so I can take it out of my onload?
Thanks!
This code is for asynchronous loading of the Facebook JavaScript SDK. What it does is create the tag
<script async scr="https://connect.facebook.net/es_LA/all.js" ></script>
inside the <div id="fb-root"></div> element. While loading the SDK asynchronously is considered better practice, you can leave out this code and manually enter the script tag yourself - eg:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script>
FB.init({
...
});
</script>

Why are my script tags rendered outside my body tag?

This is my nhaml code
^ var title=""
!!! XML
!!! Strict
%html{xmlns="http://www.w3.org/1999/xhtml"}
%head
%title
Nhaml Master #{title}
_styles
%body
.page
%h1 = "hello world"
_
_scripts
The resulting HTML renders the last tags as such:
</div>
</body>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript">
</script>
</html>
As _scripts is still at the indentation level of %body +1, why does it close body down before rendering _scripts?
Does it work if you move the scripts above the partial? If so, then the partial may be to blame.
%h1 = "hello world"
_scripts
_