url link preivew for html textarea - html

I am currently trying to implement a textarea in html for entering url links. When a user types in a url and press enter, a link preview should come up just like in Facebook. I am quite sure there would be some kind of plugins or pre-built tool that I can use for such functionality, but I am not sure where to look for. Can someone give me an advice on how to make this work? Thank you.

Facebook accomplishes this behaviour by using the Open Graph Protocol. For it to work properly, your target site does need to have the specific Open Graph meta tags like og:title defined (you can find the complete documentation on the page).
If you scroll down to Implementations you will find parsers for those Open Graph meta tags written for different programming languages like PHP or Ruby. However, you will most certainly not be able to parse the needed information with plain html.

Related

How to enable other websites to embed my website's content using only content link?

I have been spending my past week on the Internet to find at least one hint about it. There are no tutorials or even SO questions available. What I am trying to find is that when some website uses some library like oEmbed to embed content of other websites on their website, they fetch embed code from its link. For example, when you post a YouTube link on Facebook or other social networks, they automatically fetch their embed code. I know how to fetch embed code but what I don't know is how to provide embed code that can be fetched by other websites by using a link of my website's content?
I want that my article should be embedded in some special way. Not like the default layout of that website. So is there any META tag or something in HTML where I can put embed code for other websites?
I don't think what you want is possible. You can use special meta-tags that specific sites (e.g.: Facebook, Twitter, Linkedin) will interpret, and that will help you customize the share a little (still using the "host site" style). But as far as I know, there's nothing you can do to provide style/code of your own.
And it makes sense from a security point of view: embedding external code from an unknown source is potentially dangerous and no site would/should allow you to do it. Even if they do allow it, they should pre-process the code and sanitize it (adapting your style/code to their style/code) to prevent possible threats.
As suggested by Alvaro Montoro, I searched on the Internet about how to become an oembed provider. Following are the links I found:
https://timnash.co.uk/becoming-oembed-provider/
http://freear.org.uk/content/5-steps-being-oembed-provider
You may want to use the CSS !important directive.
http://css-tricks.com/when-using-important-is-the-right-choice/

Finding out how a website is coded

I'm trying to figure out how to program a website that looks very similar to http://www.renthop.com/.
I'm new to web coding, so I'm not really sure where to start. For example, is it Java or HTML? Or both? I really like how its setup, the responsiveness and smoothness of it. I just want to make sure I start off in the right direction in terms of choosing the right language etc.
If anyone has any idea of what this is based on it would be greatly appreciated!
Thanks - KC
The server-side code is PHP, the front-end is built off of the jQuery and jQuery-UI javascript libraries and a series of third-party plugins. The final product is a dynamic HTML application.
Do you want to launch your website? If so, creating a website from HTML would only make a website on your local hard drive, not public. You're going to need a domain name and hosting to make it public.
HTML is a markup language for formatting websites, but you can still create a website out of it. Not public, as I said above.
CSS is rulesets for telling the browser how to display the HTML formatted content. It is also not a programming language in the same way HTML is, although it can be a lot more powerful.
Javascript is a programming language. You use it to make the website interactive. Get Firebug or a similar add-on for Firefox, or just right click and 'Inspect Element' in Chrome to see the javascript for more detail on what javascript does.
AJAX is an extension of javascript to get data from the web server and update the page with it, without having to refresh the page.
PHP is code commonly used server side to interact with the filesystem and databases and output HTML. You can also use python, perl, .NET and a handful of other languages/frameworks to do this.
MySQL is a database.

Android: How do I retrieve problematic data from a specific webpage?

I have used .NET and ShDocVw for years to grab data off webpages without any issues I couldn't overcome. This website has me beat though. It seems like such as easy task to grab the titles and other information off a library search page, but I can't see the data to be able to grab it. Usually, I just look in the DOM, but the data wasn't there. I did a view source, but the data wasn't there. I am so confused.
I am learning Android right now and that is how I would like to solve my problem, but if .NET would be easier... Right now I will take any help, in any form.
The URL is http://catalog.kcls.org/opac/en-US/skin/kcls/xml/rresult.xml?if=&it=h&bl=&lf=&a=&la=&cl=&d=1&l=1&s=pubdate&sd=desc&adt=ml&tp=&t=bibcn%3ADVD%20FIC%20ON%20ORDER&av=&rt=multi
For this specific website, if you disable javascript in your browser, you will see they give you a link to a plain html search portal
http://catalog.kcls.org/opac/en-US/extras/slimpac/start.html

FCKEditor breaking HTML forms

I'm in the process of reproducing some standalone HTML forms as pages in a CMS that uses FCKEditor by simply copying and pasting the relevant code into the editor.
But when I save and view the page, the HTML has been changed and the tag has been moved up to just below the open tag -- and not at the bottom of the form. This obviously renders all of the fields in the form, including the submit button, useless.
Is there a way to tell FCKEditor that I know what I'm doing and I don't need it to validate the HTML output?
Unfortunately this is a hosted CMS service (actually part of an email blast tool) so making changes to the configuration will mean I need to go through the company's support system, which is fine -- but they haven't been able to solve it for me yet, so I'm hoping to get the answers for them.
Thanks!
This is a bit of a difficult thing because as far as I know, it's not necessarily the WYSIWYG editors that "fix" "broken" HTML, it's the browsers' HTML editing engines themselves, and it's often near impossible to talk them out of doing this.
You'd have to show your exact source to get detailed feedback, but check out whether protectedSource is something for you. It's supposed to protect code that is covered by the regular expression you specify.
I'm not sure about FCKEditor, but you might want to consider switching to TinyMCE. TinyMCE allows you to both edit a list of allowed tags, and to turn off HTML validation off completely if you like.

WYSIWYG-editor with "add custom html feature" and secure (validated) html output?

I've been looking into some of the WYSIWYG editors (TinyMCE, FCKEditor, etc.) and they all seem to offer a lot of options.
However, one vital feature that seems to lack is a simple "add custom html" option which would allow the user to input any of these embed-snippets you find all around the web these days, for example a youtube video. This is different than a "edit html/source" feature as that requires actual knowledge of html and there is the risk of the user writing invalid code.
Another issue that I couldn't find much about is the output html. How would I make sure that this output causes no security invulnerabilities? Even when the user has the ability to add his own html?
So, basically, is there an open source WYSIWYG editor which covers these 2 features?
FCKEditor achieves this via plugins. e.g. http://sourceforge.net/projects/youtubepluginfo/
For the first part, you either have the "view source" view of the editor or, if that is too complex, I'm pretty sure such plugins already exist for all major editors. If they don't, building a "insert arbitrary HTML" plugin should be easy to implement by tweaking another simple plug-in like the youTube one linked to in Martin's answer.
The second part - sanitizing the incoming HTML - is impossible to achieve in the WYSIWYG editor itself, because it acts solely on the client side, and fills content into a form input that could be manipulated anyway, even though you turn off the "custom HTML" function in the editor.
Therefore, the sanitizing of the HTML needs to take place on server side. If you can use PHP, a tool that looks very good to me from the outside - I haven't worked with it but plan to in the near future - is HTML Purifier. It claims to produce reliable HTML with minimum hassle.