Facebook doesn't scraped html correctly - javascript

I am just trying to load my html using link on facebook,but it is not going to render my html correctly. It is rendering only meta graph tags, which is mentionted by facebook below
<meta property="og:title" content="HyperArts SEO Services" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.hyperarts.com/_img-fb/Image-SRC_HyperArts.png" />
<meta property="og:image" content="http://www.hyperarts.com/_img-fb/Image-SRC_HyperArts_blue.png" />
<meta property="og:url" content="http://www.hyperarts.com/seo-services/search-engine-optimization-services-san-francisco.html" />
<meta property="og:site_name" content="HyperArts Web Design & Social Media" /><!--formatted---
My html is
<!doctype html>
<html ng-app="myapp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/din-Regular.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="" />
<meta property="og:title" content="myapp" />
<title>myapp</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="profileController.js"></script>
<body>
<div class="wraper"></div>
<div class="box">
<div class="profile-box-row clearfix">
<div class="user-profile left">
<div class="imgb">
<div class="imgb-in">
<img src="images/img_man.jpg" alt="img">
</div>
</div>
<span class="user-name">Akshay</span>
</div>
<div class="txtb">
<span class="percent">80%</span>
<p>common interests in myapp</p>
</div>
<div class="user-profile right">
<div class="imgb">
<div class="imgb-in">
<img src="images/img_girl.jpg" alt="img">
</div>
</div>
<span class="user-name">Pratiksha</span>
</div>
</div>
<div class="botom-text">
<p>See who tops to match your preferences among friends. Download Samepinchh http: //www.myapp.com
</p>
</div>
</div>
</body>
</html>
It is not going to render anything inside body tag,only showing title and image in head tag.
Below is a my controller which i am using for share html link.
My controller
public void shareMatchingOnFb(final User user, final Long friendId, final String fbAccessToken) {
FacebookClient facebookClient = new DefaultFacebookClient(fbAccessToken);
InputStream is;
FacebookType publishPhotoResponse = facebookClient.publish("me/feed", FacebookType.class, Parameter.with("message",
"Testing"),Parameter.with("link",
"http://example.com/122222/1222212"));
}
Please help me what i am doing wrong there,i have already spend one day on it.
Thanks

Add the meta-tags to the head on your HTML
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
The most important ones are title, description and image
Note: after you make changes, you have to tell Facebook to scrape the updated content: https://developers.facebook.com/tools/debug/og/object/

Related

Importing table HTML from pandas on html body

I have pandas df, exported to html the result is..
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>Flop</th>
<th>BET 1610 Freq</th>
<th>BET 1218 Freq</th>
<th>BET 575 Freq</th>
<th>CHECK Freq</th>
</tr>
</thead>
<tbody>
<tr>
<td>2s 2d 2c</td>
<td>2.90</td>
<td>11.91</td>
<td>36.90</td>
<td>48.30</td>
</tr>
...5k lines...
And i'm trying to import on html normal file and create a filter latter
Any ways to make it please?
Is possible with JS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="go">Search</button>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
Include
in php import "file.php";.
save both file with .php extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="go">Search</button>
<?php
import "3BP-OOP-PER.php"; // import "3BP-OOP-PER.html";
?>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
I think this code help you!

How do you send a request and display 1 part of the information on the page using javascript

How do i make a get request to https://my-ocular.jeffalo.net/api/users/PoIygon and display the "status" on status, "color" is the background color of the id "color" and "name" has the name on this html code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<span id="name">name</span>
/
<span id="status">
status
<div id="color">css background is the color</div>
</span>
</div>
</body>
</html>
My solution is to use fetch api and create the content dynamically. There was a slight issue with your html, a div element is not able to be a child of a span element so I modified it slightly. I hope this works for you.
const wrapper = document.querySelector('.wrapper');
function createContent(data) {
const content = `
<div id="color" style="background-color: ${data.color};">
<span id="name">${data.name}</span>
/
<span id="status">${data.status} </span>
</div>
`;
wrapper.insertAdjacentHTML('beforeend', content);
}
fetch('https://my-ocular.jeffalo.net/api/user/PoIygon')
.then(response => response.json())
.then(data => createContent(data))
.catch((error) => console.log(error));
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<!-- add JS dynamically here -->
</div>
</body>
</html>

Javascript Input value returns undefined (To do list program)

For the past day ive been banging my head to the wall i just cant get this to work
every time i try to create a to do list it returns undefined and i cant seem to detect what went wrong with the code
Im still in the learning process so please go easy
function addToList() {
var item = document.getElementById("candidate").Value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>
This must have been frustrating. You used a capital V for value.
.Value is an invalid property. You're looking for .value
function addToList() {
var item = document.getElementById("candidate").value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>

Mapbox is only displayed when I reload the page

I have a weird problem I don't manage to find answer for:
I've setup mapbox so it displays on my website. I use Koken as framework, so a few tag are from it, but it's basically similar to classic html. Here is the content of my file:
<koken:include file="inc/header.html" />
<koken:head>
<meta property="og:site_name" content="{{ site.title }}" />
<meta property="og:title" content="{{ content.title|content.filename strip_html="true" }}" />
<meta property="og:description" content="{{ content.caption strip_html="true" }}" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ content.presets.medium_large.url }}" />
<meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
<meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
<meta property="og:url" content="{{ content.url }}" />
<koken:content_image>
<koken:not empty="profile.twitter">
<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="#{{ profile.twitter }}" />
<meta name="twitter:creator" content="#{{ profile.twitter }}" />
</koken:not>
</koken:content_image>
<meta charset='utf-8' />
<title>World map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map-website { position:absolute; top:0; bottom:0; width:100%; height: 960px}
</style>
</koken:head>
<body>
<div id='map-website'></div>
<script>
L.mapbox.accessToken= 'my_token';
var map = L.mapbox.map('map-website', 'mapbox.streets');
</script>
</body>
<koken:include file="inc/footer.html" />
Super simple, that comes straight out of mapbox exemples. The issue I'm facing is that when I click on my website (romdicos.phography). And then click on the /map link, the page loads indefinitely and nothing never happens and the debug bar tells me that L is undefined.
However, if I click in the address bar and hit enter, then the map displays.
What am I doing wrong?
Many thanks in advance...

how to send email for mac and pc compatible in html page

i needed to send out an email when the user clicks on a button on a HTML page. The email has a heading, a text and a hyperlinked image in the body. At the moment I have been using an '.oft' file saved from a HTML template but this means that it is only PC supported and not Mac. I needed to make it universally possible. what other way would i be able to do this?
the '.oft' is attached to the 'email.png' file
code for the html site itself:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST SITE</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="all.css" />
<link rel="stylesheet" type="text/css" href="help/css/reset.css" />
<link rel="stylesheet" type="text/css" href="help/css/style.css" />
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="javascript/lightbox/jquery.lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').lightbox();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.lightbox("video/reel-hi.html?lightbox[iframe]=true&lightbox[width]=530&lightbox[height]=430");
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content-in">
<div id="content-container">
<img src="bg.jpg" /><br />
<img src="email.png" border="0" />
</div>
</div>
</div>
</body>
</html>

Categories