Showing posts with label API. Show all posts
Showing posts with label API. Show all posts

Thursday 23 November 2023

New stuff on the EWD website

Today, I added some content to the Effective Web Designs (EWD) website.

I created it as a Laravel site.

The site has a simple search form.

It pulls content from this blog using the Blogger API.

It makes suggestions through the blog entry title for the next step, and allows the user to select one of those titles.

Once a title has been selected, it is used to provide results from the Brave search API.

The results are also links.

See the code for this site on GitHub.

Monday 28 March 2011

Google TTS API for my paragraphs using HTML5, jQuery and PHP

Most of the credit for this post goes to Abu Ashraf Masnun for this post http://www.masnun.me/2009/12/14/googles-text-to-speech-api-a-php-wrapper-class.html
You'll need to take a copy of his code for this to work. Then you need to append the following lines to the end of the PHP (after his object declaration).
$tts = new TextToSpeech();
$tts->setText($_POST['text']);
$tts->saveToFile("masnun.mp3");

Once you've done this, you can create a HTML file like mine below. To use the page, click on the speaker icons.

Note:This will not work in rubbish browsers. For this you will need to change my HTML5 <audio> tag for something awful like the <object> tag.

Another note:The Google TTS has a 100 character limit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text to speech</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
var audioText = '<audio controls="controls" autoplay="autoplay">';
audioText += '<source src="masnun.mp3" type="audio/mpeg" />';
audioText += 'Your browser does not support the audio element.';
audioText += '</audio>';
$(document).ready(function()
{
$('.tts').each(function()
{
$(this).after('<a href="#" class="speaker"><img src="http://farm6.static.flickr.com/5091/5568186294_a396c02f4f_t.jpg" /></a>');
});
$('.speaker').click(function()
{
$.post('tts.php',
{
text:$(this).prev('p').text()
}, function(data)
{
$(this).after(audioText);
});
return false;
});
});
</script>
</head>
<body>
<section id="mainContent">
<p class="tts">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p class="tts">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="tts">Johnny Diamond. Peter Sam</p>
</section>
</body>
</html>

Lorem Ipsum API using PHP

Below are some examples of using the Lorem Ipsum API. A useful tool for someone like me. I always need dummy text. I got the documentation from http://loripsum.net/

See demo.

Uncomment at will.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorem Ipsum API</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
</head>
<body>
<?php
/* Standard set of items. By default they are paragraphs.  */
/* echo file_get_contents('http://loripsum.net/api'); */
/* Set number of items */
/* echo file_get_contents('http://loripsum.net/api/2'); */
/*
Set length of items
Options can be short, medium, long, verylong.
*/
/* echo file_get_contents('http://loripsum.net/api/long'); */
/*
Set decoration of items
Options can be bold, italic and marked.
*/
/* echo file_get_contents('http://loripsum.net/api/bold'); */
/* Add links to some of the text */
/* echo file_get_contents('http://loripsum.net/api/link'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add ordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ol'); */
/* Add description lists. */
/* echo file_get_contents('http://loripsum.net/api/dl'); */
/* Add blockquotes. */
/* echo file_get_contents('http://loripsum.net/api/bq'); */
/* Add code samples. */
/* echo file_get_contents('http://loripsum.net/api/code'); */
/* Add headers. */
/* echo file_get_contents('http://loripsum.net/api/headers'); */
/* Use ALL CAPS. */
/* echo file_get_contents('http://loripsum.net/api/allcaps'); */
/* Prude version. Takes out latin words like 'sex' or 'homo'. Cheer up! */
echo file_get_contents('http://loripsum.net/api/prude');
?>
</body>
</html>

Monday 14 March 2011

Google Directions API - not bad

Here, I have provided an example of implementing Google Directions. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/maps/documentation/directions/ for more options.


See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Directions API</title>
</head>
<body>
<?php
$params = 'origin=Toddington,Bedfordshire';
$params .= '&destination=Cranfield,Bedfordshire';
$params .= '&region=uk&sensor=false';
$data = json_decode(file_get_contents('http://maps.googleapis.com/maps/api/directions/json?'.$params));
if ($data->status === 'OK')
{
$route = $data->routes[0];
foreach ($route->legs as $leg)
{
foreach ($leg->steps as $step)
{
echo $step->html_instructions .'<br />';
}
}
}
?>
</body>
</html>

Friday 11 March 2011

Google Chart API - Not bad

Here, I have provided an example of implementing Google Charts. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/chart/docs/making_charts.html for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google chart</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$chartURL = 'http://chart.googleapis.com/chart?';
/* Add chart type */
$chartURL += 'cht=bhs';
/* add chart size */
$chartURL += '&chs=600x160';
/* add chart scale */
$chartURL += '&chxt=t&chxl=0:|Low+Value|High+Value';
/* add chart key */
$chartURL += '&chdl=Career|Happiness';
/* add chart colours */
$chartURL += '&chco=35D2AB|000000';
/* add chart values */
$chartURL += '&chd=t:';
$chartURL += '40,';
$chartURL += '80';
$('#chart').attr('src', $chartURL);
});
</script>
</head>
<body>
<img id="chart" />
</body>
</html>

Wednesday 2 February 2011

Sharing data from the Facebook API

In the simple example below I am sending a request to Facebook through the Graph API. I supply my App ID. In return, Facebook provides me with a JSON object. I then process the JSON, using PHP to create a link to my Facebook application. Simple I know, and but that's the point.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
</style>
</head>
<body>
<?php
$url = 'https://graph.facebook.com/yourAppID';
$JSONobj = json_decode(file_get_contents($url));
echo '<hr />';
echo '<a href="';
echo $JSONobj->{'link'};
echo '">';
echo $JSONobj->{'name'};
echo ' Facebook page</a>';
?>
</body>
</html>

A beginners guide to get your website working with Facebook

Below are 3 steps to :

  1. Get Facebook functionality into your website.
  2. Have a Facebook application presence for your website.

Step 1 :
Register your website to get an AppID here http://developers.facebook.com/setup/
Receieve your AppID and App secret.
You also get an example page with a login and like plugin, which you can extract and embed into your site.

Step 2 :
Seeing this in action gives you the confidence to move to the next stage. You can go to http://developers.facebook.com/docs/plugins. Here you will see other plugins which can be easily embeded into your site. Some of these plugins are designed to work in co-ordination with the Facebook Page you get with your application ID. This is available through http://www.facebook.com/apps/application.php?id=yourAppID

Step 3 :
You may also access the Social Graph API. Documentation of which resides here http://developers.facebook.com/docs/api. An example being that using https://graph.facebook.com/yourAppID will return JSON data about your application.
If for example, your website uses PHP, you may process this JSON data and represent it on your website.

Friday 19 November 2010

PHP API call to Summarity

Summarity at http://www.summarity.com/ is software which summarises items of text. They helpfully provide an API for developers to use. There is an example of how to call the API using python on the website. I don't use python. I use PHP. So I went about writing the API call in PHP. So below is an example of how it's done. You will need to get your own API key. I hope it's obvious where to add your text string.

<?php

 $url = 'http://summarity.com/apiV1';
 $data = 'summarity_api_key=yourAPIkey';
 $data .= '&text='.urlencode('Just some text for testing');
                 
 $ch = curl_init($url);
 curl_setopt($ch, CURLOPT_POST, 1);
 curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                
 $response = curl_exec($ch);                
 curl_close($ch);
 echo(json_decode($response));
?>

Tuesday 28 September 2010

Add an RSS reader to your site

Here, I used the Google Reader API Feedcontrol to add an RSS feed to my page.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RSS</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");
function initialize()
{
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://effectivewebdesigns.blogspot.com/feeds/posts/default?alt=rss", "Effective Web Designs Blog");
feedControl.setLinkTarget("LINK_TARGET_BLANK");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<br /><br />
<div id="feedControl"></div>
</body>
</html>