1

I'm trying to grab the favicon, site title and descriptions of a list of external urls, ideally with jquery. I've successfully worked out to sync up googles favicon service for my urls, can anyone shed any light how to achieve this for site title and description too? Here's what I have so far to get the favicon.

HTML

<li><a href="http://dribbble.com/">Dribbble</a></li>
<li><a href="http://behance.net">Behance</a></li>
<li><a href="http://www.danwebb.net">Dan Webb</a></li>

JQUERY 

$("a[href^='http']").each(function() {
$(this).prepend('<img src="https://www.google.com/s2/favicons? domain=' + this.href + '">');
});
Joel Rosen
  • 157
  • 1
  • 11

1 Answers1

2
  • You had an extra space ? domain=.
  • Also, use this.getAttribute("href") or jQuery's $(this).attr("href")
  • use https !!!

$("a[href^='http']").each(function() {
   var href= this.getAttribute("href");
   $(this).prepend('<img src="https://www.google.com/s2/favicons?domain='+ href +'">';
});
<li><a href="https://dribbble.com/">Dribbble</a></li>
<li><a href="https://behance.net">Behance</a></li>
<li><a href="https://www.danwebb.net">Dan Webb</a></li>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

But you'll most surely run into this error:

...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

so it's not possible using JS only.

PHP to the rescue:

Since the CORS policy issue in usign AJAX directly to fetch content from websites that do not allow this - you could instead:

  1. AJAX GET a PHP script on your server that will grab the external site
  2. now that the content is on your domain AJAX will respond with that content.
  3. parse the response data using JS (jQuery) to get the desired elements attribute values or text.

grabber.php

<?php
    echo file_get_contents($_GET["url"]);

index.html

<ul>
    <li><a href="https://dribbble.com/">Dribbble</a></li>
    <li><a href="https://behance.net">Behance</a></li>
    <li><a href="https://www.danwebb.net">Dan Webb</a></li>
</ul>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
    function grabber (url, el) {
      $.ajax({
        url: "grabber.php?url="+ url,
        type: "GET",
        success: function(data){
          // console.log( data ); 

          var $head  = $(data).find("head");
          var title = $head.find("title").text();
          var desc  = $head.find("meta[name='author']").attr("content");
          console.log(title , desc);
          $(el).append(" - "+ title +" - "+ desc);
        }
      });
    }

    $("a[href^='http']").each(function () {
      var href= this.getAttribute("href");
      $(this).prepend('<img src="https://www.google.com/s2/favicons?domain='+ href +'">';
      grabber( href , this ); // this represent the current loop el.
    });
<script>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Thanks for the edit. I was looking to try and grab the site title and description from a url also? – Joel Rosen Jan 01 '18 at 19:02
  • 1
    Most websites will block you from fetching content using AJAX. – Roko C. Buljan Jan 01 '18 at 19:08
  • Ahh thanks for your help Roko, I'm looking to try and just grab a summary, first few lines of text or anything slightly descriptive for a url! I'll keep hunting, unless you know of a way with PHP maybe? – Joel Rosen Jan 01 '18 at 19:10
  • Roko how can I prepend each link with the title and description? – Joel Rosen Jan 01 '18 at 21:37
  • @JoelRosen pass the current loop element to the function like: `grabber( href, this );`, than inside the `grabber` function (inside the `success`) you can do: `$(el).append(" - "+ title +" " + desc);` - Therefore make sure to also add the `el` argument like: `function grabber (url, el) {` – Roko C. Buljan Jan 02 '18 at 01:05