javascript code for embeding link with its details like in facebook - javascript

i want a javascript code which would fetch page contents like thumbnail images and contents and some text from the body as is shown in facebook when a link is shared .
please suggest me some technique or code for doing so

JQuery load would probably work for your purposes

Related

Get data for AJAX tooltip from URL adress

I am using this script for tooltips.
Is there any way to load content of tooltip from URL(dynamic loaded content from PHP script) instead of using path to html/php file?
Example
I need this:
Some link
instead of:
Some link
I had a brief look at the plugin, and you should be able to use /site/getcontent/1 without any issue.
Some link
(I'm assuming is being loaded on the same domain of your html file)

Get certain element from webpage as embed code

I would like to know if it's possible to rip the Meta Slider element from a WordPress post as an embed code to place on a different HTML file of different host?
Particular Page
The link above will be the exact source and the meta slider element there is the one I would like to have the embed code. Thanks in advance.
This is basically a WP wrapper for the FlexSlider jQuery plugin. Get it here: http://flexslider.woothemes.com/

embedding a page with some javascript on a tumblr post

I want to reproduce a simple, one page website with some javascript in a tumblr post (as a form of documentation for a project) but everytime I try to put the source html of the site into the tumblr form it ends up not loading at all inside the tumblr... Here's the page I'm trying to "embed" into tumblr: www.benenson.ae/recording.html
When I copy the html into the tumblr console, I'm fixing the path to the scripts at the top so that's not the problem..Am I missing some trick for getting this to work inside Tumblr?
I wasn't sure what support there was for iframes in tumblr, but it is possible, but you will need to add some styling to suit your needs:
I simply created a new post, selected the html tab and then put in the following code:
<iframe src="http://www.benenson.ae/recording.html"></iframe>
Alternatively you could create a single post, uploading the image content to tumblr and make it link to anywhere you like, and then add a caption for the post that replicates the current text you have.
If that helps or you want to pursue the second option, let me know and I can update my answer.

Load a html page in a div by clicking an image

I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).

Facebook likes Not Working when javascript add

So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?
You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/

Categories