Favicons for URLs and external Links!?

identicon
Favicons for URLs and external Links!?
Alexander@5e3cf8af Thursday 31st May 2018, 20:37:08

Hi Fred and Community,
I have looked at many forums and wish me favicons for external links in Flatboard Forum. Would such a plugin be conceivable for the upcoming flatboard version?
So it would be something for the eye again and you can thereby better perceive external links. Favicons are likely to have almost all websites today.
Thank you in advance.
Last modified: Saturday 2nd June 2018, 20:03:19

Replies 8
anonymous
53235657  Thursday 31st May 2018, 21:35:32

Not a plugin, modify CSS.

Flatboard already uses font awesome, so add the following to CSS:

a[href^="http"]:before {    
content: "\F08E"; /* this is your text. */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}

Last modified: Friday 1st June 2018, 09:03:29

AlexanderLiebrecht_5e3cf8af
AlexanderLiebrecht  Friday 1st June 2018, 00:18:24

 
image
I have now added CSS in the main.css and spectre.css to your code. Unfortunately I will not see the actual favicons of the web pages in the forum and only a favicon.
How can I make it better? Of course, browser cache and flatboard cache are deleted several times.
Last modified: Friday 1st June 2018, 09:02:10
Blogger, Webmaster, Forum-Admin, Wiki-Writer and CMS Service Provider from Rostock, Germany. I have a large Portfolio on the Internet and also offer Services. Flatboard is my World and the Forum tells me completely.
Main-Blog >> Main-CMS-Forum.

identicon
hmmy  Friday 1st June 2018, 00:44:26

My mistake, I misread. Remove the CSS I instructed earlier. 
Try the following:
Add the following to the header:

<script>
$("a[href^='http']").each(function () {

if (this.parentNode.parentNode.className == "media-body" ||
  this.parentNode.parentNode.parentNode.parentNode.className == "media-body")
{
$(this).css({
background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") right center no-repeat","padding-right": "20px"
});
}
});
</script>

This should should the favicons in links, like below:
Google
Note: If you want it on the left side of the link use this:

$(this).css({
background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat","padding-left": "20px"
});
}

Last modified: Friday 1st June 2018, 12:05:28

AlexanderLiebrecht_5e3cf8af
AlexanderLiebrecht  Friday 1st June 2018, 02:25:47

 

Unfortunately, it does not seem to work for me and even with this solution found in google it is not. Hm .. what am I doing wrong?
Did you already test it successfully or can you show me examples in the Flatboard Forum? Thank you!

$("a[href^='http']").each(function() {
$(this).css({
  background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
  "padding-left": "40px"
});
});
Blogger, Webmaster, Forum-Admin, Wiki-Writer and CMS Service Provider from Rostock, Germany. I have a large Portfolio on the Internet and also offer Services. Flatboard is my World and the Forum tells me completely.
Main-Blog >> Main-CMS-Forum.

identicon
hmmyHmmy  Friday 1st June 2018, 03:04:57

  i haven’t tried it with FB.  But am sure if you put it in the header  it would work.  One of these days I’ll install FB when some features get implemented .  Maybe Fred can advise
Last modified: Friday 1st June 2018, 08:57:16

Fred_4346f29d
Fred  Saturday 2nd June 2018, 09:59:29

Hi,
Code by hmmy work well, but change de class name for spectre wink
Open your footer.tpl.php, search:
<?php echo Plugin::hook('footerJS', $out['self'])?>

And add before:
    <script>
 $(".flatb-content a[href^='http']").each(function () {
 $(this).css({
background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat", "padding-left": "18px"
 });  
 });  
 </script>

Demo here...
Last modified: Saturday 2nd June 2018, 10:20:15

Before ask a question, read the documentation.
Sorry I'm busy right now
Please like in alternativeto.net 👍🏻
╰☆╮Flatboard╰☆╮ is a open source and community contributions are essential to project success!


AlexanderLiebrecht_5e3cf8af
AlexanderLiebrecht  Saturday 2nd June 2018, 17:23:26

 

Hi Fred and Thanks for this Hints. My Problem is solved :-)
Blogger, Webmaster, Forum-Admin, Wiki-Writer and CMS Service Provider from Rostock, Germany. I have a large Portfolio on the Internet and also offer Services. Flatboard is my World and the Forum tells me completely.
Main-Blog >> Main-CMS-Forum.

Fred_4346f29d
Fred  Saturday 2nd June 2018, 20:02:55

Great ! 👍🏻

Before ask a question, read the documentation.
Sorry I'm busy right now
Please like in alternativeto.net 👍🏻
╰☆╮Flatboard╰☆╮ is a open source and community contributions are essential to project success!