Get Blog Card & Text Link by 1-Click using Bookmarklet

In this page, I introduce my bookmarklets which can get "Blog Card" (Link Card) and "Text Link" by 1-click. They work on any websites!

I introduce the feature and usage first, then show the bookmarklets and CSS for the blog card. Feel free to use them. The source code will be shown in another article.

2020/10/19: I modified bookmarklets for blogcard to add "lazy loading" property. It should make your pages load faster.

Feature

Bookmarklets are bookmarks which do not jump to link but run JavaScript code.They are very easy to install, and run by 1-click.
My bookmarklets should work fast on any pages because they do not use jQuery. There are some free bookmarklets for blog card (as I mention in Reference section below), though they use jQuery and links are set only on the title (not on whole card). That is why I made bookmarklets by myself. * They say jQuery loaded by CDN should work anywhere, but I found some websites denied them... For example: LibreOffice Basic Help
There are some other ways to make blogcard using API (or external services) such as Embedly and Hatena Blog (Japanese). Compared to them, bookmarklets can edit design and do not need API. In one of my bookmarklets for blog card, by the way, I use Google API to get favicons.

Usage

In the section "Bookmarklet" below, drag & drop highlighted letters into your bookmark.
If you want to use blog card, install CSS at the bottom of this article in your website or blog. If you are a Blogger user, put the CSS code above </b:skin> (or anywhere you want). You can change the design as you like.
That's all. You can get HTML code in pop-up message when you click the bookmarklet on any websites. Copy and paste it in your article!

Bookmarklets

Drag & drop highlighted letters into your bookmark.
You can test it by clicking (you will get the link of this page).

Blog card (with favicon)

GetBlogcard

You can get HTML code of blog card like this.
I use Google API to get favicons.
* Do not forget to install CSS.
* If the target website does not set OGP (meta tag) properly, this may fail to get data. Failed item will be "undefined."

Bookmarklet Maker with distributable HTML Code

You can create your original bookmarklets using this tool! You can distribute them if you copy and paste the HTML code on your website.

Blog card (no favicon)

GetBlogcardNoFavicon

You can get HTML code of blogcard like this.
No API are used.
* Do not forget to install CSS.
* If the target website does not set OGP (meta tag) properly, this may fail to get data. Failed item will be "undefined."

[Blogger] My customization list

In this article, I summarize my blogger customization. I will add links when I publish details of them.

kamo card (blog card with a background image)

kamocard

This is a blog card with a background used for self-linking in this blog. Since it has a style tag, it will be displayed even if you do not add CSS. The background can be changed by changing the url of "background-image" in it the code. You can edit it by right-clicking the bookmarklet after saving.

[Studio One] Roadmap for Music Creation

I'd like to draw a roadmap for music creation using Studio One as a summary of my journey of creating more than 50 songs by self-education.

Internal Text Link

GetTextLink

You can get "open in this tab" link to introduce your other articles.
Example:

Itching Ears by kamokamo

External Text Link

GetTextLinkEx

You can get "open in new tab" link to introduce other blogs/websites.
Example:

[VBA & VBS] "Usability" and "Itchy points"-Itching Ears by kamokamo

External Text Link with Icon

GetTextLinkExIcon

You can get "open in this tab" link with icon.
Example:

HTML generator for highlight.js with the copy button - Itching Ears by kamokamo

You need to apply "Font Awesome 5" to use the icon. If you do not have it, put this code above </head> tag in your HTML.

    <!-- Font Awesome -->
    <script defer='defer' src='//use.fontawesome.com/releases/v5.11.1/js/all.js'/>

CSS for blog card

This is for the design of the blogcard. You can modify this as you like.

/* blogcard*/
.blogcard {
  max-width: 90%;
  margin: 1em auto;
  padding: 10px;
  border: 1px solid black;
  box-shadow: 3px 3px 5px 0px #aaa;
  background: white;
  transition:.2s;
}
.blogcard:hover{
  box-shadow: 3px 3px 5px 2px #aaa;
  transform:scale(1.02);
}
.blogcard a{
  color: black !important;
}
.blogcard-image {
  display: inline-block;
  float: right;
  width: 160px;
  height: 90px;
  margin: 0 0 5px 5px;
}
.blogcard-image img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  object-position: center center;
  box-shadow: 3px 3px 5px 0px #aaa;
}
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
}
.blogcard-description {
  margin: 1em 0 !important;
  font-size: 13px;
  line-height: 1.5 !important;
}
.blogcard-footer {
  font-size: 12px;
}
.blogcard-footer img {
  margin-right: 5px;
}
@media ( max-width : 768px ) {
	.blogcard-image{
		display: block;
		float:none;
		margin: .5em auto;
	}
	.blogcard-title{
		text-align:center;
	}	
}

Reference (Japanese)

I made these bookmarklets using my own tool.