DEV Community

loading...

How to use the dev.to API!

nataliedeweerd profile image 𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 Updated on ・2 min read

Why?

I use dev.to as my main dev blogging area now, but I want to show-off my blogs on my portfolio! So we're going to create a simple list of the latest 3 blog articles which link back to the dev.to site. For this tutorial I'll be showing how this can be achieved in PHP.

Let's go!

First of all, the below is a great starting point to understand the dev.to API and all of the possible endpoints.

We're going to be using this endpoint: https://dev.to/api/articles?username=nataliedeweerd which generates a JSON object with the author's latest 30 articles. To get your personal endpoint, change the nataliedeweerd username to your own.

So how do we get this data into our website? In PHP we can use something called cURL. cURL (client URL) is a PHP library which allows you to make HTTP requests. So you can call a URL in your code and get a HTML response from it.

The below code shows a basic curl function which gets us our data:

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://dev.to/api/articles?username=nataliedeweerd",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => array(
    "cache-control: no-cache"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);
Enter fullscreen mode Exit fullscreen mode

We need to decode this data before we can effectively use it however.

$response = json_decode($response, true); 
Enter fullscreen mode Exit fullscreen mode

This decodes the json object into a much more usable array! All we need to do now is loop through the array, and print out the results.

foreach ($response as $key => $article){

    echo '
        <a href="'.$article['url'].'" class="blog__article">
            <h2>'.$article['title'].'</h2>
            <div class="blog__description">'.$article['description'].'</div>
            <div class="blog__readmore">Read More</div>
        </a>
    ';

    if ($key == 2){ break; }

}
Enter fullscreen mode Exit fullscreen mode

Because the array key's are numeric, we can use these to determine how many articles we've printed. If we've printed 3 articles the key will be 2 (array's start from 0 don't forget), so we break out of the foreach.

If you want to have a closer look at what keys the array is printing out, you can use the below code before the foreach loop:

echo '<pre>'.print_r($response,true).'</pre>';
Enter fullscreen mode Exit fullscreen mode

This will show you everything the decoded JSON is returning, allowing you to include your article's images, or canonical links, or tags!

And that's it! We just need to apply a bit of CSS and our dev.to articles are printing out wherever we want!

Let me know if you have any more questions below.

Discussion (9)

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 Author

If it's only 1 specific article you want to extract, you can use https://dev.to/api/articles/148356, and replace 148356 with the unique post ID. You can then access the title and url keys.

Still trying to find the easiest way to obtain the unique post ID... however you can use this endpoint https://dev.to/api/articles?username=nataliedeweerd and look for the "id" key to find the unique post's ID.

See here for more info docs.forem.com/api/#operation/getU...

Hope that helps somewhat... if not, let me know what you're trying to achieve and I'll help further :)

Collapse
ra1nbow1 profile image
Matvey Romanov

Really useful article

Collapse
nataliedeweerd profile image
Collapse
sonyarianto profile image
Sony AK • Edited

nice, but how to get the markdown content of each article? any endpoint for that?

Update:
Oh ignore my question above, finally found the answer at dev.to/api

Collapse
nataliedeweerd profile image
Collapse
ra1nbow1 profile image
Matvey Romanov

Is it possible to get only 2 latest posts?

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 Author • Edited

Absolutely!

Arrays start from 0, meaning if you want the latest 2, you want to stop when the array key (the index of the array item) reaches 1. So you have 0, and 1. The API automatically orders by newest first, so we just need to tell it when to stop!

In the code above, simply change if ($key == 2){ break; } to if ($key == 1){ break; }

Hope that helps :) but let me know if you have anymore questions, or it doesn't make sense.

Forem Open with the Forem app