DEV Community

Joe Masilotti
Joe Masilotti

Posted on

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

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

Top comments (35)

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks so much! Here’s mine:

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

Collapse
 
joemasilotti profile image
Joe Masilotti

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

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

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

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

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
Akhilesh Balaji

Here's my best Repository:
github.com/akhilesh-balaji/Textylic

Collapse
 
joemasilotti profile image
Joe Masilotti

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

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

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

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

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

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
Saransh Dhingra

Seems pretty cool. 🙂
github.com/supernova13892/zmt

Collapse
 
joemasilotti profile image
Joe Masilotti

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

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

Which repo would you like an image for?

Collapse
 
matiasgdev profile image
Matias Gabriel
Collapse
 
joemasilotti profile image
Joe Masilotti

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

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