Hosting an Interactive Google Doodle on a Site

b/Web publicado por u/Dudeman313 March 29, 2016, 10:08:51 PM

Hosting an Interactive Google Doodle on a Site

I was wondering how to do this. Each doodle is an HTML file, but how would I put it on my site?
Here's my site block code:

Code Select



<divz id="p473I"><!--NEW ID-->
    
     <div class="item portfolio" id="portfolio2">
      
      <div class="container">
      
       <div class="row margin-bottom-40">
       
        <div class="col-md-12">
        
         <p class="lead text-center editContent">
          See some of our work below<br>
                            Click "Content" above and then you can click here to edit this text.   
         </p>
        
        </div><!-- /.col-md-12 -->
       
       </div><!-- /.row -->
            
       <div class="row margin-bottom-20">
       
        <div class="col-md-3">
           
              <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio2.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
        
        <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio3.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
        
        <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio4.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
       
       </div><!-- /.row -->
       
       <div class="row margin-bottom-20">
       
        <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio5.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
        
        <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio6.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
        
        <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio7.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
        
        <div class="col-md-3">
           
            <a href="">
             <img src="/page/images/portfolio8.jpg" class="img-rounded width-100" alt="" data-selector="img">
             
            </a>
                           
        </div><!-- /.col-md-3 col -->
       
       </div><!-- /.row -->
      
      </div><!-- /.container -->
     
     </div><!-- /.item -->
    
    <p align="right"><a href="#top" style="text-decoration:underline;">Top</a></p> <!--NEW ID-->
</div></divz>

How do I replace the pictures with doodles?
Like this one: http://www.google.com/logos/2015/ponyexpress/ponyexpress15.html?hl=en

Inicia sesión o crea una cuenta para dejar un comentario

u/Dream of Omnimaga March 30, 2016, 04:57:00 AM

Can't you just point to the last URL instead of an image in the img tags? Also you would need to make sure that Google allows you or any other third-parties to hotlink to their doodle files. It's possible that they disabled hotlinking altogether, so even if you had valid code, then it might still not work.

u/Unicorn March 30, 2016, 04:59:32 AM

Couldn't you just embed an image with th link address?

u/Yuki March 30, 2016, 04:57:37 PM

Better go with an iframe.

u/Dream of Omnimaga March 30, 2016, 07:07:42 PM

An iframe won't solve the issue I mentioned above if its content is not hosted on Google, though. I wonder if Google offers an API or something to embed their special logos on your own site?

u/Yuki March 31, 2016, 12:41:48 AM

Code Select

<iframe frameborder="0" src="https://www.google.com/logos/2015/ponyexpress/ponyexpress15.html?hl=en" width="656" height="380"></iframe>

Yeah, I think iframes do the job.

u/Dream of Omnimaga March 31, 2016, 01:31:20 AM

Ah, that's good, then. Just make sure to not take remote/hotlinking for granted. You can probably put them on your site until they disable hotlinking (ticalc used to disallow hotlinking and what it did is that you couldn't link directly to zip files and if you used a screenshot on a forum it turned into ticalc.org logo). Some sites do that for bandwidth or copyrights.

EDIT: And darn, that game is hard >.<

u/Dudeman313 March 31, 2016, 09:42:27 PM

Quote from: Juju on March 31, 2016, 12:41:48 AM
<iframe frameborder="0" src="https://www.google.com/logos/2015/ponyexpress/ponyexpress15.html?hl=en" width="656" height="380"></iframe>
Code Select Expand
<iframe frameborder="0" src="https://www.google.com/logos/2015/ponyexpress/ponyexpress15.html?hl=en" width="656" height="380"></iframe>

Yeah, I think iframes do the job.

Thanks, but while I was away, I realized I could use "Inspect Element" in Chrome, and then copy the "id="doodle-hero"" element and paste it directly into my page, which would generate the doodle and only the doodle. It's exactly the same as using the iframe, because the iframe is in the "doodle-hero" element wherever a doodle is hosted.

Quote from: DJ Omnimaga on March 31, 2016, 01:31:20 AM
Ah, that's good, then. Just make sure to not take remote/hotlinking for granted. You can probably put them on your site until they disable hotlinking (ticalc used to disallow hotlinking and what it did is that you couldn't link directly to zip files and if you used a screenshot on a forum it turned into ticalc.org logo). Some sites do that for bandwidth or copyrights.

EDIT: And darn, that game is hard >.<

I credited all the doodles, so until then, I should be good.