
Rather than relying on pre-built widgets or SDKs from platforms like [Twitter](https://publish.twitter.com/?buttonType=TweetButton&widget=Button), there is a simpler approach to adding "Share on &lt;site&gt;" links to your blog posts using URL redirection. 

Most sites have a dedicated "submit" link that allows for specific query parameters to be used in order to pre-populate the URL and title. The parameter names may differ for each site, for example, for Twitter it would be `https://twitter.com/intent/tweet?text=some text&url=https://example.org`.

You can store these values for different sites in an array of objects and map through it to display a link with the `target` attribute set to `_blank`. These links can then be styled with CSS without loading any external scripts.

```javascript
const shareSites = [
  {
    name: 'Hacker News',
    submitUrl: 'https://news.ycombinator.com/submitlink',
    titleParam: 't',
    urlParam: 'u',
  },
  {
    name: 'Lobsters',
    submitUrl: 'https://lobste.rs/stories/new',
    titleParam: 'title',
    urlParam: 'url',
  },
  {
    name: 'Reddit',
    submitUrl: 'https://reddit.com/submit',
    titleParam: 'title',
    urlParam: 'url',
  },
  {
    name: 'Twitter',
    submitUrl: 'https://twitter.com/intent/tweet',
    titleParam: 'text',
    urlParam: 'url',
  },
]

// Later in the post template component
const title = "How to ..."
const permalink = "https://example.com/..."
...
<div className="share-buttons">
  Share this post on:
  {shareSites.map((site) => (
    <span key={site.name}>
      <a
        href={`${site.submitUrl}
        ?${site.titleParam}=${encodeURIComponent(title)}
        &${site.urlParam}=${encodeURIComponent(permalink)}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        {site.name}
      </a>{" "}
    </span>
  ))}
</div>
```



Adding share buttons on blog posts

[Top]


Do you ever come across some [site](https://unawaz.github.io/stochastic-hill-climbing/tasks/) hosted on GitHub Pages with a URL like `https://user.github.io/repo` and you look around but the link to the source repository is nowhere to be found?

I have a bookmarklet that opens the source in a new tab directly. It works for GitLab Pages as well. Sometimes this comes in very handy:

```javascript
javascript: (() => {
  const getRepo = (urlObj) => {
    const [user, site, ...rest] = urlObj.host.split('.');
    const repo = urlObj.pathname.split('/')[1] || `${user}.${site}.io`;
    return `https://${site}.com/${user}/${repo}`;
  };

  window.open(getRepo(location));
})();
```


Bookmarklet to view source for a GitHub Pages site


For some time now, I have been maintaining my reading list using a JSON file, having shifted away from Goodreads. Likewise, I no longer use an IMDb account to keep track of my watchlist. I have exported all the data to my browser bookmarks.

Occasionally, I come across an [IMDb list](https://www.imdb.com/list/ls053826112/ 'Most Watched Movies Of All Time
') that I want to include in my library, but there is no convenient means to export it directly to my bookmarks. An obvious approach is to just drag each item into the toolbar, but you don't get any metadata like the release year or rating with that. Additionally, this is not practical for longer lists. On top of that, IMDb links are riddled with tracking parameters that require manual cleanup.

So, I use a little bookmarklet which parses the DOM to get the movie list in Markdown, and copies the list to the clipboard. It then shows a prompt asking whether or not to open [pandoc.org/try](https://pandoc.org/try). If clicked "OK", it opens up the pandoc online playground in a new tab where I paste the markdown, and get converted HTML which can be imported into my browser.

The playground also supports a permalink with query parameters to pre-populate the input and options, so there's no need to copy anything but there is a limit to the URL size, so it wouldn't work for large lists.

Here's the code:

```javascript showLineNumbers
javascript: (() => {
  let movies = '';
  let count = 0;
  document
    .querySelectorAll('.lister-item > .lister-item-content')
    .forEach((item) => {
      const title = item.querySelector('h3 > a').innerText;
      const link = item
        .querySelector('h3 > a')
        .getAttribute('href')
        .replace('?ref_=ttls_li_tt', '');
      const year = item.querySelector('.lister-item-year').innerText;
      const rating = item.querySelector('.ipl-rating-star__rating').innerText;
      movies += `- [${title} ${year} (Rating: ${rating})](https://www.imdb.com${link})\n`;
      count += 1;
    });

  navigator.clipboard
    .writeText(movies)
    .then(() => {
      if (confirm(`Copied markdown with ${count} movies. Open pandoc?`)) {
        window.open(`https://pandoc.org/try/?params={"text":"","from":"markdown","to":"html5"}`);
      }
    })
    .catch((err) => alert('Error copying text'));
})();
```


## Update

I ported the code to a Python script that directly writes the HTML to a file that can be imported to the browser:

```python showLineNumbers
#!/usr/bin/python3

import sys
import re
import urllib.request
from bs4 import BeautifulSoup

listurl = sys.argv[1]

if listurl.startswith("http"):
    listid = re.findall(r"ls\d+$", listurl)[0]
elif listurl.startswith("ls"):
    listid = listurl
    listurl = "https://www.imdb.com/list/" + listid
else:
    print("Invalid argument. Please enter a valid link or list ID.")
    sys.exit(1)

with urllib.request.urlopen(listurl) as res:
    soup = BeautifulSoup(res.read(), "html.parser")

exportfile = f"export-{listid}.html"
movies = "<ul>\n"
count = 0

for item in soup.select(".lister-item > .lister-item-content"):
    title = item.select_one("h3 > a").string
    link = item.select_one("h3 > a")["href"]
    year = item.select_one(".lister-item-year").string
    rating = item.select_one(".ipl-rating-star__rating").string

    # movies += f"- [{title} {year} (Rating: {rating})](https://www.imdb.com{link})\n"
    movies += f'<li><a href="https://www.imdb.com{link}">{title} {year} (Rating: {rating})</a></li>\n'
    count += 1

with open(exportfile, "w") as f:
    f.write(movies + "</ul>")

print(f"Exported {count} movies to {exportfile}")
```
