14

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.

imLolman
  • 540
  • 1
  • 5
  • 15

4 Answers4

7

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
  }
}
Bjorn Lu
  • 141
  • 2
  • 6
  • GitHub only allows requests at GraphQL API when it's has a token to authentication. That means I can't use it on a front-end only website. – imLolman Oct 26 '21 at 00:59
  • @imLolman That's the only way GitHub exposes the image URL. Otherwise, you would need to do that in a server and proxy the result. You mentioned you're using GitHub Pages to serve the site, but an alternative is using Netlify or Vercel which has the functions feature for a simple proxy setup. OR another way is to fetch the image URLs during build time (before publishing to GitHub Pages). – Bjorn Lu Oct 28 '21 at 02:31
2

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.

Emre
  • 933
  • 15
  • 27
  • But the main problem is I am using a static website, CORS Error Will Occur if I fetch Repo Link and Then I have To Fetch and Parse the data for One Image. If i have 30 projects, that will make my webpage very very slow. – imLolman Jun 20 '19 at 20:14
-1

hope you found some way to achieve this, today i was also wondering on how to achieve this, task was to get the social preview image link of my github repository , i wanted to use it on my website,

after 30 minutes of intense searching, i found no way and came to this blog, Then i got an idea which sort of gets the job done,

Answer- What is 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.

If it worked for you, please upvote the answer, so it will help other, Thank you, keep hacking

Ashutosh7i
  • 100
  • 10
-3

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!

samnodier
  • 355
  • 3
  • 2