HTML, what is an "li-icon" tag or element? - tags

I am a student in Web development and as an assignment, I have to reproduce a LinkedIn profile page with Bootstrap. I have been looking at LinkedIn's code and found an "li-icon" tag or element that is contained in a span tag and containing an svg element. I can't seem to find any documentation on li-icon tags or elements, I don't know what it is exactly.
Here is the code from LinkedIn :
<span id="mynetwork-tab-icon" class="nav-item__icon" lang="fr" role="presentation">
<li-icon aria-hidden="true" type="nav-small-people-icon" color="true">
<svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="nav-icon" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M16,17.85V20a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V17.85a4,4,0,0,1,2.55-3.73l2.95-1.2V11.71l-0.73-1.3A6,6,0,0,1,4,7.47V6a4,4,0,0,1,4.39-4A4.12,4.12,0,0,1,12,6.21V7.47a6,6,0,0,1-.77,2.94l-0.73,1.3v1.21l2.95,1.2A4,4,0,0,1,16,17.85Zm4.75-3.65L19,13.53v-1a6,6,0,0,0,1-3.31V9a3,3,0,0,0-6,0V9.18a6,6,0,0,0,.61,2.58A3.61,3.61,0,0,0,16,13a3.62,3.62,0,0,1,2,3.24V21h4a1,1,0,0,0,1-1V17.47A3.5,3.5,0,0,0,20.75,14.2Z" class="active-item" style="fill-opacity: 1"></path><path d="M20.74,14.2L19,13.54V12.86l0.25-.41A5,5,0,0,0,20,9.82V9a3,3,0,0,0-6,0V9.82a5,5,0,0,0,.75,2.63L15,12.86v0.68l-1,.37a4,4,0,0,0-.58-0.28l-2.45-1V10.83A8,8,0,0,0,12,7V6A4,4,0,0,0,4,6V7a8,8,0,0,0,1,3.86v1.84l-2.45,1A4,4,0,0,0,0,17.35V20a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V17.47A3.5,3.5,0,0,0,20.74,14.2ZM16,8.75a1,1,0,0,1,2,0v1.44a3,3,0,0,1-.38,1.46l-0.33.6a0.25,0.25,0,0,1-.22.13H16.93a0.25,0.25,0,0,1-.22-0.13l-0.33-.6A3,3,0,0,1,16,10.19V8.75ZM6,5.85a2,2,0,0,1,4,0V7.28a6,6,0,0,1-.71,2.83L9,10.72a1,1,0,0,1-.88.53H7.92A1,1,0,0,1,7,10.72l-0.33-.61A6,6,0,0,1,6,7.28V5.85ZM14,19H2V17.25a2,2,0,0,1,1.26-1.86L7,13.92v-1a3,3,0,0,0,1,.18H8a3,3,0,0,0,1-.18v1l3.72,1.42A2,2,0,0,1,14,17.21V19Zm7,0H16V17.35a4,4,0,0,0-.55-2l1.05-.4V14.07a2,2,0,0,0,.4.05h0.2a2,2,0,0,0,.4-0.05v0.88l2.53,1a1.5,1.5,0,0,1,1,1.4V19Z" class="inactive-item" style="fill: currentColor"></path></svg>
</li-icon>
</span>
Would somebody know what it is? Thanks for your help :-)


After discussing the matter with one of my classmates, I think I discovered what it is.
It probably is a LinkedIn homemade HTML tag, I did not know you could create your own until I read this post: Is there a way to create your own html tag in HTML5?. The "li" must stand for LinkedIn.
Unless anybody has a different answer, I think this is the one.

Related

How can I integrate Google Charts on AMP pages

I use Google Table Charts in my "normal" (NON-AMP) pages. But in the AMP pages they are not there. When I load my page without /AMP at the end I can see the tables and with /AMP at the end not.
Example:
https://lotto-6-aus-49.de/lottozahlen-von-heute-mittwoch-den-20-03-2019
and
https://lotto-6-aus-49.de/lottozahlen-von-heute-mittwoch-den-20-03-2019/amp
To get AMP pages on my site I use a wordpress plugin. I searched for adding "java scripts" in AMP site but cannot find.
Can someone help me?

First of all you need a template with your charts. Let's call that template.html
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="/template.html"></amp-iframe>
You can put all of your js into that template. The iFrame should work.
But please keep in mind that iFrames are only allowed when below 80% from the top of the page.
if you need to load dynamic content, you could create a php file which accepts parameters and returns a html file that does include the chart.
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="/charts.php?startDate=2019-01-01&endDate=2019-02-01"></amp-iframe>

Actually you can't.
You need JavaScript for that which doesn't work with AMP.
added:
iFrame Solution:
First you create a template (html + js) that does show the chart you want to display. Then you import that template file using amp-iframe.
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="pathtotemplate/template.html">
</amp-iframe>

Why is Facebook's sharer.php properly displaying some of my thumbnails, but not others?

OK, this is my first question on SO, so be gentle. Doing my best to be thorough. :)
We want users to be able to share URLs specific to ordering photos of their children on our site. We currently have no interest in implementing Open Graph on our site. We're not trying to track that data at this time, and it's more work than I have time for anyway. So I opted for the quickest route: the sharer.php link.
I realize that FB's sharer.php is deprecated in favor of 'og:' tags, but see no indication at https://developers.facebook.com/docs/reference/plugins/share-links/ - which was updated three weeks ago, so it obviously should still work.
I followed the instructions in these blog posts to customize the links:
http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
http://www.therykers.net/?p=37
However, we only get thumbnails to properly display in the FB Share dialog when using our site's demo subdomain, even though the source code for our sharer.php link is identical in all instances (aside from the image/name of the child, the site's subdomain, and the photography studio name).
This source code (demo site) properly displays the image:
<a href="https://www.facebook.com/sharer.php?
s=100
&p[url]=https://demo.mysmilecentral.com/public/show?link_code=funankizwd
&p[images][0]=http://assests0_bop_heroku_com.s3.amazonaws.com/images/sp00/sp00-001-1/0106_022_0028.jpg
&p[title]=Order%20Pictures%20of%20CASEY%20at%20Sample Studio's%20MySmileCentral!
&p[summary]=View%20images%20and/or%20order%20pictures%20of%20CASEY." target="_blank">
<img src="https://assests0_bop_heroku_com.s3.amazonaws.com/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
But this ('live' site) doesn't:
<a href="https://www.facebook.com/sharer.php?
s=100
&p[url]=https://rowlandphoto.mysmilecentral.com/public/show?link_code=2cols21uogpx
&p[images][0]=http://assests0_bop_heroku_com.s3.amazonaws.com/images/bj20/bj20-bb2013-1/1448_img_0128.jpg
&p[title]=Order%20Pictures%20of%20Gabrielle%20at%20Rowland Studio's%20MySmileCentral!
&p[summary]=View%20images%20and/or%20order%20pictures%20of%20Gabrielle." target="_blank">
<img src="https://assests0_bop_heroku_com.s3.amazonaws.com/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
Both images meet the dimension requirements of FB Share, and are publicly viewable.
I've spent several hours trying to find an answer (Googling, searching here), and haven't come up with a logical reason for this.

If you open up your web inspector you would realize that https://www.facebook.com/sharer.php deprecated redirects to https://www.facebook.com/sharer/sharer.php, which only has one supported parameter u for the url being shared which depends on Open Graph meta data (which you have opted not to use).
The p array (p[url], etc) is not supported in the new Facebook Share dialog. By using deprecated features, you should expect unstable behaviour or no results at all. There isn't anything much more to say about that.

Facebook comments are duplicated on every page

I am trying to integrate facebook comments into my website (I tried to do it several months ago but there didn't seem much support about and I couldn't fathom it). The comments are showing and I managed to get the comment to show on my facebook wall under the individual post/item they were meant for but unfortunately it is posting the same comment under every post. You can see the box working here: http://www.roomfor5.co.uk/item/6726
The website is php based and the code I am using is: " title="" url="" width="600" publish="true" >
I have also used this code without success: " width="600" publish="true" >
I know it's something to do with the xid attribute but I am stumped as to why it is duplicating:(

Hi when looking at the view source of your page I see this:
<fb:comments
xid="http://www.roomfor5.co.uk-<?=str_replace('/','-',$_SERVER['REQUEST_URI']);?>"
num_posts="2"
width="600"
publish="true" >
</fb:comments>
So the fb:comments tag is not getting rendered out fully.
Also on the rendered page, it says you haven't specified the url. while there is a malformed xid= attribute, you really should have a url= attribute. See https://developers.facebook.com/docs/reference/plugins/comments/
Warning: this comments plugin is operating in
compatibility mode, but has no posts yet.
Consider specifying an explicit 'href' as
suggested in the comments plugin documentation
to take advantage of all plugin features.
EDIT:
For http://www.roomfor5.co.uk/item/6726, you have
<div
class="fb-comments"
data-href="http://www.roomfor5.co.uk"
data-num-posts="5"
data-width="600">
</div>
The data-href attribute should be http://www.roomfor5.co.uk/item/6726 not http://www.roomfor5.co.uk

If you click 'View source' you'll see the rendered HTML:
<fb:comments xid="http://www.roomfor5.co.uk-<?=str_replace('/','-',$_SERVER['REQUEST_URI']);?>" num_posts="2" width="600" publish="true" >
It looks like you're trying to specify a unique xid for the page but the server-side script is behaving like plain text.

how can I show "0 Notes" in tumblr when there aren't any notes?

I tried different codes from different themes and google search. Though everything just shows a notification only if there are notes in a post.
So when there aren't notes, i wanted to show "0 notes" - How can I do that
Thanks

From the first look solution seems to be impossible to output anything if Post has no notes due to tumblr custom themes docs, but as we shall see, the impossible is possible.
I invented trick to help you with your question.
The main idea of trick is to create special css class only if post has no notes, after it trick is using content of pseudo-elements to insert necessary text in .notes block of post.
Trick requirements: only tumblr markup and css;
Tumblr markup:
{block:Text}
<article class="{block:PostNotes}no{/block:PostNotes}nonotes">
…
<div class="notes">
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</div>
</article>
{/block:Text}
One line css:
article .nonotes .notes:before { content: '0 notes'; }

I'm having the same problem. Starting to think there's no way around this :( except maybe to write your own script to get the NoteCount using the Tumblr API. Hopefully someone will be able to answer this!

What markup is allowed in the description of a facebook feed post?

Upon playing with it, it appears that the description for a facebook feed post made by an application can have some html in it. All I've found that works is <b> and <i> but even <br> doesn't work. What sort of formatting is allowed? Or at the very least how can i start a new line?

For the record, <i>, <b>, <small> and <center> at least work. They only want you to use inline markup, but as a hack you can put <center></center> to make line breaks.

I think this is it: http://www.facebook.com/notes_cheatsheet.php