I have a problem with CKEDITOR 4.x. We work a lot with embed objects: twitter, Facebook posts, VINE, Youtube etc. We need to user to be able to see the embed content.
For those using IFRAME, we just disable the iframe plugin and now the placeholder is gone. We are able to see exactly the content of the embed on the editor.
For those services using DIV + SCRIPT like FACEBOOK, we are unable to have a WYSWYG view on the editor. For example, this is a Facebook embed code:
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/gizmodo/posts/10153278450443967" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/gizmodo/posts/10153278450443967"><p>Everybody knows companies like Keurig and Nespresso really just want to sell you bad, wasteful coffee for over $50 a pound.</p>Posted by Gizmodo on Friday, May 8, 2015</blockquote></div></div>
I believe the problem is the scripting is not working on the edit view.
Is there an issue way of doing this?
Related
In a website i have a left menu that change the right side using ajax. Fine, quick. The right side is a .load file, only this file change.
I would like to give the possibility to the user to share the current view in Facebook. But in this case when the .load file change, Facebook SDK must also reload.
Like on the other parts of the website, I've add:
After :
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyAppID',
xfbml : true,
version : 'v2.2'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And where I want to display Like and Share buttons:
<div class="fb-like" data-href="MyURL" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
Facebook SDK load only when the first time, when I load the complete page include the .load page. So fb buttons are not displayed. Is there a way to force Facebook sdk to load ?
Thanks.
You don’t need to load the SDK multiple times (in fact, the code is specifically written to not let you do that).
What you need to do, is tell the SDK that there’s new elements in the DOM, that you want to be parsed into social plugins – and that’s what the FB.XFBML.parse method is for.
So call that method after you added new elements to the DOM – either for the whole page, or only for a specific sbu-tree of the DOM, by passing a DOM element reference as parameter.
I use ajax to render a content page with a Facebook Like Button plugin in it.
The problem is that when the user clics Like, Facebook will extract meta info but I don't know how to assign the meta with ajax.
I tried using append to head int FB.init but it seems to not work and the update isn't reflected when users like the page on Facebook
$('head').append("<meta property="og:title" content="The Rock"/>');
The problem is that facebook like will extract meta info but I don't know how to assign the meta with ajax.
I tried use append to head int FB.init but it seems not work.
Of course this does not work, because Facebook’s scraper requests your URLs from your server – and does not care about what the DOM might currently look like in any user’s browser.
You can not add Open Graph meta data client-side.
Actually you can use such script:
/// Append Meta tags
function setMT(metaName, name, value) {
var t = 'meta['+metaName+'='+name+']';
var mt = $(t);
if (mt.length === 0) {
t = '<meta '+metaName+'="'+name+'" />';
mt = $(t).appendTo('head');
}
mt.attr('content', value);
}
and call this function from body:
setMT('property', 'og:title', 'Title for Facebook');
I have similar on the News Site at http://www.livepage.info
be careful with using '.append()'.
According to the JQuery Docs, this method has a move effect (reads from source, copies to destination and removes the source).
A theoretical way is something like this:
headObj = $("head");
keywordObj = $(headObj).find("meta[name='keywords']");
newKeywords = $(keywordObj).attr("content");
newKeywords += myKeywords;
$(keywordObj).attr("content", newKeywords);
Download and install the plugin FireBug for browser FireFox, so you can check the changes at runtime.
I have a Facebook like button that is loaded using ajax.
The button works, but strangely in firefox it doesn't appear.
<fb:like href="#Model.Url" show_faces="true" height="30" width="400" ></fb:like>
In Firefox the html produced comes with the height = 0px. Why?
<span style="height: 0px; width: 400px;">
<iframe id="f2b3cbcbf388e" class="fb_ltr " scrolling="no" name="f3cdf7e205a545e" style="border: medium none; overflow: hidden; height: 0px; width: 400px;" ....
This doesn't happens on Chrome.
Related to facebook I only have this before close body tag
<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=00000";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
I'm still investigating the cause, but in my case, I think it is because the containing div is hidden at the time of the XFBML parse. Still looking for a better solution but this can be fixed by clearing the added height css manually like so:
FB.XFBML.parse(document, function(){
$('.fb_button_container iframe').css('height','');
$('.fb_button_container .fb-like > span').css('height','');
});
this uses jquery... you could easily not use it if you prefer.
Also in this case I had added the like button inside of a container with class "fb_button_container" -- that is not something auto-generated.
If I have more than 1 Facebook like button per page, he has a strange behavior.
I moved the button to the details page instead of the list page and this solved my problem.
I had the same problem. Button was rendered correctly in all other common browsers except Firefox. Somehow the span's inline style was set to 0px in Firefox. Thanks to theozero I finally managed the button to be rendered correctly. Like theozero I had the Facebook Like Button placed within a div that is hidden with JS on page load. With theozero's answer I found Facebook's documentation of the FB.XFBML.parse and placed their re-parse function exactly at the end of their originally provided Facebook JavaScript SDK (last line):
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();
And voilà the button was rendered!
EDIT: Too happy too soon. That only worked, cause immediately on page load I unhid the div containing the button. I than put the parse function into the JS that unhides the div. That works. It does. But now the element isn't toggling smoothly anymore... Argh! Facebook! Hole!
EDIT: So! Now it's done. Had to call the re-parse as callback on the slideToggle function, to re-parse the element when the toggling action was finished. .slideToggle('slow', function(){ FB.XFBML.parse(); }); Sure, the like button visibly pops up then suddenly, but I can live with that, although I could let the button fade hin somehow.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
For 2 weeks now i have tried to impliment the google conversion code to one of my ajax form landing page.
what i had in the ajax after success is
var google_conversion_id = **MYID**;
var google_conversion_language = "iw";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "**MYLABEL**";
var google_conversion_value = 0;
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
i just didn't work. in firebug i could have seen the js loads after filling the form but no conversion on the page
now what i have ending up doing is adding iframe - hidden, to the success message after the ajax.
this is working but for me is not the right way i wanted to do it
can anyone confirm my code is ok, or help understanding way it didn't work?
I got it to work using a dirty hack.
document.write = function(text) {
$('#footer').append(text);
};
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
This is not ideal but it works for me until they remove the document.write from their script.
The current version of google adwords snippet uses document.write (see line 14 of conversion.js) which does not work after your page is loaded. The way I solved my problem is to use an iframe as what you did.
Here are more discussions.
http://groups.google.com/group/adwords-help-advanced/browse_thread/thread/2ef3ee7dc5863e86?pli=1
I have protocol (like http) with scheme managed with 3rd party App registered in Mac OS X.
I.e, x-someapp://someaction or something like that.
How can I open this URL with Google Chrome?
By default, Chrome starts searching in Google engine instead launching App and passing URL handling to it...
Safari launches some registered App. And it is right thing.
Firefox and Opera asks what to do... and I can launch App also.
But Chrome... Doesn't ask.
I even tried to write some HTML page with JavaScript inside to send XHttpRequest:
function _httpExecuteCallback()
{
if (httpRequestCallbackFunction != null) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
httpRequestCallbackFunction();
httpRequestCallbackFunction = null;
}
}
}
}
function _httpGet(url, callbackFunction)
{
httpRequest = false;
httpRequestCallbackFunction = callbackFunction;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = _httpExecuteCallback;
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
_httpGet('x-someapp://test',function(){})
No results also...
The current accepted solution has a problem with Chrome for SSL https. Watching the console log, Chrome blocks the request because it thinks the custom url protocol is not secure:
[blocked] The page at reports blah blah ran insecure content from customproto//blah blah
Here is a solution (this took me a few days to research):
<input type='button' value='Test Custom Url' onclick='exec()'>
<script>
function submitRequest(buttonId) {
var d = (window.parent)?window.parent.document:window.document
if (d.getElementById(buttonId) == null || d.getElementById(buttonId) == undefined) return;
if (d.getElementById(buttonId).dispatchEvent) {
var e = d.createEvent("MouseEvents");
e.initEvent("click", true, true);
d.getElementById(buttonId).dispatchEvent(e);
}
else {
d.getElementById(buttonId).click();
}
}
function exec(){
var d = (window.parent)?window.parent.document:window.document
var f = d.getElementById('customUrlLink')
if (f ) {f.parentNode.removeChild(f);}
var a = d.createElement('a');
a.href = 'mycustomproto://arg1';
a.innerHTML = "Link"
a.setAttribute('id', 'customUrlLink');
a.setAttribute("style", "display:none; ");
d.body.appendChild(a);
submitRequest("customUrlLink");
}
</script>
This code will not work for IE. I've found using this technique IE limits the argument of the custom protocol to less than 1000 where as using the iFrame technique IE will allow 2083 chars.
The only way to overcome the url limit in javascript is chuck the data and call multiple times. If anyone wants to take a stab at that, please let me know how it goes. I would like to use it.
To handle long urls in the executing app, pass a token into the app and have it go get the data from a url GET.
So for right now I am using one function for Chrome/FF and another function for IE.
These links helped me develop this solution:
https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
Simulating a click in jQuery/JavaScript on a link
(wish I had known this a few days ago....hope this helps someone)
==================================================
Update: (8hr later)
==================================================
Jake posted a great solution for chrome: https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
This works in chrome only:
window.location.assign("customprotocol://");
It will fail in an iframe so this is working:
var w = (window.parent)?window.parent:window
w.location.assign(service + '://' + data)
==================================================
Update: (weeks later)
==================================================
All of the examples of opening the custom protocol, including my own, have a "://" in the url. And this is what is causing the SSL warnings.
Turns out the solution is to change "://" to ":"
so do this:
src="x-myproto:query" .....
and the SSL warnings will go away.
==================================================
Follow: (after months of production use)
==================================================
This has been working well for chorme. Detect the browser and if chrome do this:
var w = (window.parent)?window.parent:window
w.location.assign('myproto://xyzabcdefetc')
For IE and other browsers I do something slightly different.
Note that browsers do impose a limit on how much data you can put in custom url protocol. As long as your string is under 800 chars this seems to be the magic number for which works in all browsers.
It looks like it's Google's locationbar parsing which is getting in the way.
The browser, however, does seem to handle custom URL schemes properly. Try this in your locationbar:
javascript:document.location = 'myscheme://whatever'
Any link on your page that uses the custom scheme should also do the right thing.
I found the solution that works with Chrome.
I use the IFRAME-way.
Example (with JQuery):
$("body").append('<span id="__protoProxy"></span>');
function queryWord(aWord)
{
var protoProxy = document.getElementById('__protoProxy');
if (protoProxy)
{
var word = aWord.replace('"','\"');
protoProxy.innerHTML = '<div style="display:none;"><iframe src="x-myproto://query?' + word + '"></iframe></div>';
}
}
queryWord('hello');
Here's a solution that also includes a redirect to the App Store / Play Store if the user doesn't have the app. It uses a setTimeout for this. It also makes use of an iframe to support more browsers. So this works on Chrome, and any other mobile browser. We use this as my company, Branch. Just modify the two links below to correspond to your URI and App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://somepath";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
Again, this should work on any browser, thanks to the iframe.
If Chrome does not recognize the URL scheme, it defaults to a search.
This is what I see in Safari:
alt text http://img62.imageshack.us/img62/6792/clipboard02oh.jpg
and in Firefox:
alt text http://img138.imageshack.us/img138/9986/clipboard04xk.jpg
I believe the reason why Chrome defaults to search is that there are special google searches that use the colon.
E.g:
define: dictionary
filetype:pdf google chromium
This is one of the annoyances I have with Firefox, I have to jump to the "search box" rather than the address bar to execute these types of searches. Since Chrome does not have a separate search box like Firefox, IE and Safari have, this functionality is required.
Ajax requests won't get you around this.
Some weeks later ....
Looks like window.location.replace('myscheme://whatever') has full cross-browser support , works with chrome,firefox,safari,edge,opera see https://developer.mozilla.org/en-US/docs/Web/API/Location/replace