ここにっつじゃむのHome

はてなダイアリー『ここにっつじゃむのRoom』からの続きです、Roomはこちらにリダイレクトしました

トップ > SNS関連 > はてなブログのサイドバーにPawooの呟きを表示させたい！！

はてなブログのサイドバーにPawooの呟きを表示させたい！！

SNS関連 ブログ編集 覚え書き

気づいた方もいるかもしれませんが、このブログのサイドバーがちょっと変わりました

Pawooのテゥートが表示されているのです！！！

 

Pawooとは
イラスト投稿サイトのpixivが運営するMastodonという短文投稿SNSのインスタンスサーバーの一つ

 

どうやってMastodonの自分のテゥートをウィジェットとして表示させたか手順をここに覚え書きとして書いておきます
別にPawooじゃなくてもどのインスタンスでも大丈夫です
マストドンウィジェットウィザードを使った手順を紹介します

HTML出来ないのでつまずいたところは知恵袋でお世話になりました、ありがとうございます

 

2018/3/27現在のやり方なので、今後変わる可能性があります

 

ウィジェットを作成する

まず初めにウィジェットとして貼りたいインスタンスにログインしておきましょう

 

そしてマストドンウィジェットウィザードのページを開きます

azet.jp

インスタンスのURLのところにPawooなら　https://pawoo.net
friends.nicoなら　https://friends.nico
みたいな感じにウィジェットとして登録したいアカウントの各インスタンスのURLを入力

アプリケーション名は自由でいいです
全角ひらがなカタカナ漢字でもいいです
私の場合はPawooのアカウントのID(@Kokonittujam)にしました

そしたら認証画面になるので承認します

 

そうしたらコードが作成されます

GitHubで公開されているのを使ってもいいのですが、とりあえずダウンロード催促されている方のが最新バージョンとわかっていて安心なので
ウィジェットのファイルをダウンロードします

jQueryはダウンロードしません

大切な情報の項目は全部メモ帳にコピペして解凍したウィジェットのファイルがあるフォルダの中に保存しておきましょう

 

はてなブログにコピペする

使えるようにするため、はてなブログのデザイン設定からカスタマイズ
ヘッダのとこのタイトル下のところのテキストボックスにいろいろコピペしていこうと思います！！

 

マストドンウィジェットウィザードを動かすには、jQueryが必要になるのでGoogleのCDNというものを利用します　ホスティングサービス

こちらで公開されています
「3.x snippet:」がこの記事を書いている現在の最新版です

サイトが見れない場合、見つけられない場合は下の

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

をコピペします

これでjQueryが導入できました

 

ウィジェットのファイルもどこかのホスティングサービスに公開されてたらいいのですが見当たらないので、大切な情報の<head>タグに挿入する方をコピペして
そのコードにある

<link rel="stylesheet" href="mastodon.widget.css" />
<script type="text/javascript" src="mastodon.widget.js"></script>
<script type="text/javascript" src="mastodon.widget-jp.js"></script>

をそれぞれはてなブログでも読み込めるように書き換えます

 

<link rel="stylesheet" href="mastodon.widget.css" />

のところは
<style></style>にしてこのタグの中に、ダウンロードしたウィジェットのファイルのmastodon.widget.cssをメモ帳で開いて全文コピペしてください

 

<script type="text/javascript" src="mastodon.widget.js"></script>
<script type="text/javascript" src="mastodon.widget-jp.js"></script>

のところは
それぞれ<script></script>にして、それぞれmastodon.widget.jsをメモ帳で開いたときの中身と
mastodon.widget-jp.jsをメモ帳で開いたときの中身を各タグの中に全文コピペしてください

これで下準備は完了しました

HTML5に対応していない他サイトのブログでやる場合は<style type="text/css"></style>、<script type="text/javascript"></script>にしてメモ帳で開いたときの中身を貼り付けてみてください

 

あとはサイドバーのとこのモジュールを追加からHTMLを選んで、大切な情報の「本文の中に (タイムラインのコンテナ)」の内容
初期設定だと

<div id="myTimeline" class="mastodon-timeline mastodon-timeline-dark"></div>

のところをコピペしてタイトルをMastodonなり、Pawooなりにしたら完成です！！

 

 

これ、ブースト(RT)も表記が小さくて自分のテゥートみたいに見えちゃったり、リプも表示されるみたいですね

せめてブーストは相手側のアイコンで表示させてほしかった…今の技術じゃ難しいのかな？

 

 

ちなみに

ブログ内の記事にテゥートを埋め込みするには
https://(インスタンスのURL)/@(自分のID)で自分のページを開いて、埋め込みたいテゥートの日付部分をクリック

そしたらテゥートのページになるのが確認できると思います

そのURLをいつもはてなブログでURL貼る時みたいにコピペしたら選択肢に「埋め込み」が出てきます

pawoo.net

テゥートの埋め込みは意外と簡単だった…