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...
Related
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!
I am trying to share images and video on social media ( mostly FB,twitter,linkedIn )in reactjs app , have added react-helmet for the same but still unable to share image below is the link which i am referring and my code.
https://medium.com/camperstribe/react-social-media-integration-with-react-share-and-react-helmet-84d9def6a445
Above solution is not working
import React from "react";
import { Helmet } from "react-helmet";
// import { useLocation } from "react-router-dom";
export default function HelmetMetaData(props) {
// let location = useLocation();
let quote = props.quote !== undefined ? props.quote : "";
let title =
props.title !== undefined
? props.title
: "CampersTribe - World is yours to explore";
let image =
props.image !== undefined
? props.image
: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80";
let description =
props.description !== undefined
? props.description
: "CampersTribe lets you experience the camping culture. We discover the hidden gems in the nearby to help you connect with nature & yourself by learning in the woods, on the riverbank under the open sky." +
"Trust us, its million dollars experience to ride away from city life, pitch a tent, do campfire and endless talk!" +
"So, join us on this voyage, and explore the beauty and miracle of being yourself!";
let hashtag = props.hashtag !== undefined ? props.hashtag : "#camperstribe";
return (
<Helmet>
<title>{title}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="csrf_token" content="" />
<meta property="type" content="website" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta name="_token" content="" />
<meta name="robots" content="noodp" />
<meta property="title" content={title} data-react-helmet="true"/>
<meta property="quote" content={quote} data-react-helmet="true"/>
<meta name="description" content={description} data-react-helmet="true"/>
<meta property="image" content={image} data-react-helmet="true"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:quote" content={quote} />
<meta property="og:hashtag" content={hashtag} />
<meta property="og:image" content={image} data-react-helmet="true"/>
<meta property="og:image:secure_url" content={image} data-react-helmet="true"/>
<meta content="image/*" property="og:image:type" data-react-helmet="true"/>
<meta property="og:site_name" content="CampersTribe" />
<meta property="og:description" content={description} />{" "}
</Helmet>
);
}
i have created helmetMetaData component and calling in top of my social share component
return (
<div className="app-content content">
<HelmetMetaData />
<FacebookShareButton
windowWidth="800"
windowHeight="500"
url={
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
}
quote={"test sharing"}
image={
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
}
imageURL={
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
}
// hashtag="#camperstribe"
// className={classes.socialMediaButton}
>
<FacebookIcon size={36} />
</FacebookShareButton>
)
but not working only getting url and title on facebook share dialog,
anybody knows how to share image on social media in reactjs?
I know it's an old question, but try to insert image meta tag directly into public/index.html. As it said in this issue: adding meta on client side dynamically does not work. Crawlers (fb, tw, etc) can see only static html. And it seems like FacebookShareButton doesn't have image as an optional prop.
gmap3 doesn't work on my website and I don't know why, can someone help me to find the error ?
"I need to add some words to publish my question, so don't read that line sorry"
here is my link:
http://www.booclin.ovh/site/plan.html
Here is my code:
<!DOCTYPE html> <html lang="fr">
<head>
<!--[if lt IE 9]> <div style="background:#fff; font-size:1.2rem; line-height:1.8em; padding-top:300px;color:#282828; height:100%; width:100%; z-index:999999999999999; position:fixed; text-align:center;"> <div style='margin:0px 20px 0 20px; width:100%; max-width:600px; margin:0 auto; '>Vous utilisez une ancienne version d'Internet Explorer. Pour des raisons de sécurité, vous devez mettre à jour votre navigateur. S'il vous plaît aller dans "mises à jour de Windows" et installer la dernière version. Merci </div> </div> <![endif]-->
<!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <![endif]-->
<head> <meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
<meta property="og:description" content="">
<meta name="keywords" content="">
<meta name="LANGUAGE" content="FR">
<meta name="SUBJECT" content="">
<meta name="ROBOTS" content="All">
<meta name="OWNER" content="">
<meta name="RATING" content="">
<meta name="COPYRIGHT" content="">
<meta name="expires" content="never">
<meta name="GOOGLEBOT" content="index">
<meta name="Slurp" content="index">
<meta name="MSNBot" content="index">
<meta name="ICBM" content="">
<meta name="Identifier-URL" content="">
<link property="stylesheet" rel="canonical" href=""/>
<link property="stylesheet" type="image/x-icon" rel="shortcut icon" href=""/>
<link property="stylesheet" type="image/x-icon" rel="icon" href=""/>
<link property="stylesheet" rel="image_src" href=""/>
<meta property="og:image" content=""/>
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:description" content="">
<meta name="keywords" content="">
<link property="stylesheet" rel="stylesheet" type="text/css" href="index/css/style.css">
<link property="stylesheet" rel="stylesheet" type="text/css" href="index/font/font.css"/>
</head>
<body>
<div class="left part">
<div style="border:80px solid #fff; width:500px;height:500px;" id="adresse" class="gmap3"> </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"> </script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"> </script>
<script type="text/javascript" src="index/js/gmap3.js"> </script>
<script type="text/javascript">
$(function(){
$('#adresse').gmap3({marker:{address: "Apple Store, Saint-Laurent-du-Var, France"},
map:{options:{zoom: 17}
}
});
});
</script>
</body>
</html>
Your api key is missing, as you can see in the console:
Google Maps API error: MissingKeyMapError
Follwing the configuration page of the documentation: http://gmap3.net/configuration.html
You can load the library with the api key
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY®ion=GB"></script>
Or use the api key when loading the map
$.gmap3({
key: 'YOUR_API_KEY'
});
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/
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>