あなたの興味を広げる話題を。

新潟県 中子の桜©Koichi_Hayakawa(Licensed under CC BY 4.0

【新機能】noteのソーシャルボタン「noteで書く」をFC2ブログに設置する方法

2019年05月24日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など 0

ソーシャルボタン「noteで書く」のイメージ画像

FC2ブロガーのMです。noteが、コピペでブログに設置できる「 note で書く」ボタンを初公開しました。1クリックで記事を引用しつつ、noteの投稿画面を開くことができるというものです。

シェアボタンはSNSなどでお馴染みですが、いよいよnoteでも気軽にシェアする時代が到来したのですね。

さっそく、ソーシャルボタン「noteで書く」を、FC2ブログ『ゆうらりHappySmile』でも設置してみようと思いました。

「 note で書く」ボタンは、こちらのnote、ソーシャルプラグインの「 note で書く」ボタンを初公開。第一弾として「日本経済新聞 電子版」に実装されました。という記事が紹介されたのをきっかけとして話題になっているようです。

「 note で書く」ボタンがさまざまなウェブサイトやアプリに設置されると、記事を読んで湧きあがる「誰かに伝えたい」「こんなことを考えついた」という気持ちをすぐに創作活動へつなげられるのではないか。そう考えて「 note で書く」ボタンを公開することにしました。

note、ソーシャルプラグインの「 note で書く」ボタンを初公開。第一弾として「日本経済新聞 電子版」に実装されました。|株式会社ピースオブケイク

note は、メディアサイト向けのソーシャルプラグイン「 note で書く」ボタンを2019年5月22日から公開しました。各種ウェブサイトや iOS / Android アプリ、ブログなどの運営者が「 note で書く」ボタンを設置すると、読者はボタンから当該サービスの情報を元にした note を投稿できます。 各サービスの情報が流通しやすくなり、note ユーザーが創作をつづけるきっかけも増やします。第一弾として、日本経済新聞 電子版(PC版)に「 note で書く」ボタンが実装されました。ニュース記事をテーマにした note を募るお題企画「#ニュースで語る」も本日から開始しま

実際にFC2ブログに実装してみたところ、とても簡単でした。

「noteで書く」ボタンを使えばブログ記事を簡単にnoteで引用できる!

使い方も簡単。ブログの個別記事に設置された「noteで書く」ボタンをクリックするだけです。

「noteで書く」ボタン

「noteで書く」ボタンを設置後、さっそくクリックしてみると新規ウィンドウが開きました。

「noteで書く」ボタンをクリックした後に表示される投稿画面

よく、SNSで見られるようなカードタイプ形式によって元記事が引用されつつ、アーユーレディな状態の投稿画面が開きます。

ここで、ブログから引用した記事の感想や私見を述べたり、自分で自分の書いたブログ記事をnoteでさらに紹介することも出来ますね(^^)

これもブログにおけるひとつのスタイル。いちから新しくアイデアをひねり出して記事を書くのは大変ですが、引用した記事をもとにして意見をつづるのも出発点としてはアリだと思っています。

興味がおありの方はぜひ試してみて下さい(^^)

「noteで書く」ボタンを設置する方法

「noteで書く」ボタンを設置する方法は「noteで書く」ボタンの設定方法 – noteヘルプセンターを参考にすれば簡単です。

「noteで書く」ボタンの設定方法

「noteで書く」ボタンは、Webページからボタン一つでnoteの記事を書けるボタンです。あなたのWebサイトに設置すれば、ページを引用したnote記事を読者の方がすぐに書くことができるようになります。
 
設置方法
ボタンを設置したいページに、下記のコードを追加します。data-url属性の値にページのURLを入力してください。(例:https://www.pieceofcake.co.j...

ここで紹介されているコードは、ハッシュタグを入れるか入れないかの2通り。これを、任意の位置にコピペして調整(引用元のurlなど)すれば完了です。

FC2ブログの場合

ボクの場合はFC2ブログですので、設置したときに注意したのは、引用元urlの記述についてです。ウッカリして、トップ画面や個別記事のurlを書いたら駄目ですよ~

<a href="https://note.mu/intent/social_button" class="note-social-button" data-url="<%topentry_link>"></a></div><script async src="https://cdn.st-note.com/js/social_button.min.js"></script>

FC2ブログの、独自変数「%topentry_link」を使います。これで、個別記事を引用元にすることができます。

しかし、「noteで書く」ボタンは横長。ボクのブログはソーシャルボタンが丸型なので、どこに設置するか迷ってしまいました(汗)

「noteで書く」ボタンをブログに設置したスクショ画像

結局、同じ形のFacebookと縦並びにしてみました。

唯一の不満点は、外部スクリプトの使用。JSを読み込むぶんだけブログページが重くなるかもしれません。だから、ページ上部に貼り付けるのはやめたほうがいいかも。

自分でボタンデザインがおこなえれば一番よいのですが…。noteのロゴマークは、いまだFont Awesomeにないもんですから、自分でボタンを作るとなるとちょっと大変です(汗)

note(ノート)
(2019.05.24時点)
posted with ポチレバ
関連記事

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5925)
┣  胃がんブログ (264)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5585)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (481)
┣  がんブログ (272)
┗  がんニュース (209)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (137)
┣  Amazonセール (2)
┗  📱kindleセール (134)
おもしろグッズ (10)
今日のエッセイ (102)
ニュース・芸能・話題 (745)
┗  転職・キャリアアップ (19)
恋愛・人間関係 (30)
終活ブログ (10)
グルメ (71)
┣  低糖質レシピ (10)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (215)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (176)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (4)
iPhone の使い方・アプリなど (31)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)