Develop Reference

How do I preview my web page on my dashboard?

I am creating a dashboard with the AdminLTE template, and I have a list section in which I can change the colors of the different sections of my web page.
What I would like to know is if there is a way to generate a preview of my web so that the administrator user of the dashboard can see the changes there.
I think it should not be easy, but I would like to know if there are different ways to achieve that, or if there is a plugin that is helpful.
Currently my project is done in HTML, Javascript and PHP

You can use an iframe to show the preview of your website in the admin dashboard.
Just add an iframe tag inside the dashboard panel like this,
<iframe src="https://www.your_website.com"></iframe>
Tip: To deal with browsers that do not support , add a text between the opening tag and the closing tag.
Tip: Use CSS to style the (even to include scrollbars).

How to display a link on my page

I want to display google link like that in my page.
whenever we post a link on a Facebook page its look like as the above picture. how to do the same in my webpage .how to display the google link like that

That looks like a link shared on Facebook. The styling of a link like that doesn't happen automatically. You'll have to use html and css to format a link to look like that yourself.
Here's an example using pseudo html. You'd need to actually style this yourself to achieve the desired result. If you don't know how, some websites to start learning html / css are codecademy.com & w3schools.com
<a href="link_url">
<img src="google_logo_url" />
<div>
<h3>Google</h3>
<p>Search the world's information....</p>
</div>
</a>

Embed.ly can be useful for you. It takes a URL and generates a piece of code, which you can paste in your HTML document to get similar look to that of your picture. Below is an example of its code in usage
From this link you can access it for free: http://embed.ly/code

Facebook comments do not show up when added with javascript

I am having a page with multiple facebook-comment areas, which are all different.
In order to save page load time, I want to make them only appear/load when the user clicks some button.
The problem is, when I've written the code
<div class="fb-comments" data-href="http://mypage.com" data-width="600" data-numposts="5" data-colorscheme="dark"></div>
in html, it all worked but when I've added the code via .innerHTML it does not show anything expect when I include the sdk after the html is manipulated. the problem with that is, that all other comment-boxes cannot be shown since the sdk loaded already.
How do I make all comment-boxes visible to the user when they click a button using JavaScript?

I´ve solved it like this. I changed the comment code to
<fb:comments href="http://mypage.com" width="600" numposts="5" colorscheme="dark"></fb:comments>
and after I´ve added the code i refreshed this particular section with
FB.XFBML.parse(document.getElementById("parent of commentField"));

Facebook share button

I want to add Facebook share button to my site. But when I use the code given by Facebook, it doesn't show any FB logo image in button style & also doesn't count any share. Please help me figure out a better code.
Currently, I'm using:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
Share on Facebook
</a>

The easiest way to add Facebook share button would be to visit http://www.facebook.com/share_partners.php and copy the code and paste it in your webpage after replacing the text "url" with the actual URL of the page you want to share. If it is dynamic content, you can use the variable or object name.
<script>
function fbs_click(){
u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<img src= "http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981" alt="" />

Take a look at the official documentation: Facebook For Developers: Share Button.
If you merely click the "Get Code" option on the Facebook Share Button Configurator & Generator, you'll see that the URL generated is rather simple:
https://www.facebook.com/sharer/sharer.php?u={yourURLhere}
At least it seems that way to me:

What does Facebook take into account when inferring Open Graph properties from an URL?

I'm having a problem with the Facebook Like Button here. Although the button works, it's fetching the wrong thumbnail to display on Facebook.
Since the website is a store and each product has its own like button, it's very important that the correct thumbnail is displayed on Facebook. I used the Facebook Linter to debug a product URL from the site. I hoped Facebook would grab the bigger, obviously main image of a product URL but it's fetching one of the related products thumbnail.
From what I've read in the docs, I should explicitly set og:image in the head of my document. However, I have no access to the back-end and I can only use JavaScript to dynamically generate a meta-tag. I've tried to do that but it seems worthless doing so since the URL is scrapped before any script is run.
I don't understand what rules Facebook is using to infer the value of og:image. On another website that also doesn't have any meta-tags set, the main image of the product is being correctly scrapped. Why?
When, for whatever reason, one cannot declare any Open Graph properties, what can be done to improve the chances of Facebook's algorithm grabbing the desired image (or text)?

Ideally, you should set og:image meta tags as part of the open graph protocol. When this fails, it simply defaults to all images via image html tags take into precedence. The very first image defined via img tag will be the first image pulled by facebook.
<html><body>
<p style="background:url(img0.jpg);">hello</p>
<img src="img1.jpg">
<img src="img2.jpg">
<p>bye</p>
<img src="img3.jpg">
</body></html>
If the above sample code was your site, facebook would label img1, img2 and img3 as potential thumbnails and in that order if the user has the option to choose what image to specify.
So, just put your product picture first.