I am building an AngularJS based web app. I am populating the title tag dyanmically, so that it changes for every page. When I host the app online & share the link to it over Skype with my friends (via Skype instant messaging), instead of rendering the parsed value of metaTitle, Skype renders it as {{metaTitle}}. So my friends are getting to see the curly braces with the metaTitle as text inside of it.
What can be done to render the parsed value of metaTitle in Skype and other native applications that actually show you a preview of the link that has been pasted, as a part of the chat messages?
Here is my code:
<html ng-app="myApp">
<head>
<title>{{metaTitle}}</title>
</head>
<body ng-controller="myController">
Custom content
</body>
</html>
If you want the real, dynamic title, you'll need to render the page at server-side for these robots (or serve a static cache of the page), because they don't execute the JavaScript that allows populating the title.
Otherwise, you can use
<title ng-bind="metaTitle">Static title for Skype</title>
Skype doesn't execute/interpret the JavaScript (in this case AngularJS) within the page. All Skype knows is the static HTML content.
You might want to look into server-side rendering or having a static landing page for your app.
Edit: As per #JB Nizet answer, you can also use the following syntax.
<title ng-bind="metaTitle">Static title for Skype</title>
Since you mention that you are populating metaTitle from your controller, you need to move your controller declaration to html tag:
<html ng-app="myApp" ng-controller="myController">
<head>
<title>{{metaTitle}}</title>
</head>
<body>
Custom content
</body>
</html>
Related
We want links to be shared across social media which display a preview image of the page. This image can be different every time. Our app is a CRA with client side rendering and a Java Spring Boot backend.
Is this possible? SEO isn't important to us at all as it's a B2B product. I've added React Helmet to the page in question. I've read that SSR is used for this but our application isn't built or intended to be this way so we would like to keep it as is. We only need the OG meta tag for one page so it's more of an exception than a rule. A contrived example is below:
const userData = useGetUser();
<Helmet>
<MainContainer>
<Box>{userData?.name}</Box>
<Box>{userData?.image}</Box>
</MainContainer>
<meta property="og:image" content={userData?.image} />
</Helmet>
If anybody knows how to get this working I'd really appreciate it. Thanks all!
React Helmet adds the following attribute at the end of every tag that you specify as a child of the <Helmet/> component:
data-react-helmet="true"
So this:
<Helmet>
<meta property="og:image" content="image link" />
</Helmet>
renders into:
<head>
<meta property="og:image" content="image link" data-react-helmet="true">
</head>
This invalidates the meta tags for the online sharing preview debug tools, such as Facebook's Sharing Debugger and https://www.opengraph.xyz/.
If this attribute is removed, the link to your site displays as expected in the above mentioned validation tools.
There's an open issue to remove this attribute from the tags generated via React Helmet.
So my client has a website he's created on weebly and he wants me to add a page with some complex functionality. I went ahead and coded the page with angularJs, but now when I add it to weebly with an embed code element, the angular doesn't work. Any clue how to either
A) just add a page normally (.html file)
B) get angular to work within the weebly page
Any help is greatly appreciated
I guess it would really depend on what you are trying to do. Please provide your code, for reference.
To directly answer your questions;
You can add, at least some, angular JS. (I haven't tested it all, but what I did worked)
With Weebly you do not have the ability to add .html files as standard pages.
You CAN add a 'Page Type' to the Theme. (which is essentially an HTML file).
You can add a page and then assign said page type.
~
Example, adding the following to the embed code element will work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
I figured out this issue, the angular was working with embed, but not on weebley's editor site. Once deployed, the code worked fine
I'm completely new to Google App Engine, and I want to verify my understanding of some things. The project that I'm working on involves providing a type ahead autocomplete search box, e.g. JQuery autocomplete, for a very large dataset.
Now, if GAE wasn't in the picture, my general idea is to store the dataset in a NoSQL database, have a distributed cache in front of that, and have the web page run against the cache.
I like the one stop shop approach of GAE, but is the appengine datastore appropriate for a couple million entries or is it more appropriate to use the standalone datastore service?
The memcache included with appengine only seems to support "gets" with the exact key. I'm used to being able to submit a query similar to "like A%" which will return all of the items that begin with "A". In other words, if the user types "A" in the search box, I want to a (reasonably limited) list of all the items starting with "A" not the one entry that exactly matches "A". Is memcache going to work for this? If not, will datastore be fast enough without a cache?
I have a prototype running on my local machine using the SDK. Everything works great. When I deploy the code to App Engine, it doesn't seem like typing in the autocomplete box is actually sending anything that is being received by the app. In the Google Cloud Shell, I can clearly see the app receiving GET and PUT when I click on Form buttons or go to a new URL, but when I type in the autocomplete box, nothing happens. HTML code shown. Ideas?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
</head>
<body>
<center>
<form action='demo' method='post' >
<form action='' method='post' >
<p><label>Product Name: </label><input type='text' name='product' value='' class='auto'></p>
<input type='submit' value='Search'/>
</form>
</center>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$(".auto").autocomplete({
source: "demo",
minLength: 1
});
});
</script>
</body>
</html>
Hi Iam very new to drupal
Iam creating a custom module for facebook like and share buttons(i.e Referring the facebook share and like module).I have successfully created the facebook like and its functionality.But I have a problem with facebook share button..
when Iam sharing the content using the facebook share button,Its just sharing the link of my article instead of content of the article(i.e Title,description..etc)
This is the code which I have used
<iframe src="//www.facebook.com/plugins/share_button.php?<?php print $sharesrc;?>" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true" style="height:22px;"></iframe>
Here $sharesrc is
"href=articleurl&layout=button_count&width=450&font=arial&height=80&colorscheme=light&locale=en_US&"
I have even checked with existing facebook share modules like
https://www.drupal.org/project/facebookshare
https://www.drupal.org/project/sharethis
https://www.drupal.org/project/service_links
I have implemented ogp also
<meta property="og:type" content="Article">
<meta property="og:title" content="Another Test article">
<meta property="og:url" content="urlofmyarticle">
But none of them is sharing the article content using facebook share button.Please help with this.
Thankyou
Make sure you copy the code from the Button Generator correctly: https://developers.facebook.com/docs/plugins/share-button
You are missing the "href" parameter:
<iframe src="//www.facebook.com/plugins/share_button.php?href=<?php echo $sharesrc;?>&layout=button_count&appId=xxx" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>
Btw, it is recommended to ALWAYS use an App ID.
Edit: Ok, you are adding href to the variable already. But you should remove send=false and action_type. Those are flags for the Like Button, not the Share Button. And maybe it´s just not documented, but there is no colorscheme for the Share Button in the docs either.
Of course you need to make sure to have all the necessary Open Graph tags too: http://ogp.me/
...and if it STILL does not work, put the link in the debugger and refresh the OG data: https://developers.facebook.com/tools/debug/
I had the same issue after implementing openGraph meta tags.
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:url" content="">
And it turned out to be caching from facebook side. Just try to share another article you have not shared before.
Does anyone have an idea how to solve this problem? The idea is - application consists of two projects one of them is for mobile browser another is for desktop they have common model, user have to access two different projects via the same url depending on device he uses.
#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}
This kind of EL is used to change skinning depending on device. As I understand server should do approximately the same?
Initially I created model(contains java files with core logic) and TrinidadViewController(contains .jsf pages(built using trinidad components), validation and locale bundles) projects. After I got a task to add ADF browser project(to expose the same logic using ADF faces). Later I was asked to make an access to both projects using one URL.
Solution:
To manage redirect operation index.html file has been added to the project. If browser gets this kind of URL - 127.0.0.1:7101/adf-mobile-browser-poc-TrinidadViewController-context-root/, it automatically redirects to index.html page. Index.html contains redirect operation code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function redirect() {
if (!isMobile()) {
window.location="/adf-mobile-browser-poc-big-context-root/faces/first.jspx";
}else {
window.location="/adf-mobile-browser-poc-TrinidadViewController-context-root/faces/first.jsf";
}
}
function isMobile() {
return (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Opera Mini/i) || navigator.userAgent.match(/IEMobile/i))
};
</script>
</head>
<body onload="redirect()">
</body>
</html>
isMobile() –checks if current platform is mobile or desktop. Redirect() –redirects to a specific page. The whole thing looks like:
accessing URL -
127.0.0.1:7101/adf-mobile-browser-poc-TrinidadViewController-context-root/
user gets to index.html
depending on current device javascript
loads particular page.