How to get the Social preview of a github project?

Question

I could get the project, but it does not retrieve the Social Preview of the project:

The link that I'm using is this one: https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD

which is returning the following:

{
  "id": 215636067,
  "node_id": "MDEwOlJlcG9zaXRvcnkyMTU2MzYwNjc=",
  "name": "BCMIC-PHD",
  "full_name": "AngelRibeiro10/BCMIC-PHD",
  "private": false,
  "owner": {
    "login": "AngelRibeiro10",
    "id": 13433634,
    "node_id": "MDQ6VXNlcjEzNDMzNjM0",
    "avatar_url": "https://avatars2.githubusercontent.com/u/13433634?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/AngelRibeiro10",
    "html_url": "https://github.com/AngelRibeiro10",
    "followers_url": "https://api.github.com/users/AngelRibeiro10/followers",
    "following_url": "https://api.github.com/users/AngelRibeiro10/following{/other_user}",
    "gists_url": "https://api.github.com/users/AngelRibeiro10/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/AngelRibeiro10/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/AngelRibeiro10/subscriptions",
    "organizations_url": "https://api.github.com/users/AngelRibeiro10/orgs",
    "repos_url": "https://api.github.com/users/AngelRibeiro10/repos",
    "events_url": "https://api.github.com/users/AngelRibeiro10/events{/privacy}",
    "received_events_url": "https://api.github.com/users/AngelRibeiro10/received_events",
    "type": "User",
    "site_admin": false
  },
  "html_url": "https://github.com/AngelRibeiro10/BCMIC-PHD",
  "description": "This is a Brain-Computer Music Interfacing Project",
  "fork": false,
  "url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD",
  "forks_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/forks",
  "keys_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/keys{/key_id}",
  "collaborators_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/collaborators{/collaborator}",
  "teams_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/teams",
  "hooks_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/hooks",
  "issue_events_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/issues/events{/number}",
  "events_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/events",
  "assignees_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/assignees{/user}",
  "branches_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/branches{/branch}",
  "tags_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/tags",
  "blobs_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/git/blobs{/sha}",
  "git_tags_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/git/tags{/sha}",
  "git_refs_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/git/refs{/sha}",
  "trees_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/git/trees{/sha}",
  "statuses_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/statuses/{sha}",
  "languages_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/languages",
  "stargazers_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/stargazers",
  "contributors_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/contributors",
  "subscribers_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/subscribers",
  "subscription_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/subscription",
  "commits_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/commits{/sha}",
  "git_commits_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/git/commits{/sha}",
  "comments_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/comments{/number}",
  "issue_comment_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/issues/comments{/number}",
  "contents_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/contents/{+path}",
  "compare_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/compare/{base}...{head}",
  "merges_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/merges",
  "archive_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/{archive_format}{/ref}",
  "downloads_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/downloads",
  "issues_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/issues{/number}",
  "pulls_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/pulls{/number}",
  "milestones_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/milestones{/number}",
  "notifications_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/notifications{?since,all,participating}",
  "labels_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/labels{/name}",
  "releases_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/releases{/id}",
  "deployments_url": "https://api.github.com/repos/AngelRibeiro10/BCMIC-PHD/deployments",
  "created_at": "2019-10-16T20:14:22Z",
  "updated_at": "2019-11-14T16:52:13Z",
  "pushed_at": "2019-11-14T16:52:11Z",
  "git_url": "git://github.com/AngelRibeiro10/BCMIC-PHD.git",
  "ssh_url": "git@github.com:AngelRibeiro10/BCMIC-PHD.git",
  "clone_url": "https://github.com/AngelRibeiro10/BCMIC-PHD.git",
  "svn_url": "https://github.com/AngelRibeiro10/BCMIC-PHD",
  "homepage": null,
  "size": 69612,
  "stargazers_count": 0,
  "watchers_count": 0,
  "language": null,
  "has_issues": true,
  "has_projects": true,
  "has_downloads": true,
  "has_wiki": true,
  "has_pages": false,
  "forks_count": 0,
  "mirror_url": null,
  "archived": false,
  "disabled": false,
  "open_issues_count": 0,
  "license": {
    "key": "apache-2.0",
    "name": "Apache License 2.0",
    "spdx_id": "Apache-2.0",
    "url": "https://api.github.com/licenses/apache-2.0",
    "node_id": "MDc6TGljZW5zZTI="
  },
  "forks": 0,
  "open_issues": 0,
  "watchers": 0,
  "default_branch": "master",
  "temp_clone_token": null,
  "network_count": 0,
  "subscribers_count": 1
}

I want to get this picture of 'Social Preview' ... but it doent show in the returning of the project atributes.

Thank you very much :)

Answer 1

AFAIK, it's still not possible to get it with REST API, but Social Preview image is available through GraphQL API in Repository/openGraphImageUrl. You can play with it using "Explorer"

Example GraphQL request:

{
  repository(owner: "resend", name: "react-email") {
    openGraphImageUrl
  }
}

Answer 2

So it's not possible to retrieve it from the API, but in my case since I only displayed my top three repos on my website it wasn't a pain to manually grab the image URLs.

I did this by uploading the preview image on GitHub, then right click on the image when it pops up -> inspect and you'll see in the developer tools the element has a 'background-image: url()' property, right click on that URL and then open in new tab, and there's the URL for your image!

Like I said, it's a manual process but if you need to only do it a few times then it's not a huge deal. That was my workaround.