タイトル未定: 【Bloggerいじり】続・リンクを貼る

前にやったこれ、の続きです。

ちょっとだけ進歩というか変更しました。
上の記事ではCreat Linkを使う予定でしたが、問題があって止めました。一番の問題はdescriptionを取得できないことです。

別になくても良いんですけど、やっぱあったほうが良いよねってことで、ブックマークレットを使って、上のリンクみたいなのを作って使おうとしてました。

ですが、ここでも問題が、（上のリンクはそもそもdescription設定してないので、取得できなくてもいいんですが）
どうもdescription取得できないとエラーが発生しか、そもそもリンクを取得できないんですよね。

で、解決方法探していたら、

【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました

ブログを書くとき、記事へのリンクをどのように貼っていますか？べた書きですか？ ShareHTMLですか？ G…

sakueji.com

こんなの見つけまして、こちらもブックマークレットなんですが、前回の記事にあったような、Make linkジェネレータを使ったものとは違った挙動してました。

色々調べてたら（前の記事では？でしたが）、
descriptionには
meta name="description"
meta property="og:description"
という二つがあり、それぞれ、検索用とSNS用らしいです。

で、上の新しい方法では、og:descriptionがnullだと、ifで空白を返すようにしてありました。

で、これをあーだこーだした結果、

Google

世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。...

こんな感じのできました。デザインは適当。
og:descriptionが無い時はname="description"を探して、それもない時はno descriptionを表示するようにしました。
これにより、ほとんどのサイトでエラー出ずにリンクを作れるようになりました。（たぶん）

一応、コードをさらすと、

javascript:(function(){javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',r()})(document,this.jQuery,function($){var ogurl=$("meta[property='og:url']").attr("content");var ogtitle=$("meta[property='og:title']").attr("content");var metadesc=$("meta[name=description]").attr("content");var ogdesc=$("meta[property='og:description']").attr("content");var ogimg=$("meta[property='og:image']:last").attr("content");var urlhost=location.host;if(ogtitle==null){ogtitle=document.title};if(ogurl==null){ogurl=location.href};if(metadesc==null){metadesc="no description"};if(ogdesc==null){ogdesc=metadesc};if(ogimg==null){ogimg="https://s0.wordpress.com/mshots/v1/"+location.href};var card='\n<div class="blogcard-frame" style="border-radius: 5px; border: 2px solid #ddd; margin: 5px 2px; max-width: 700px; max-height: 300px; min-height: 130px; padding: 10px; width: auto; height: auto; word-wrap: break-word;">\n<div class="blogcard-img"><a href="'+ogurl+'" target="_blank"><img style="margin-bottom: 10px; float: left; margin-right: 0.5em;" src="'+ogimg+'?w=150&h=150" alt="" width="150" height="120"></a></div>\n<div class="blogcard-title"><a href="'+ogurl+'" style="color: #111; font-size: 20px;" target="_blank">'+ogtitle+'</a></div>\n<p style="color: #555; font-size: 14px;">'+ogdesc+'...</p>\n<p style="color: #333; background-color: #999;">'+window.getSelection()+'</p>\n<div class="blogcard-footer" style="border-top:1px solid#eee;clear:both;margin:10px 0 0 0;padding:0;"><p style="color:#999;margin:3px 0 0 0;font-size:11px;"><a href="'+ogurl+'" style="color: #00CCFF; position: absolute; right: 20px; font-size:16px;" target="_blank">>>続きをリンク先で見る</a></p>\n<img src="https://www.google.com/s2/favicons?domain='+urlhost+'"style="margin:0 5px 0 0;padding:0;border:none;display:inline;vertical-align:middle;"><a href='+location.protocol+'//'+urlhost+'/ style="color:#999;margin:3px 0 0 0;font-size:11px;" target="_blank">'+urlhost+'</a></div></div>';prompt("blogcard",card);});})();

うーん、長いｗ
Javascript？なにそれ?おいしいの?状態だから、たぶんもっと短くなるとは思うけど。
~~動いてるから、こまけぇこたぁいいんだ。~~
一応下のサイトとかを参考にしたら、短くできるみたいだけど、まぁ気が向いたらやりますか。

自分のサイト上で外部リンクをFacebookの画像つきリンクっぽく表示する方法

サイトをOGP対応にしたので、SNSから格好良くリンクされるようになった。しかし自分の記事から外部のリンクを同じように素敵に表示する方法はないのか調べてみた。...

ただ、ブログとして醜いので、なんかよく見るプログラムとかを表示させるあれを導入したいですね。あれ、名前すらわかってませんが。

ちなみに、Google先生はogの方はスルーするらしい。

descriptionタグとog:descriptionタグの違いは？ - Google プロダクトフォーラム

Google グループでは、オンラインフォーラムやメールベースのグループを作成したり、こうしたフォーラムやグループに参加したりすることで、大勢のユーザーと情報の共有やディスカッションを行うことができます。...

（descriptionしっかりかかな）

タイトル未定

2018年10月16日火曜日

【Bloggerいじり】続・リンクを貼る

0 件のコメント:

コメントを投稿