1stwebdesigner |
| How to connect your site with twitter using @Anywhere Posted: 16 Aug 2010 02:00 PM PDT
What are we going to build? The distance finder we created using the previous tutorials uses the google maps api to let you find the distance and route between two locations. In this tutorial, I'll show you how to share your search results with your twitter followers. I'll also show you how to add hovercards and linkify usernames. You can view the demo here. And also download the source code. Prerequisites The first thing we need to do in order to use @Anywhere is to registered a new twitter application. We can do this here. Once we fill in that form, we will be given an APIkey to use in the app. Next, we'll have to include the @Anywhere script. We'll add the following code to your <head>section: <script src="http://platform.twitter.com/anywhere.js?id=ADD_YOUR_API_KEY_HERE&v=1"></script> Don't forget to fill in the api key! As some of the options from @Anywhere require jquery, we will have to include that too: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
We'll have to add another div to the layout, where to show the comment box with the text to share with our friends. <center><div style="width:100%; height:13%"></div></center> In the javascript function that shows the route (called continueShowRoute) we will have to add some code to show the comment box. //we have to create a div where @Anywhere will place the comment box; the div will be created inside the share div var twitter = "<div class='comments'></div>"; document.getElementById("share").innerHTML = twitter; // we'll call the share_twitter function with the two addresses as parameters. share_twitter(address1, address2); The share_twitter function is used to create the link to share with our friends and show the comment box. The code which uses @Anywhere to show the comment box is pretty simple. It looks like this: twttr.anywhere(function(twitter) { twitter(".comments").tweetBox({ label: 'Share with your twitter friends!', defaultContent: 'My search on distancefinder: '+url, height: 30 }); }); It calls the anywhere function for the twttr object and passes the tweetBox function as a parameter. The comment box will be shown in the div with the id given as parameter (“.comments”). We can set the following options for the comment box:
We will also have to share the link to the current page. We'll also have to add the two address values to the url to be able to share a search result. This way, when the friend clicks on our link, they will be redirected to the application page with the addresses set and see our results. We will use PHP Get to pass the two addresses. As the url might get too long for a tweet, we'll have to shorten it. For this we can use tinyurl to obtain a shorter url address. To do this, we have to make a request to: <a href="http://tinyurl.com/api-create.php?url=THE_LONG_URL">http://tinyurl.com/api-create.php?url=THE_LONG_URL</a> We'll make a php script that receives an url address, sends a request to tinyurl.com and returns the result. We'll store it in the file called getShortURL.php. The script looks like this: <?php $url = $_GET['url']; echo file_get_contents("http://tinyurl.com/api-create.php?url=" . urlencode($url)); ?> We'll have to call this script using ajax from our share_twitter function and, when we get the result from the script, show the comment box from @Anywhere. Here's how the code for this looks like: var xmlhttp; function share_twitter(a1, a2) { var my_url = location.href; if (my_url.indexOf('?a1=') != -1) { my_url = my_url.substr(0, my_url.indexOf("?")); } my_url += "?a1="+a1+"&a2="+a2; xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Browser does not support HTTP Request"); return; } var url="getShortURL.php"; url=url+"?url="+encodeURIComponent(my_url); xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { twttr.anywhere(function(twitter) { twitter(".comments").tweetBox({ label: 'Share with your twitter friends!', defaultContent: 'My search on distancefinder: '+xmlhttp.responseText, height: 30 }); }); } } Here's what the share_twitter function does. It first get the url of the current page: var my_url = location.href; If there are already some variables set in PHP GET it erases them and adds the new values (a1 and a2, the functions parameters) if (my_url.indexOf('?a1=') != -1) { my_url = my_url.substr(0, my_url.indexOf("?")); } my_url += "?a1="+a1+"&a2="+a2; The rest of the code is a bit more complicated (also, I've not shown here the GetXmlHttpObject function; you can see it in the source code), but you don't have to worry if you don't get it! All you need to do is that it is used to make the request to the getShortURL.php script and receive the result. When it gets the result (if (xmlhttp.readyState==4)) it calls the @anywhere code to show the comment box and sets the url value to the short url it received. We will also have to add a few lines of code to our app, to be able to load our friends search results. As I said, we have sent the a1 and a2 parameters (the two addresses) through GET. We will have to add a script to check if the variables are set and if they are, to show the correct map. We will add this php code before the </body> tag: <?php if (isset($_GET['a1']) && isset($_GET['a2'])) { echo "<script>start('".$_GET['a1']."', '".$_GET['a2']."');</script>"; } ?> As you can see, the script will call the start function if the two parameters are set. Let's see how the start function looks like: function start(a1, a2) { document.getElementById("address1").value = a1; document.getElementById("address2").value = a2; initialize(); } All it has to do is set the address values in the textboxes and to call to initialize() function, the one that shows the map. And that's it! We now have a comment box in our app. Of course, the users will have to be logged in their twitter accounts and allow your app to connect to their accounts. But all this is taken care of by @Anywhere! Let's check out other features of @Anywhere: Linkifying twitter usernames With only a few javascript lines added to the head section of your site, @Anywhere will convert all twitter usernames on your page in links to the proper twitter profiles. Here's the script we need to add: twttr.anywhere(function (T) { T.linkifyUsers(); }); You just have to call the linkifyUsers() function. This code will turn all twitter usernames found in the <body> section to links. You can also chose to only linkify the usernames in a section of your site. To do this, you will only need to specify the id of the element which has the usernames you want linkified. twttr.anywhere(function (T) { T("#ELEMENT_ID").linkifyUsers(); }); Hovercards Hovercards are small tooltips that show some data about a particular Twitter user. These will show up if you go with the mouse over a twitter username on you site. To add this option, you will have to add this script: twttr.anywhere(function (T) { T.hovercards(); }); You can also limit the scope when the hovercards appear, just like with linkifying usenames. Let's add a twitter username to the site and test these features: <center><div style="width:100%; height:4%">Demo App by @anirib</div></center> @Anywhere seems pretty cool, eh?     |
| Getting Started: Learning to Code for the Web, Logically Posted: 16 Aug 2010 03:00 AM PDT
Learning to develop websites could be approached just as logically. Languages for the computer could be compared to math classes. You need to learn simple addition before you can even think about calculus. Going into it with the thought of languages building off each other might help you learn the languages more effectively. Language 1–HTML What I wish I had known: Make sure you close all your tags! I cannot count the times that a page displayed strangely because I forgot to close a div. In this, commenting may be your best option, especially if it’s only </div> <!-- This closes the Header Tag --> It may save you a headache or two for HTML and will insure that you are in the habit of closing them for the stricter offshoots. A validation tool may become your best friend, so be sure to bookmark your favorite. I like W3C’s Markup Validator, but there are others out there, so check around. Some good resources:
Offshoots: There are several other languages that branch off from HTML. This includes XHTML which tends to be more fussy about syntax—they don’t call it "strict" for nothing—but does have its uses. Language 2–Cascading Style Sheets (CSS) CSS also brings to your attention the issue of cross-browser compatibility, the sometimes frustrating problem of web browsers handling the same code differently. Learning CSS will help you anticipate the different ways browsers handle the same code. Developing a mindset to deal with these hurtles also builds general troubleshooting capabilities, a necessary tool for real life, as well as web development. Having ids and classes already built into your HTML from using CSS also makes it easier to incorporate JavaScript libraries, like jQuery, later on. With CSS3, cascading style sheets now have more useful features than ever, including support for gradients and rounded corners. These can save you time and energy. The downside of this is that not all browsers support them. What I wish I’d known: Internet Explorer is (arguably) the worst browser when it comes to cross-browser compatibility. Conditional comments work for IE5 and up, and make styling for IE a little easier. Here’s a fun way to use them in the head of an HTML document. Only Internet Explorer will see the stylesheet contained within the conditional comments. Other browsers will only see a comment and ignore it. By putting the IE stylesheet second, you override any duplicate tags, so you only need to modify the elements that display incorrectly. Some good resources:
Language 3–JavaScript (JS) The syntax for JS is less forgiving than HTML or CSS, but will give you a definite sign that you did something wrong. It won’t work! The frustrating bit is that it doesn’t necessarily tell you what is wrong, so you may spend hours searching for that missing semicolon. What I wish I’d known: While there are proponents of first learning a JavaScript library—like MooTools or jQuery— I don’t think you are doing yourself a favor through this, having done this myself. This is because when it comes to certain things—like HTML5’s canvas function, for instance—you need to know how to make the whole thing work without the shortcuts that libraries provide, especially where calling variables are concerned. Some good resources:
Offshoots:Depending on your need for dynamic content, AJAX (Asynchronous JavaScript and XHTML) may be something you want to learn as well. It isn’t its own language, but a way of combining the two languages for more dynamic functionality. Obviously, this requires a knowledge of both JavaScript and XHTML. Language 4—PHP Unlike the already mentioned web development languages, PHP runs server-side, which has its own set of benefits and challenges. One benefit is that, unlike JavaScript, the user does not have to have PHP installed on their system in order to correctly view the page. The downside of this is that your host server does have to support PHP, though this is becoming less of an issue. The other part of this is that you do need a local server to run PHP pages. What I wish I’d known:Parse errors can be helpful. These point to the direct line number with the syntax error, which can save you time. Some good resources: Continuing your learning   |
| You are subscribed to email updates from 1stwebdesigner - Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
https://www.welookups.com/js/default.html