My little application is written in reactjs, on a page it will update title / description based on the real object that user selected like this photo. The new title and description are display correctly but when sharing on fb, the values are not loaded correctly (the value is from old html templated) - go to facebook and paste the url or use fb debugger the values are from static html page.
Have anyone had this issue and have "fixed" it ?
Thanks for any recommendation !
Facebook ignores JavaScript, so dynamic OG tags are not possible. You can solve this with Server Side Rendering or https://prerender.io/, for example.
You can pass as parameter in url (abc.com?title=awesome&desc=flower), and in og tags use that parameter to make dynamic.
Related
I have seen this question in STO but could not find a proper answer.
I am using angular 1.0 and sending an AJAX request to server to get a list of URLs like below format:
https://www.abc.info/tawasol-news/20830168
https://www.abc.info/tawasol-news/20830169
https://www.abc.info/tawasol-news/20830174
and I want to load these URLs in a set of div tags down another.
but I can not see a clear solution how achieve that. please help to to load these URLs inside a div where we can scroll and view item by item.
Thank you
One solution is using object element in your HTML (div).
<object type="text/html" data="your url"></object>
See Mozilla documentation for object here.
How can I reference an image, editable in the Wagtail admin, from a CSS file?
I am designing a page type that will have a FooPage.banner_image field. The field is editable for each page, in the Wagtail admin; it describes the image to use for that page, as background on the banner.
The page style for that page then needs to use the banner image, referencing a URL to that specific image. What reference can I write in the CSS, so that it will get “the banner_image for this page” as a URL?
If you are needing an image URL outside of the template - see the docs about Generating renditions in Python.
To get a URL of an image, you need to generate a rendition and then get the URL of that rendition.
A rendition is what is generated when you pass in the resize rules (eg. width-400) in your templates.
To get a URL you can use this example code:
image_url = FooPage.banner_image.get_rendition('fill-300x186').url
OR get the original:
image_url = FooPage.banner_image.get_rendition('original').url
Here's the background:
I want to be able to save rich text blog posts to Firebase to then display them, including code snippets, on a Posts page.
Right now, I'm simply saving a single string of html to Firebase, retrieving that per post, and setting it with dangerouslySetInnerHtml. I'm the only one adding posts.
However, this means that I lose tabbing information when displaying code snippets in blocks. I don't think I can use solution since I'm using dangerouslySetInnerHtml: Formatting code with <pre> tag in React and JSX
Any tips on how to store, retrieve, and display rich text using React and Firebase? Thank you for your help.
I was able to use the following to convert rich text to html, and then minify it:
https://4html.net/Online-HTML-Editor-Text-to-HTML-Converter-870.html
http://minifycode.com/html-minifier/
Can any one guide me how to implement the accessibility on Single Page Application? My precise question is on announcing page title and new content.
HTML
<title data-ng-bind="TitleText" data-id="TitleAnnouncer" aria-live="assertive" aria-atomic="true"></title>
Though page title is getting changed dynamically, screen reader is not recognising the change. I have used both cases for the attribute aria-live="polite" and "assertive" which is of no use.
Following are the links which I referred,
http://www.creativebloq.com/web-design/make-single-page-apps-work-screen-readers-101517155
http://simplyaccessible.com/article/spangular-accessibility/
Thanks & Regards
I am new in angular2.I am working with angular 2 and facing issue as follows
1]I have been designed 2-3 template like email template,sms template which will take predefined data and display that data
2]I have been designed screen which contains dropdown with name like email,sms etc
email option has link to email template and same for sms.
The main thing is i want to show the selected template view as a preview of that template.Means if i select sms then the sms template will be shown in given section of the same page.(like upload image preview.)
is it possible?
Thanks ..
Yes obviously, you have to use Routuing for the same, by using routing in angular2 you will be able to
navigate throughout the pages and you can show whatever page you want to display
see also :-
https://angular.io/docs/ts/latest/guide/router.html
latest Updated to angular2 RC1 (wroth reading)
https://coryrylan.com/blog/introduction-to-angular-2-routing
Angular 2 router examples + #Routes typing support
How to use child routes in Angular 2.