* WalrusIRC

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: Hosting an Interactive Google Doodle on a Site  (Read 1654 times)

0 Members and 1 Guest are viewing this topic.

Offline Jkolade936

  • All Around Coolio
  • Super User
  • Join Date: Jan 2016
  • Location: Horseheads, NY
  • Posts: 1515
  • Post Rating Ratio: +9/-1
  • I'm an unknown loner. I try to change that.
    • Jkolade936
    • My Sprites and Walrii Collection
  • Gender: Male
Hosting an Interactive Google Doodle on a Site
« on: March 29, 2016, 10:08:51 pm »
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


  • Calculators owned: None of them. :'(
Does this qualify as a signature? 
The answer is "Sure."


Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18870
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: Hosting an Interactive Google Doodle on a Site
« Reply #1 on: 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.
  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Unicorn

  • ??? ??? ??? ??? ???
  • Super User
  • CW Contest II - 2nd place
  • *
  • Join Date: Jan 2015
  • Location: ??? ??? ??? ??? ???
  • Posts: 2825
  • Post Rating Ratio: +5/-2
  • make :PICKACHUP: a thing!
    • Unicorn808
    • 114/11432
    • ??? ??? ??? ??? ???
  • Gender: Male
Re: Hosting an Interactive Google Doodle on a Site
« Reply #2 on: March 30, 2016, 04:59:32 am »
Couldn't you just embed an image with th link address?
  • Calculators owned: I own all of them: PICKACHUP TI 84+ CSE TI 83+ SE TI something something ??? ??? ??? ??? ???
  • Consoles, mobile devices and vintage computers owned: PICKACHUP ??? ??? ??? ??? ???



??? ??? ??? ??? ???

Offline Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3126
  • Post Rating Ratio: +31/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: Hosting an Interactive Google Doodle on a Site
« Reply #3 on: March 30, 2016, 04:57:37 pm »
Better go with an iframe.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18870
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: Hosting an Interactive Google Doodle on a Site
« Reply #4 on: 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?
  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3126
  • Post Rating Ratio: +31/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: Hosting an Interactive Google Doodle on a Site
« Reply #5 on: 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.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18870
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: Hosting an Interactive Google Doodle on a Site
« Reply #6 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  >.<
  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline Jkolade936

  • All Around Coolio
  • Super User
  • Join Date: Jan 2016
  • Location: Horseheads, NY
  • Posts: 1515
  • Post Rating Ratio: +9/-1
  • I'm an unknown loner. I try to change that.
    • Jkolade936
    • My Sprites and Walrii Collection
  • Gender: Male
Re: Hosting an Interactive Google Doodle on a Site
« Reply #7 on: March 31, 2016, 09:42:27 pm »
<iframe frameborder="0" src="https://www.google.com/logos/2015/ponyexpress/ponyexpress15.html?hl=en" width="656" height="380"></iframe>
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.
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.

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. :)

It gets more difficult. :P  You should try the Doctor Who's 50th Anniversary doodle if you want to see hard.
  • Calculators owned: None of them. :'(
Does this qualify as a signature? 
The answer is "Sure."


 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games