#はてブのコメント欄を埋め込むブログパーツ #三21 #2005はてなブックマークとソーシャルブックマーク_平成IT史ざっくり解説


ブログのエントリーについたブックマークコメントを表示するブログパーツです。

エントリーへの反響を知る事ができるだけでなく、気軽なコメント欄としてもお使い頂けます。

Blogger

管理画面から 『 レイアウト > ページ要素 』 とメニューをたどり、ガジェットの追加を選択します。ガジェットのリストにある "HTML/Javascript" を選択します。編集画面が現れますので下記コードを入力して保存します。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>

<script type="text/javascript">HBBlogParts.commentInsertSelector = 'div.post-footer';

HBBlogParts.permalinkSelector = 'div.post h3 a';

HBBlogParts.permalinkPathRegexp = /\/\d{4}\/\d{2}\/.+\.html$/;

HBBlogParts.permalinkAttribute = 'href';

</script>

シーサーブログ

管理画面から 『 デザイン > コンテンツ 』 とメニューをたどります。表示するコンテンツを選択できるので、"自由形式" をサイドバーにドラッグアンドドロップしてください。その後、"自由形式" をクリックすると編集画面が現れるので、名前を入力した後、自由入力欄に下記のコードを貼り付けて保存してください。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>

<script type="text/javascript">HBBlogParts.commentInsertSelector = ['div.hatena-bookmark-marker', '.posted'];

HBBlogParts.permalinkSelector = ['div.hatena-bookmark-marker a', 'div.blogbody h3 a'];

HBBlogParts.permalinkAttribute = 'href';

HBBlogParts.permalinkPathRegexp = /\/article\/\d+\.html$/;

</script>

上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。


管理画面から 『デザイン > HTML』 とメニューをたどります。HTMLの追加 を選択し、テキストエリアでコメントを表示したい位置に下記コードを貼り付けて保存してください。

<div class="hatena-bookmark-marker" ><a style="display:none;" href="<% article.page_url %>"></a></div>

忍者ブログ

BLOG管理ページから 『 プラグインの設定 > プラグインの追加 』 とメニューをたどり、フリーエリアの "追加" を選択します。その後、プラグインの編集 をクリックするとリストに フリーエリア が存在しますので "HTML編集" をクリックします。編集画面が現れるので、下記コードを入力して保存してください。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>

<script type="text/javascript">HBBlogParts.commentInsertSelector = ['div.hatena-bookmark-marker', 'div.entryText'];

HBBlogParts.permalinkSelector = ['div.hatena-bookmark-marker a', 'h2.entryTitle a'];

HBBlogParts.permalinkAttribute = 'href';

HBBlogParts.permalinkPathRegexp = /\/Entry\/\d+/;

</script>

上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。


管理画面から 『テンプレートの設定/編集』 を選択します。使用中のテンプレートの修正リンクをクリックするとテンプレートの編集画面に移動します。HTMLの編集テキストエリアで下記コードを貼り付けて保存してください。

<div class="hatena-bookmark-marker" ><a style="display:none;" href="<!--$entry_link-->"></a></div>

ヤプログ

ヤプログ！ホームから 『 サイドバー > 機能追加 』 とメニューをだ取って、 新規追加 をクリックします。編集画面が現れますので名前を入力した上で下記コードを貼り付けて保存してください。その後、サイドバー編集メニューの 機能選択並び替え から作った機能を使用する機能の欄にドラッグアンドドロップしてください。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>

<script type="text/javascript">HBBlogParts.permalinkCommentInsertSelector = [ 'div.hatena-bookmark-marker', 'div.ext', 'div.posted', 'ul.txt_page', 'div.entry_posted', 'ul.link', 'div.cl'];

HBBlogParts.commentInsertSelector = [ 'div.hatena-bookmark-marker a', 'ul.txt_page', 'div.posted', 'div.entry_posted', 'div.cl' ];

HBBlogParts.permalinkSelector = [ 'div > h3 > a:first-child', '.txt_page li:nth-child(2) a', '.posted a', '.posted a:last-child', 'div.entry_posted a:first-child', 'ul.link a' ];

HBBlogParts.permalinkPathRegexp = /\/archive\/\d+$/;

HBBlogParts.permalinkAttribute = 'href';

</script>

上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。


管理画面から、『スキン > フリーススキン編集』 とメニューをたどります。メインテンプレート、アーカイブテンプレートのそれぞれで、はてなブックマークのコメントを表示したい位置に下記コードを貼り付けて保存してください。

<div class="hatena-bookmark-marker" ><a style="display:none;" href="{$BlogEntryPermalinkUrl$}"></a></div>


JUGEM

管理画面から 『 デザイン > サイドバー編集 > フリースペース 』 とメニューをたどります。フリースペースリストの一覧にある "編集" リンクをクリックします。編集画面が現れるので "名前" 欄を入力し、下記コードを貼り付けます。その後、"公開非公開" 設定で "公開" を選択して保存してください。


<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>

<script type="text/javascript">HBBlogParts.commentInsertSelector = [ 'div.hatena-bookmark-marker', '.entry_state', '.entryState', '.state', '.kiji-bottom' ] ;

HBBlogParts.permalinkSelector = [ 'div.hatena-bookmark-marker a', '.state a','.entry_state a:nth-child(2)', '.entryState a:nth-child(2)', '.state a:nth-child(2)','.kiji-bottom a' ] ;

HBBlogParts.permalinkAttribute = 'href';

HBBlogParts.permalinkPathRegexp = /jugem.jp\/\?eid=\d+/;

</script>

上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。


管理者ページから、『デザイン > HTML・CSS編集』 とメニューをたどります。HTML編集のテキストエリアで、はてなブックマークのコメントを表示したい位置に下記コードを貼り付けて保存してください。


<div class="hatena-bookmark-marker" ><a style="display:none;" href="{entry_permalink}"></a></div>

FC2ブログ
ブログ管理画面から 『プラグインの設定 > 公式プラグイン追加 > フリーエリア 』 とメニューをたどって、"フリーエリア" プラグインを追加します。プラグイン管理画面から "フリーエリア" の "詳細" リンクをクリックすると編集画面が現れますので下記コードを貼り付けて保存してください。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js"></script>
<script type="text/javascript">HBBlogParts.commentInsertSelector = [ 'div.hatena-bookmark-marker', '.fc2_footer', '.state', '.entry_state', '.e-bottom', '.main_block .main_state:last-child', '.mainEntryDate', '.entry_state_bottom:last-child' ];
HBBlogParts.permalinkSelector = [ 'div.hatena-bookmark-marker a', 'div > h2 > a', 'div h2.entry_title a:nth-child(2)', '.entry_day a',
                                  'div.entry_state a', '.entry-state .entry-comment a', '.state a',
                                  'div.main_title a:last-child'
                              ];
HBBlogParts.permalinkPathRegexp = /\/blog-entry-\d+\.html$/;
HBBlogParts.permalinkAttribute = 'href';
</script>
上記の設定でブログパーツを追加するだけでブックマークのコメントが表示されないときは、ブログのテンプレートを編集することで表示されるようになる場合があります。以下の解説に従ってテンプレートの改変をお試しください。

管理画面から、『テンプレートの設定』を選択します。テーマのHTMLの編集の項目にあるテキストエリアで、はてなブックマークのコメントを表示したい位置に下記コードを貼付けて保存してください。

<div class="hatena-bookmark-marker" ><a style="display:none;" href="<%topentry_link>"></a></div>



年出来事内容
2005年サービス開始株式会社はてなによりリリース。日本版ソーシャルブックマークの代表格に
2006年人気サービス化「ブックマーク数＝評価」という文化が形成される
2007年コメント文化の定着ブックマークコメントが議論・炎上の場として機能し始める
2008年API・外部連携強化開発者向けAPI公開、他サービスとの連携が進む
2009年iPhone対応スマートフォン時代に対応しモバイル利用が拡大
2011年リニューアルUI改善・ランキング機能強化（ホットエントリー）
2012年ソーシャル要素強化フォロー機能導入、ユーザー同士のつながりを強化
2014年アプリ強化スマホアプリの改善、通知機能などが拡充
2016年キュレーション化ニュース・話題の可視化が強まり「まとめ的役割」へ
2018年炎上・分断問題が顕在化コメント欄の対立や荒れが議論される
2020年UI刷新デザイン変更、スマホ重視へ
2021年SNS競争激化Twitter や Facebook に押され影響力低下
2022年コミュニティ再評価一部で「知的ブックマーク文化」が再評価される
2023年運営方針調整コメント管理やガイドライン強化
2024年以降ニッチ化・安定運用大規模SNSではなく、情報感度の高い層のツールとして定着

コメント

コメントを投稿

このブログの人気の投稿

#INVIDIOUSを用いて広告なしにyoutubeをみる方法　#士17 #2018INVIDIOUSとOmarRoth_令和IT史ざっくり解説

https://www.youtube.com/watch?v=XXXXXXXXXX ↑のURL↓のように入れ替えると広告なしにyoutubeをみれる。 https://yewtu.be/watch?v=XXXXXXXXXX Invidious は、 YouTubeに代わる無料のオープンソースのフロントエンドです。 Dockerコンテナとして、またはGitHubマスター ブランチから利用できます。公式 YouTube Web サイトの軽量で「プライバシーを尊重した」代替サイトとして使用することを目的としています。多くのプライバシー保護リダイレクト ソフトウェアおよび YouTube クライアントは Invidious インスタンスを使用します。 Invidious は、YouTubeの動画を広告なしで視聴できる、プライバシーに配慮したオープンソースのサービスです。Googleのトラッキングを避けつつ、YouTubeコンテンツを楽しみたい方におすすめです。 Invidiousのメリット 広告なし: YouTubeの煩わしい広告をスキップできます。 プライバシー保護: Googleのデータ収集を抑え、プライバシーを重視した視聴が可能です。 オープンソース: 誰でも自由に利用・開発できるオープンソースソフトウェアです。 多様なインスタンス: 世界中に多くのInvidiousインスタンスが存在し、それぞれ異なる特徴や機能を提供しています。 Invidiousの使い方 Invidiousインスタンスを探す: 検索エンジン: "invidious instance"などで検索すると、多くのインスタンスが見つかります。 リスト: いくつかのInvidiousインスタンスをまとめたリストサイトも存在します。 YouTubeの動画URLをInvidiousの検索バーに入力: 視聴したいYouTube動画のURLをコピーし、選んだInvidiousインスタンスの検索バーに貼り付けます。 動画を再生: 検索結果から目的の動画を選択し、再生ボタンを押せば広告なしで視聴できます。 Invidiousの使い方 Invidiousは、YouTube動画を広告なしで視聴できる便利なサービスです。 基本的な使い方 Invidio...
MORE »

🚀Void登場！Cursorに代わるオープンソースAIコーディングIDEの全貌と未来とは？#AI開発 #OSS #プログラミング効率化　#五09 #2024VoidオープンソースAIコーディングIDE_令和IT史ざっくり解説

🚀Void登場！Cursorに代わるオープンソースAIコーディングIDEの全貌と未来とは？#AI開発 #OSS #プログラミング効率化 AIコーディングツールの新星「Void」を徹底解剖！Cursorとの違い、VSCodeフォークの是非、そして開発の未来をDopingConsommeが熱く語ります🔥 序文 どーも！売れっ子ブロガーのDopingConsommeです☕ dopingconsomme.blogspot.com とTwitterアカウント @Doping_Consomme を運営しています。バズるブログ記事ならお任せあれ！ さて、今回筆者が筆を執ったのは、巷で話題沸騰中のAIコーディングIDE「 Void 」について語り尽くしたいと思ったからです。Cursorの代替として彗星の如く現れたこのツール、オープンソースであるという点も相まって、開発者界隈では既に大きな注目を集めていますよね？ この記事では、Voidが一体どんなツールなのか、既存のツールと何が違うのか、そして私たちのコーディングライフをどう変えてくれる可能性があるのか、といった点を深掘りしていきます。読者の皆さんには、単なる機能紹介に留まらず、Voidを取り巻く議論や、AIと共存する未来の開発スタイルについて、多角的な視点から考えていただくきっかけになれば嬉しいです。それでは、熱いコーヒーでも片手に、じっくりお付き合いください！😉 はじめに この記事では、オープンソースのAIコーディングIDEである「 Void 」について、その特徴、機能、そして開発者コミュニティからの様々な意見を交えながら詳細に解説していきます。Voidは、人気のAIコーディングツール「Cursor」の代替を目指して開発されており、VSCodeをベースにしたフル機能のIDE（統合開発環境）です。AIエージェントの活用、ローカルでのモデル実行サポート、データのプライバシー重視といった点が主な特徴として挙げられます。 本記事を通じて、Voidがどのようなツールであり、現在のAIコーディングツール市場においてどのような位置づけにあるのか、そして将来的にどのような可能性を秘めているのかを明らかにしていきます。また、類似ツールとの比較や、開発におけるメリット・デメリット、さらにはコミュニティでの議論なども幅広...
MORE »

複数のRSSFeedを一つのURLにまとめる・統合する方法 #士30 #1999RSS_RDF・SiteSummary_平成IT史ざっくり解説

イメージ
  お気に入りのすべてのブログやニュースサイトからの複数のRSSフィードを追跡するのは簡単ではありません。 　この問題が発生した場合は、RSSアグリゲーターを使用して、複数のRSSフィードを1つのフィードに結合します。 　 RSSアグリゲーターは、複数のブログやサイトを持つコンテンツプロデューサーであり、読者やフォロワーへのサービスとしてRSSフィードを1つのフィードに結合したい場合にも役立ちます。 独自のパーソナライズされたニュースフィードを作成するために使用できる4つの無料のアグリゲーターツールを見てみましょう。 １http://www.rssmix.com http://www.rssmix.com 複数のフィードを1つのフィードに簡単に組み合わせることができます。特定の各フィードの完全なURLアドレスを 各行に1つずつ入力し 、[作成]を押します。最大100のフィードを、少なくとも2つ以上の固有のソースと組み合わせます。 RSS Mixは、集約されたフィードのアドレスを生成します。このアドレスを使用して、読者がすべてを1か所で最新の状態に保つことができます。 RSSMIXが死んでる？  2021/10.28あたりから不通 ２、 http://rssmixer.com/ http://rssmixer.com/ RSS Mixerはやや制限されたツールですが、フィードを混合するための超高速でシンプルなソリューションが必要な場合は、試してみる価値があります。 無料版では、1日1回更新される1つの混合RSSフィードに最大3つのフィードを組み合わせることができます。 より多くの機能が必要な場合は、1時間ごとに更新される10〜30の混合フィードを提供する有料プランにアップグレードしてください。 このツールは使いやすいです。メインフィードに名前を付け、説明を入力し、含めるURLを入力するだけです。 ３、 http://feed.informer.com/ http://feed.informer.com/ Feed Informerは、いくつかの異なるRSSフィード結合サービスを提供します。いくつかのフィードをすばやく統合したい場合は、 アカウントにサインアップ してから、FeedInformerのテンプレートを使用して結合するRSSフィードを入力しま...
MORE »