ok:
<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/all.js#xfbml=1&appId=121106444664072";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.facebook.com/pages/Inferno-Online-Stockholm/149232401793444" data-num-posts="2" data-width="500" data-colorscheme="dark"></div>
But the comment goes to my personal wall, not to "http://www.facebook.com/pages/Inferno-Online-Stockholm/149232401793444" wall.
That code creates a comments plugin where users can comment on the url 'http://www.facebook.com/pages/Inferno-Online-Stockholm/149232401793444' - this is probably not what you want as the comments will only be shown on the user's wall (if they choose to post there) and the comment plugin itself.
I don't believe there's any plugin that allows users to post onto your Facebook page from the plugin directly, if you want users to write on the page wall for some reason, you'll need to send them to the page
Related
so in the text (article) I have this:
<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/hu_HU/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="facebook_share_wrapper">
<div class="fb-share-button"
data-href="http://www...."
data-layout="button">
</div>
</div>
for the first time, it loads well! But for the 2nd time, after the ajax finished:
setTimeout(function() {
console.log(FB.XFBML.parse());
}, 3000);
as you can see, I gave an extra timing. But the facebook share button wont appear! Many similar problems were solved with FB.XFBML.parse, but not mine...
I assume you try to load the JS SDK dynamically too, but JS will not get called if you just add it to the DOM (with innerHTML, for example). Also, you don´t initialize any App.
The solution:
Load the JS SDK on page load - one time only
Initialize your App with FB.init
Use FB.XFBML.parse() in the callback of your AJAX call, right after adding the share button to the DOM
Additional information and an example how to load the JS SDK: https://developers.facebook.com/docs/javascript/quickstart
Important: Do not work with setTimeout, that´s just a very bad workaround.
Got a Typo3 Installation where i've added Googles reCaptcha to a Form.
Did that already successful on other Typo3 installations, but this time, i get the blocked frame error in the Browser.
Blocked frame with origin "https://www.google.com" from accessing a cross-origin frame.
at um.f.hc (https://www.gstatic.com/recaptcha/api2/....)
This happens two times and after that, i get this massage in the frontend.
Please upgrade to a supported browser to get a reCAPTCHA challenge.
Alternatively if you think you are getting this page in error, please check your internet connection and reload.
Why is this happening to me?
This is happening in all Browsers i checked (Chrome, FF, IE11).
To include the reCaptcha i've adde the following to the Template:
<script src="//www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
var captchaCallback = function() { document.getElementById("captchaResponse").value = document.getElementById("g-recaptcha-response").value }
var onSuccess = function(response) {
var errorDivs = document.getElementsByClassName("recaptcha-error");
if (errorDivs.length) {
errorDivs[0].className = "";
}
var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
if (errorMsgs.length) {
errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
}
captchaCallback();
document.getElementById("fhcallback").submit();
};
</script>
<input type="hidden" id="captchaResponse" name="fhcb[recaptcha]" value="" />
<div id="recaptcha-demo" class="g-recaptcha" data-sitekey="[MYPUBLICKEY]" data-callback="onSuccess" data-bind="inp-submit"></div>
<button class="orderButton bold" id="inp-submit" ###submit_nextStep###>Senden</button>
And in PHP:
$secret = '[MYSECRETKEY]';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$apiResponse = json_decode(\TYPO3\CMS\Core\Utility\GeneralUtility::getUrl($url.'?secret='.$secret.'&response='.$this->gp[$this->formFieldName]), true);
if($apiResponse['success'] == FALSE) {
$checkFailed = $this->getCheckFailed();
}
The Form is not visible on pageload. Its a slide in at the right side of the page, after clicking its toggle element.
I'am out of ideas and the client is bugging me already.
I found the Issue. On this Installation, the JavaScript Library Mootools was included.
After removing the include of Mootools, no further problems with blocked Frames occurred.
I am having problem with Disqus + laravel pagination. I have a post model where a post have minipost and for each post i want it to contain 5 minipost.. when I navigate to the 2nd pagination page the Disqus Discussion got auto generated for the 2nd page.. How can I avoid this duplication?
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = route('home');
this.page.identifier = $slug; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//testblog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
The query
$posts = Post::where('slug', $slug)->firstOrFail()->minipost()->orderBy('created_at', 'desc')->paginate(5);
You can't achieve it directly
Because disqus will provide the comment content according to your url.
During the pagination, probably your url will change and you can't stop it.
At the same time as you wanted to show only the same disqus content throughout all the pages in url.
You should do some tricky way to do it.
Way 1 :
Have the Pagination and all the content in iframe, So that the url won't change
Way 2 :
Use Jquery Datatables or some other plugins related to it, and customize it a bit better to have your desired look
Way 3 :
Explore the disqus code and hardcode the url for that particular page
Like
this.page.url = "http://someurl.com/#!" + id;
Hope this helps you
I am new to the whole front-end client scripting scene and have encountered a few difficulties when working on my most recent project. I have looked around the website and could not find anything that answered my question. There may be something here and I have just not found it because of my inexperience and if there is it would be nice if you can provide a link to those resources.
I am currently working on building a client that makes ajax calls to a cross-domain asp.net web api that I have built. I know that the web api works as it has been tested in fiddler. I have also managed to successfully make calls on a click event.
The problem is that I cannot seem to get this working on page load and with knockoutjs. I have tried to do a simple list that is populated with data when the page loads but when I load the page and check fiddler I can see that the ajax calls are not being made. This possibly explains why when I load the page the content isn't there. I have tried inserting some static data to view model and the binding worked so it seems it may be the case that there is something blocking the ajax calls.
I have looked at examples and have knocked up some code. I cannot see any problems with the code but as I am inexperienced there is certainly a possibility that I am missing something. There may also be more efficient ways to do model binding, if so, I would appreciate any advice from someone more experienced.
The code is:
#{
ViewBag.Title = "KnockoutTesting";
}
<!-- MAIN -->
<div id="main">
<!-- wrapper-main -->
<div class="wrapper">
<ul data-bind="foreach: places">
<li>
<span data-bind="text: title"></span>
</li>
</ul>
</div>
</div>
#section scripts {
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-2.1.0.js"></script>
<script type="text/javascript">
function PlacesViewModel() {
var self = this;
function Place(root, id, title, description, url, pub) {
var self = this;
self.id = id;
self.title = ko.observable(title);
self.description = ko.observable(description);
self.url = ko.observable(url);
self.pub = ko.observable(pub);
self.remove = function () {
root.sendDelete(self);
};
self.update = function (title, description, url, pub) {
self.title(title);
self.description(description);
self.url(url);
self.pub(pub);
};
};
self.places = ko.observableArray();
self.add = function (id, title, description, url, pub) {
self.places.push(new Place(self, id, title, description, url, pub));
};
self.remove = function (id) {
self.places.remove(function (place) { return place.id === id; });
};
self.update = function (id, title, description, url, pub) {
var oldItem = ko.utils.arrayFirst(self.places(), function (i) { return i.id === id; });
if (oldItem) {
oldItem.update(title, description, url, pub);
}
};
self.sendDelete = function (place) {
$.ajax({
url: "http://localhost:1357/api/places" + place.id,
type: "DELETE"
});
}
};
$(function () {
var viewModel = new PlacesViewModel();
ko.applyBindings(viewModel);
$JQuery.support.cors = true;
$.get("http://localhost:1357/api/places", function (places) {
$.each(places, function (idx, place) {
viewModel.add(place.PlaceID, place.Title, place.Description, place.URL, place.Public);
});
}, "json");
});
</script>
}
It has been simplified for the sake of getting it to work before I add more functionality.
Thanks for your time.
I believe your problem may lie in your Web API implementation. Both the client and the server must support CORS. According to Carlos' post, Web API does not natively support CORS. His post includes a code sample.
I want to show the Facebook "Like box" plugin and some other FB code in a ajax loaded page.
When I load it in a ordinary html page it works as it should, but when I try to put it in a ajax load page it only loads the first time, when I click on the link to load the page the second time it is not loading the page? It is only loading the page if I clear the cache.
The index file init the fb code.
FB.init({
appId : '277065222', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
I load the ajax page with this code:
function loadFacebook(){
$('#container').load('http://www.manmade.se/manmade/guiden/facebook_onweb.html');
FB.XFBML.parse();
}
And in the ajax loaded page I have the facebook code, eg the facebook Like box.
you can call fb par script in your page load after calling fb 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/all.js#xfbml=1&appId=11111code";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(document).ajaxComplete(function () {
try {
FB.XFBML.parse();
} catch (ex) { }
});
reloadlike.html
<div class="fb-like fltLeft" data-href="http://yrl_like" data-send="false" data-layout="button_count" data-width="87" data-show-faces="false"></div>
this should work every time.
I guess your callback is not right.
$('#container').load('reloadlike.html', function() {
FB.XFBML.parse();
});
Varying a little bit the example code from bugrasitemkar, at the end of the ajax code, I include this jquery script and it works:
<script type="text/javascript">
$(document).ready(function() {
try {
FB.XFBML.parse();
} catch (ex) { }
});
</script>