ソーシャルボタン,ソーシャルアイコン,ソーシャルメディア,social button,social icon,social media,社交按钮,社交图标,社交媒体


   前回投稿した「ソーシャルメディア用ボタン(アイコン)の設置方法」の続きです。あまりにも長文になってしまったので、一息入れました。ソーシャルボタンの概念、種類、設置方法と注意点に関しては、前回の投稿と全く同じですので、お手数ですが、そちらでご確認願います。

  今回は主流でなくても重要なソーシャルボタンの設置方法ですが、基本前回同様、先ずはそれぞれのアカウントを持ってないと機能を果たせませんので、使いたいソーシャルボタンのメディアに先ずアカウント登録を済ませて下さい。そして、プライバシー設定は全て「公開」にして下さい。

  ソーシャルボタンですので、ソーシャル性を前提に使っています。当たり前ですが、プライバシーにかかわるようなサイト、または公開できない、したくないサイトでは使わないで下さい。使っているソーシャルアカウントを公開したくないなら、同様にソーシャルボタンは設置しても意味がありません。

   それでは、筆者が重要と思ったソーシャルボタンについて話します。

Pintrest のソーシャルボタン

   Pinterest が誕生してからすぐに共感して登録をしました。昔のスクラップブックを知っている人なら使い方は直感でわかります。筆者はハンドメイドもやっているし、DIYも結構好きで、家を建て直すならコンテナハウスに!と言う夢もあります。いいものを作る為のアイディアを集めるのに、最適なメディアツールだったのです。もはやここ10年毎日 Pintrest を眺めていますw

   つい2~3年前まではバカにされていましたね~「どう使えばいい」とか、「主婦が多い」とか、TVでも「主婦のハンドメイド向け」とか言っていましたが、フォロワーばかり気にして生産性が低いSNSより、Pinterest はずっとマシだと言う事を、例にあげてみましょう。

☞ 興味あるものだけを見て、気に入ればピン止めする
☞ ピン止めした画像に類似する画像がどんどん表示され、更に興味を惹く
☞ 見て終われば忘れるだけだが、ピンボードで管理すれば繰返し確認できる
☞ 不確定要素ではなく、同じ趣味や興味の仲間とコミュニケーションし易い
☞ ハッシュタグも機能しているし、趣味にハマると同じ感覚で、SNS疲れのない世界
☞ 見ているうちにインスピレーションを刺激され、アクションを促される
☞ ソーシャルボタンも、画像表示ウィジェットもビルド可能
☞ 昨年よりビジネスアカウントへの切り替えが簡単にできるようになった

   昨年から、Pinterest はソーシャルから脱皮して、ディスカバリエンジンと方針が定まり、最近ネットで Pinterest を語る人が増えました。筆者はSNSの中で人間同士の感情を消耗している事がばかばかしくて、本来の人生があるべき経験や体験を楽しんで行こうよ、目を覚めてよと言いたいです。見てご覧、Pinterest はもうすぐ、必ず主流に躍り出ます。

   公式のウィジェットビルダーのページでの設置方法はこちらです。
   https://developers.pinterest.com/tools/widget-builder/?

●シェアボタン
<script async='async' data-pin-hover='true' data-pin-lang='ja' data-pin-tall='true' defer='defer' src='// assets.pinterest.com/js/pinit.js'></script>

   Blogger のコードは特殊なので公式ページでのボタン設置では作動しません故、script を使うコードをお勧めします。

   設置方法は、Blogger 管理画面で「テーマ」に入り、右上のメニューボタンから「htmlの編集」を選び、html の編集窓の中で一回クリックしてから、ctr+f で「/body」を検索します。</body>タグの直前に下記 script 記述を丸ごとコピペして、保存をします。これでサイトにページにマウスオーバー状態で画像をピン保存できます。スマホの場合は長押しでショートカットのメニューに「画像を Pinterest に保存する」が表示されます。

   Blogger 以外の方は、上記公式ページから「保存ボタン」を選んで設置して下さい。その方がより安全にサイトでソーシャルボタンが機能します。

●フォローボタン
<a href="https://www.pinterest.jp/ユーザー名/boards/" rel="nofollow" target="_blank"><img src="ボタン画像のURL"> or リンクテキスト</a>

feedlyのソーシャルボタン

   rssリーダーを知っていますか?気に入ったサイトを全部登録すれば、新着・更新情報を一気に表示するツールです。Google が rss を辞めた時から人気が一時下降しましたが、SNSはじめ氾濫しているどうでもいい情報から必要な情報だけを見つけるには、rss でないと解決できませんので、近いうちに rss リーダーが必ず復活すると、筆者は信じております。この点、共感して下さる方が多くいます。

   現在の rss リーダーの主流は feedlyですので、自分のサイトにfeedlyのソーシャルボタンを設置しましょう。テンプレートでの設定は css に関わるので、ここでは html での設置を説明します。

   Feedly のソーシャルボタンの設置は公式ページ、https://www.feedly.com/factory.html から始められます。勿論アカウントを持っていなければ先にアカウントを登録して下さいね。デザイン変更がなければ下記画面が表示されます。


   下へスライドして行くと、DLできるデザインボタンがあり、自分で好みのデザインを CSS で作れない人は、既存ボタンを DL して使う方が楽で速いです。

   更に下へスライドし、次のステップはサイトの feed を入力するテキストボックスがあります。自分のサイトの feed を探して下さい。方法は3つあります。

1.HTMLコードで「feed」を検索し、該当XMLファイルの URL をピックアップ
2.rss 検出のWEBツールを使う ⇒ BeRSS    RSS探しまっせ! 
3.ブログならそれぞれ決まった rss がありますので、下記に纏めて置きます。

Blogger [サイトURL]/feeds/posts/default?alt=rss
Seesaaブログ [サイトURL]/index.rdf
Amebaブログ http://rssblog.ameba.jp/[アメーバID]/rss.html
FC2ブログ [サイトURL]?xml
忍者ブログ [サイトURL]/RSS/
ライブドアブログ [サイトURL]/index.rdf
JUGEM [サイトURL]/?mode=rss
gooブログ [サイトURL]/index.rdf
ココログ [サイトURL]/index.rdf
ウェブリブログ [サイトURL]/rss/index.rdf
エキサイトブログ http://rss.exblog.jp/rss/exblog/[エキサイトID]/index.xml
yaplog! [サイトURL]/index1_0.rdf
はてなブログ [サイトURL]/feed/
Yahoo!ブログ [サイトURL]/rss.xml
楽天ブログ http://api.plaza.rakuten.ne.jp/[ブログID]/rss/

   feed を入れて「enter」を押すと、ボタン用のリンクが生成されます。


   DLしたボタンならリンクテキストを丸ごとコピペして使います。feedly の場合はシェアボタンがありませんので、この1種類のみでサイトの好きな所に設置します。

   ブログテンプレート(Bloggerも同様)などでリンクリストになっている場合は、CSS は既に整えている状態ですので、青い線の部分だけリンク先に指定すればいいのです。

   Blogger の HTML が少し特殊なので、ソーシャルボタンを追加してもトラブってしまう事が多いのです。なのでレイアウト設定のメニューでガジェットのHTML追加をしてから、ガジェットの中で普通のHTMLを使う設定なら、上手く機能する事が出来ます。

   Feedly にはスマホ用アプリがあるので、スマホでもお気に入りサイトのまとめ読みが可能です。

はてなブックマークのソーシャルボタン

   はてなブックマークも rssリーダーの一種です。筆者は使わないので質問は受け付けられませんが、日本国内では結構人気があると思います。特にブログサイトで使っているのが多いです。ソーシャルボタン用URLは下記となります。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=サイトのURL&title=ページのタイトル" rel="nofollow" target="_blank"><img src="ボタン画像のURL"> or リンクテキストリンクテキスト</a>

pocket のソーシャルボタン

   pocket は後から読みたいページを取り敢えず纏めて置くタイプの rss です。feedly と同じ英語圏のものですが、個性が少々違い、両方使うサイトもあります。

<a href="http://getpocket.com/edit?url=サイトのURL&title=ページのタイトル" rel="nofollow" target="_blank"><img src="ボタン画像のURL"> or リンクテキスト</a>

linkedin のソーシャルボタン

    こちらが公式ページとなります。
    http://developer.linkedin.com/plugins

●シェアボタン用リンク
http://www.linkedin.com/shareArticle?mini=true&url=自分のURL

   自分でソーシャルボタンにリンクを貼りたい時に参考になるボタンデザインは、こちらのサイト「カゲサイ」 さんに8種類のデザインを纏めていますので、参照すると便利です。 以上、作ったサイトに翼を授けましょう~w

   他のソーシャルボタンで「これは重要だよ!」と言うのがありましたら、ぜひご連絡下さい、調べて追加します。