A client has recently requested social media links on his website. Facebook is my first attempt at this ever. My client does not have a facebook page.
My code:
<!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" />
<script type="text/javascript">
function renderFbLike() {
var parent = document.getElementById('fblikediv');
var child = document.getElementById('fblikeimg');
parent.removeChild(child);
//this really works...sort of
var html2 = "<iframe src=\"http://www.facebook.com/plugins/like.php?href=http://www.jplandman.co.za&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=60&appId=258346014244946\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:40px;\" allowTransparency=\"true\"></iframe>";
document.getElementById('fblikediv').innerHTML = html2;
}
</script>
</head>
<body>
<br />
<br />
<br />
<div id="fblikediv">
<img src="images/fb-like-button.png" id="fblikeimg" onmouseover="return renderFbLike();"></div>
<p />
</body>
</html>
Screen shot:
My question:
The link that says "JPLandman" links to some Facebook page that does not exist. Is there any way to prevent this? What are the possible work around?
See if adding this to your head makes any difference!?!
<meta property="og:title" content="Some Title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.jplandman.co.za"/>
<meta property="og:site_name" content="JP Landman"/>
<meta property="og:description" content="Some content"/>
So after struggling for a little while for my client I finally found a page that will suffice. They genearate the code. Copy and paste(not my top choice but hey it works as expected)
AddThis+
Related
I'm working on a .NET and Angular webapp, with ngx-sharebuttons ShareButtonModule. When I want to get a link of the post or share it via WhatsApp, the meta tags are not being updated properly. I am setting up default meta tags in index.html:
index.html
<html lang="pl">
<head>
<meta charset="utf-8">
<title>DDM - Daily Dose Of Memes</title>
<base href="/">
<meta name="description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<!-- <meta name="keywords" content="Memy, hard, obrazki, filmiki, czarny humor"> -->
<meta name="keywords" content>
<meta name="url" content="https://ddmemes.com.pl">
<meta name="title" content="DDM - Daily Dose Of Memes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="./assets/favicon.ico">
<!-- og meta tags for link share -->
<meta property="og:title" content="DDM - Daily Dose Of Memes"/>
<meta property="og:url" content="https://ddmemes.com.pl"/>
<meta property="og:image" content="https://res.cloudinary.com/duj1ftjtp/image/upload/v1659954431/LogoImage.png"/>
<meta property="og:description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#000000">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
Later, when the user wants to share a post's component, it appears that the meta attributes are not being updated properly. First, I am setting the data via share-buttons modal:
meme-card.component.html
<share-buttons theme="modern-dark"
[include]="['copy', 'facebook', 'messenger', 'reddit', 'telegram', 'twitter', 'whatsapp']"
[showIcon]="true"
[showText]="true"
[autoSetMeta]="false"
image="{{meme?.url}}"
url="https://ddmemes.com.pl/meme/{{meme.id}}/{{convertText(meme.title)}}"
description="{{meme?.title}}"
title="{{meme?.title}}"
class="pt-3">
</share-buttons>
Also, I am updating the meta tags themselves in ngOnInit via below code:
meme-card.component.ts
changeMetaTags() {
this.meta?.updateTag(
{ property: 'og:title', content: this.meme?.title },
);
this.meta?.addTag(
{ name: 'title', content: this.meme?.title}
);
this.meta?.updateTag(
{ name: 'description', content: this.meme?.title },
);
this.meta?.updateTag(
{ property: 'og:image', content: this.meme?.url },
);
}
Although everything appears to be updated properly upon inspecting a page, when I send the link to somebody or upon checking in https://www.heymeta.com/, it appears that the data still remains default, equal to the one given in index.html. The only thing that seems to be updated is url.
Is there something I'm missing here? I'd appreciate any help.
Cheers
I have made a basic form page in HTML and programmed it such that when I click the submit button, it must go to a JSP page where the details entered will be displayed.
The HTML code is:
<!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>ABC</title>
</head>
<body>
<form method="post" action="xyz.jsp">
Name: <input type="text" name="nm" placeholder>
ID: <input type="text" name="id" placeholder>
Submit: <input type="submit">
</form>
</body>
</html>
The JSP code is:
<!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>XYZ</title>
</head>
<body>
<%
String St1 = request.getParameter("nm");
String St2 = request.getParameter("id");
out.println("Your name is: " + St1);
out.println("Your id is: " + St2);
%>
</body>
</html>
When I tried running the HTML page using the live server in vs code, it shows the page not found after clicking the submit button.
I am literally a beginner and helpless, please tell me what should I do? OR where am I getting it wrong?
I`m using VSCode for the aforementioned.
<!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>Coming Soon</title>
<meta name="description" content="" />
<meta name="author" content="" />
<!--mobile specific meta-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<!-- css goes here -->
<link rel="stylesheet/less" href="styles.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
<script> less = { env: "development", async: false, fileAsync: true }; </script>
<!--[if lt ie 9]-->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!--[endif]-->
<!--Js-->
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="Js/countdown.js"></script>
<script>
<!--less javascript-->
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
<!-- live reload -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</head>
</body>
</html>
This is the code in my html, my less file doesnt change no matter what code i use, im using espresso and livereload to compile my code, i have also changed the language so i can edit the less file in espresso while using the css highlights etc.
I've tried so many things and as im new to web Design and coding this is quite hard for me, im trying to build a coming soon page which im nearly done with but all these problems keep coming up.
Why I'm getting this error in one of my jspx layouts
So after digging a little I found the reason
Here is my test template to reproduce it
<html
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:tiles="http://tiles.apache.org/tags-tiles"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
xmlns:fb="http://www.facebook.com/2008/fbml" >
<jsp:output doctype-root-element="HTML" doctype-system="about:legacy-compat" />
<jsp:directive.page contentType="text/html;charset=UTF-8" />
<jsp:directive.page pageEncoding="UTF-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<spring:url context="" value="resources/js/test.js" var="testX_js" />
<script src="${test_js}" type="text/javascript" charset="utf-8" ><!-- //required for FF3 and Opera --></script>
<spring:message code="application_name" var="app_name" htmlEscape="false"/>
<title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>
<body>
<span>TEST</span>
</body>
</html>
Now look when the js file is included "testX_js"
<spring:url context="" value="resources/js/slideshow.js" var="testX_js" />
<script src="${test_js}" type="text/javascript" charset="utf-8" ><!-- //required for FF3 and Opera --></script>
The name testX_js does not match test_js and this was the cause of an error.
I had to make that typo when including new script
So folks make sure that the variable with the url to your script is not empty
Cheers
I am attempting to integrate Facebook open graph into my site but I ran it through the URL Linter and I get the error: "Required Property Missing, og:titleand og:url is required". This is a description page for my product.
Am I missing something?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="" />
<meta name="keywords" content="hard drives, electronics, cctv, cables, psu" />
<meta name="document-classification" content="" />
<meta property="og:title" content="CAT5e UTP PATCH ETHERNET NETWORK CABLE LEAD 0.5M GREEN" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://apps.facebook.com/maplinuk/buynow-id-10015,20015-cat5e-utp-patch-ethernet-network-cable-lead-0-5m-green.html" />
<meta property="og:image" content="http://www.247topseller.co.uk/clientstores/maplinuk/prod_image/rj45_250300.jpg" />
<meta property="og:site_name" content="maplinuk" />
<meta property="fb:app_id" content="{clipped}"/>
<meta property="og:description" content="CAT5e UTP PATCH ETHERNET NETWORK CABLE LEAD 0.5M GREEN" />
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '{clipped}', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like href="http://apps.facebook.com/maplinuk/buynow-id-10015,20015-cat5e-utp-patch-ethernet-network-cable-lead-0-5m-green.html" show_faces="true" width="450" font=""> </fb:like>
</body>
</html>
I believe the problem arises because your og:url points to an app page (yours, I assume).
The Facebook code for the Like button will, as far as I know, go to that URL and attempt to retrieve the metadata from there - not from the original page that you posted here.
So the error message is telling you that your app page within Facebook doesn't have these metadata elements.
I have explained in more detail the use of og:url.
David