1 / 10

Adding maps, widgets, searchbox

Adding maps, widgets, searchbox. Week 07 TCNJ Web 2 Jean Chu. Add Google Map to your page via iframe. http://maps.google.com/help/maps/getmaps/plot-one.html. Google Custom Search API. http:// www.google.com/cse /. Google Custom Search Panel.

drago
Download Presentation

Adding maps, widgets, searchbox

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding maps, widgets, searchbox Week 07 TCNJ Web 2 Jean Chu

  2. Add Google Map to your page via iframe http://maps.google.com/help/maps/getmaps/plot-one.html

  3. Google Custom Search API http://www.google.com/cse/

  4. Google Custom Search Panel http://code.google.com/apis/customsearch/docs/start.html

  5. Google Custom Search Panel <div id="cse" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'en'}); google.setOnLoadCallback(function() { varcustomSearchOptions = {}; varcustomSearchControl = new google.search.CustomSearchControl( '004167849526918464249:qqhbick3pu8', customSearchOptions); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); customSearchControl.draw('cse'); }, true); </script> <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

  6. Twitter Resources

  7. Adding Twitter Profile Widget to your site

  8. Adding Twitter Profile Widget to your site https://twitter.com/about/resources/widgets/widget_profile

  9. Adding Twitter Profile Widget to your site <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 30000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, behavior: 'all' } }).render().setUser('jeanho_chu').start(); </script>

  10. Twitter Share button <a href="https://twitter.com/share" class="twitter-share-button" data-via="jeanho_chu">Tweet</a> <script>!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> https://twitter.com/about/resources/buttons#tweet

More Related