Can I put Facebook's Like button on my web page even though I'm using XHTML 1.0 Transitional - xhtml-transitional

I would like to add the Facebook Like button to my homepage at http://www.theorganizationindex.com but notice that Facebook seems to require that I use i-frame, XFBML, or HTML5. Will the Like button work if I am using XHTML 1.0 Transitional?

Yes. The Facebook API is based off of Javascript and should not matter if you're using any of those items you listed. I set up a recipe web site and used both Twitter and Facebook API add-ons and it worked just fine. Let me know if you're having issues and you can email me your source code if it's too much to post here and I can implement the FB-Like button API script for you. There is a javascript include that is hosted off of Facebooks website you must have in your head or it will not work.

Related

Dynamic open graph tags in Single Page Application

I am trying to inject op:tags in my reactjs App. I came across https://github.com/nfl/react-helmet and it dynamically inject the tags ion my index.html header juts like i wanted it. The problem is, it injects the tags at the end of the head and thus was not recognised by facebook debugger here. It works when the ogen graph tags appear right in the beginning of the header before the script tags. With reac-helmet however, it injects them at the extreme end. Please how do i best fix this ? I am trying to have article preview on social media and this is failing just because of the arrangement. Any help would be appreciated.
well, I don't think it is because of the arrangement.
As far as I remember FB doesn't execute javascript code in the provided URL.
Facebook’s scraper just looks at the HTML code of your page; it’s not a full-fledged “browser” that would execute any client site code.
with that being said.whatever meta tags you need there it can't be done via JS on the client-side. it must be server-side rendered.
I am not sure what technology you are using to serve this app, but I can assume it is a react app. and it would be easy to handle this via a small express server. that serves the app with the right meta tags in place even.

Can I submit a form with google's recaptcha in it from my app?

I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)

Recaptcha missing if wrong captcha input, jquery mobile, asp

I have an ASP mobile site and I am using jQuery mobile. I have problem using recaptcha on my contact page. it disappears when the captcha is wrong. It works fine when i am not using jQuery mobile. Any help pls? i am using jQuery validate plugin too.
Thanks
I was experiencing a similar issue - my team used jQuery mobile's ajax page linking to navigate to our sign-in page which used reCaptcha. The ajax call would cause the page to load, at which point the reCaptcha form would render and hide all other content. Refreshing the page would load everything properly.
My fix to this was to remove the ajax linking to the page. From the jQUery mobile manual:
Linking without Ajax Links that point to other domains or that have
rel="external", data-ajax="false" or target attributes will not be
loaded with Ajax. Instead, these links will cause a full page refresh
with no animated transition. Both attributes (rel="external" and
data-ajax="false") have the same effect, but a different semantic
meaning: rel="external" should be used when linking to another site or
domain, while data-ajax="false" is useful for simply opting a page
within your domain from being loaded via Ajax. Because of security
restrictions, the framework always opts links to external domains out
of the Ajax behavior.
In version 1.1, we've added support for using data-ajax="false" on a
parent container which allows you to excluded a large number of links
from the Ajax navigation system. This avoids the need to add this
attribute to every link in a container.
Note: When building a jQuery Mobile application where the Ajax
navigation system is disabled globally or frequently disabled on
individual links, we recommend disabling the $.mobile.pushStateEnabled
global configuration option to avoid inconsistent navigation behavior
in some browsers.
This fixed our loading issue, but now we experience another issue: when navigating from the sign-up page back to our landing page, and back to the sign-up page jQuery mobile causes the browser to reload the landing page. Still working on fixing this.
Edit:
After thoroughly reviewing my code I noticed that the page I was calling had html, head and body tags, pulled jquery.mobile-1.0.min.js and jquery-1.6.4.min.js twice, and was included in a template.
Once I removed the extra html, head and body tags (as well as the js includes), the page displayed properly.

Display Page feed to webpage using XFBML

I have a page I want the feed to work from the webpage
I can get it to work to my OWN feed but that is not the plan.
(https://www.facebook.com/pages/Inferno-Online-Stockholm/149232401793444) is where I want it to end up but getting to work from the webpage has lost me.
Fox
I have written a small Wall Feed Plugin you install with a simple iframe if you wish to check it out.
https://apps.facebook.com/AnotherFeed/?pageid=149232401793444&since=30+days+ago&limit=8&type=feed&ref=get.code
This will work for any page or application, and can work for personal profiles when the post is public.
HOW? I used php-sdk & graph api for this plugin. This can be done with Javascript SDK.
SEE: https://developers.facebook.com/docs/sdks/
SEE: https://developers.facebook.com/docs/reference/api/
SEE:
SEE: https://developers.facebook.com/docs/reference/api/post/

Host .NET app inside HTML web page

The main page of our website is HTML. The powers that be want to put an asp.net calendar on this main page. Is there any better way to accomplish this than to use an iframe?
Start with this...
<div id="calendar">
View our calendar
</div>
Then use an AJAX request to replace the link with the actual calendar... works whether or not JavaScript is enabled / successfully fires!
Here is the jQuery way of getting the calendar...
$("#calendar").load("/ajax/calendar/");
I recommend that the first URL (the link to the calendar) links to a full page containing the calendar and the second URL (the link to ajax/calendar/) links to something that just returns the HTML for the calendar, to make it faster and less bulky...
All URLs are fictitious and any resemblance to your real URLs is purely coincidental.
If you control IIS - you could just map .HTML to the ASP.NET handler and add your asp:calender wherever you want.
If you're able to use JavaScript, then I would recommend one of the plethora of JavaScript calendars out there.
http://jqueryui.com/demos/datepicker/

Resources