DEV Community

loading...

I'll make a custom social image for your GitHub repo

joemasilotti profile image Joe Masilotti ・1 min read

Hey folks! I'm building an image generation tool that automates link previews.

Later this week I'm launching a new feature. But I wanted to give the DEV community a sneak peek!

Send me a link to your best GitHub repo and I'll create a custom social image.

You can upload this on the settings page of the repo - it will be used when you share on Twitter, Facebook, LinkedIn, etc.
Feel free to ask for a specific color or hex code!

Here are some examples

GitHub social images made with Mugshot Bot

Discussion (35)

pic
Editor guide
Collapse
braydentw profile image
Brayden W ⚡️

Thanks so much! Here’s mine:

🦄 GitHub.com/braydentw/react-emoji-search

Collapse
joemasilotti profile image
Joe Masilotti Author

Sure thing - here's two versions! Would love to know what you think.

react-emoji-search social preview via Mugshot Bot

react-emoji-search social preview via Mugshot Bot

Collapse
braydentw profile image
Brayden W ⚡️

Very cool - thanks! So is this what the mugshotbot tool does?

Thread Thread
joemasilotti profile image
Joe Masilotti Author

This is an upcoming feature. It's mainly used to automate link preview images for your blog. You drop in a line of HTML and it dynamically creates an image when share on Twitter/Facebook.

Thread Thread
braydentw profile image
Brayden W ⚡️

Nice :)

What would the HTML be for? (Sorry for all the questions. This is just a super interesting tool to me :D)

Thread Thread
joemasilotti profile image
Joe Masilotti Author

No problem at all!

With a subscription you can add some HTML to your

for crawlers to get your image. For example, in the snippet below the ... can be set to dynamically generate images for every page on your blog.
<head>
  <meta name="og:image" content="https://www.mugshotbot.com..." />
</head>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
braydentw profile image
Brayden W ⚡️

Ok ok ok. That makes sense now 😅. I thought I had to insert a piece of HTML onto the website.

Thanks for your clarification. Is there a free version of this?

Thread Thread
joemasilotti profile image
Joe Masilotti Author

Ha, nope, just a meta tag! And yeah, there is a free version.

With the free version you can generate unlimited images via the web GUI. Automating via a URL and removing the small watermark is a paid service.

Thread Thread
braydentw profile image
Brayden W ⚡️

Got it - thanks for the info :D

Thread Thread
joemasilotti profile image
Joe Masilotti Author

No problem! Let me know if you have any more questions or would like to set it up on your blog :)

Collapse
akhileshbalaji profile image
Collapse
joemasilotti profile image
Joe Masilotti Author

Here you go! You can upload an image to github.com/akhilesh-balaji/Textyli... if you want to use it.

akhilesh-balaji/Textylic social preview via Mugshot Bot

akhilesh-balaji/Textylic social preview via Mugshot Bot

akhilesh-balaji/Textylic social preview via Mugshot Bot

Collapse
akhileshbalaji profile image
Akhilesh Balaji

That looks amazing, Thanks!

Collapse
adityamitra profile image
Aditya Mitra

Can you do it for my portfolio repo - github.com/aditya-mitra/aditya-mit... ?

Collapse
joemasilotti profile image
Joe Masilotti Author

Sure thing, here you go! Would appreciate any feedback.

aditya-mitra.github.io social preview via Mugshot Bot

aditya-mitra.github.io social preview via Mugshot Bot

Collapse
adityamitra profile image
Aditya Mitra

The second one is great.
Are there more themes?

Thread Thread
joemasilotti profile image
Joe Masilotti Author

There's one more. It's like the colored one but more saturated. The color can also be completely customized.

aditya-mitra/aditya-mitra.github.io social preview via Mugshot Bot

Collapse
yoursunny profile image
Junxiao Shi

I see the examples. Can the watcher and stargazer counts auto-update?

Collapse
joemasilotti profile image
Joe Masilotti Author

Unfortunately not yet. GitHub doesn't provide an API to interact with this image. So you would have to download and upload manually every now and then.

It takes me less than one minute for each repo and I personally do it about once a month.

Collapse
yoursunny profile image
Junxiao Shi

I guess it's Puppeteer time?

Thread Thread
joemasilotti profile image
Joe Masilotti Author

Oh boy, that would be something! Not sure if I could automate that for other folks though. OAuth kind of breaks down when a tool has full control of the browser.

Collapse
rubiin profile image
Rubin

github.com/rubiin/nestjs-easyconfig and github.com/rubiin/nestjs-minio

Collapse
joemasilotti profile image
Joe Masilotti Author

Here you go! Let me know what you think :)

GitHub social preview via Mugshot Bot

GitHub social preview via Mugshot Bot

Collapse
supernova13892 profile image
Collapse
joemasilotti profile image
Joe Masilotti Author

Thanks! Here's three renders. You can upload one by appending /settings to your repo URL. Would love to know what you think :)

supernova13892/zmt social preview via Mugshot Bot

supernova13892/zmt social preview via Mugshot Bot

supernova13892/zmt social preview via Mugshot Bot

Collapse
mendoza profile image
David Mendoza (He/Him) • Edited

Ohh this sound awesome
github.com/sinewtech/waterbase
Thanks in advanced
Btw if you could get a blue like the drop that would be awesome

Collapse
joemasilotti profile image
Joe Masilotti Author

Sure thing! Here's three renders. You can upload one by appending /settings to your repo URL.

sinewtech/waterbase social preview via Mugshot Bot
sinewtech/waterbase social preview via Mugshot Bot
sinewtech/waterbase social preview via Mugshot Bot

Collapse
chethancm2001 profile image
chethancm2001

github.com/chethancm2001

Can you please edit my github

Collapse
joemasilotti profile image
Joe Masilotti Author

Which repo would you like an image for?

Collapse
matiasgdev profile image
Collapse
joemasilotti profile image
Joe Masilotti Author

Sure thing! Here's two versions. You can use upload one to github.com/matiasgdev/mern-blog-re...

mern-blog-react-nodejs social preview via Mugshot Bot

mern-blog-react-nodejs social preview via Mugshot Bot

Collapse
nishu_2811 profile image
Nishant Ranjan

Excellent 👌 Looking forward to use it.

Collapse
joemasilotti profile image
Joe Masilotti Author

Thanks Nishant! Feel free to pass along one of your repos if you want a sneak peek :)

Collapse
webbureaucrat profile image
Collapse
joemasilotti profile image
Joe Masilotti Author

Ah, not yet, sorry! Just GitHub for now.