CODEWITHSUNDEEP
githubgithub-api
imLolman
imLolman

Reputation: 611

How can I get my social preview image link of my GitHub repo using Git API?

I own many GitHub repository and I usually add projects on weekly basis. I am making my own website using GitHub pages, since I can only host static website on GitHub pages hence I am going to use GitHub API in order to automatically update my new projects on my website. But I also want to add a preview/sample image to it.

I got to know that there is an option named social preview where I can add an image of my repository to be shown on social media.

Although I can get my all repo info from api.github.com but I can't get my social media preview image URL.

Upvotes: 15

Views: 5771

Answers (4)

Aashutosh Soni
Aashutosh Soni

Reputation: 138

What I did:

  1. got to the respecitve repositor setting on github. you should see the option to add/edit social preview, (this is the image whose link is required to us)

  2. simply press ctrl+shift+i , this should opens developer tools,

  3. then click on inspect icon. ( usually on top left, arrow)

  4. now select our image,click on it.

  5. now look closely to the styles, you should see a link which looks something like this-

    https://repository-images.githubusercontent.com/xxxxxxxxx/yyyyyyyy-wwww-kkkk-jjjj-rrrrrrrrrrrr

  6. this is the links of the social preview image of your github repo.

  7. Copy this link and use wherever you want, works like a charm, no login required.

Upvotes: 0

samnodier
samnodier

Reputation: 395

I was facing the same issue but I thought like taking the repository link and appending /settings/og-template string after it. This returns the same image that you added in your social preview. So iterating through every link of the repositories add adding that string should return the corresponding Social Preview TRY IT!

Upvotes: -3

Bjorn Lu
Bjorn Lu

Reputation: 161

GitHub GraphQL API v4 has a field to query the OpenGraph image URL. It uses the social image set in the repo settings and fallbacks to the user profile image.

Link to docs and search for "openGraphImageUrl".

You can test this out with GitHub's GraphQL API explorer (sign in required) and query:

{
  repository(owner: "vuetifyjs", name: "vuetify") {
    openGraphImageUrl
  }
}

Upvotes: 8

Emre
Emre

Reputation: 1103

I don't think that it is possible with GitHub API but you may try to parse <meta property="og:image" content="[IMAGE-URL]"/> tag in the HTML of your repository page.

Upvotes: 4

Related Questions