WEBデザイン

SNS共有ボタンを設置しよう!WP Social Bookmarking Lightの使い方!

おはようございます、これを書いている間5回はchromeのブラウザが落ちたふきちゃんです。
WordPressで記事を書いていると勝手に記事を下書き保存してくれるんですよ♪(ここで3回落ちる)
さて、パソコンを再起動してきます(って言ってる間にもう一回落ちた)

さて、再起動も済ませまして、今回はWordPressプラグインの使い方シリーズ第四弾です。
第四回は「WP Social Bookmarking Light」というプラグインのご説明をさせていただきます。

WP Social Bookmarking Lightとは?


ブログの記事などを見ているとこんなリンクを見たことがあると思います。
今見てるこの記事の下にもありますね。
「WP Social Bookmarking Light」はSNSの共有ボタンを記事内に設置できるプラグインです。
各種SNSページから共有ボタンのプログラムコードを取得して設置しなければならなかった作業が、WordPressの管理画面から簡単に共有ボタンを設置することが出来るので大変便利です!

WP Social Bookmarking Lightの使い方

では、いつも通りインストール&有効化してみましょう!
有効化したら左メニュー「設定>WP Social Bookmarking Light」から設定していきましょう

Position(表示位置)
 Top(記事上部)
 Bottom(記事下部)
 Both(上下)
 None(表示させない)
Individual Article(個別記事に表示させるか)
 Yesにするとトップページにも表示されます
pages(固定ページにも表示させるか)
 Yesにすると固定ページにも表示されます
Enable Services(どのSNSボタンを表示させるか)
表示したいボタンを右から左にドラッグ&ドロップすると記事内にボタンが設置されます。
※この画面ではFacebook、Twitter、LINE、はてなブックマークを有効にしています。

最後に「変更を保存する」を忘れずに押しましょう!

各SNSの設定

各設定が終わると上記のタブにそれぞれのボタンに対応したタブが追加されます。
それでは、各SNSボタンの設定をしましょう♪

・Twitter

Via:ご自身のアカウント名(シェアの際)
Related:関連アカウントですが、空白でも問題ありません
Hashtags:シェアの際挿入するハッシュタグ
Dnt(Opt-out of tailoring Twitter):デフォルトのままで問題ありません
Language:「Japanese-日本語」を選択
size:LargeとNormalがありますが、Normalで構いません。
Version:cssを使ってデザイン変更をしない場合はiframeにしてください

・はてなブックマーク

Layout:各ボタンのレイアウトが選べます。standardがおすすめです。

・Facebook

Locale:ボタンに表示する言語です。日本語にする場合は「ja_JP」と入力してください。
Version:表示の設定。xfbmlを指定してください。
Add fb-root:デフォルトで構いません

・Facebook Like

Layout:Button_count
Action:likeを選択すると「いいね!」、Recommendを選択すると「おすすめする」になります。
Share:FBボタンの横に「シェア」ボタンを追加するか否かです。
Width:横幅ですが、デフォルト値で構いません。

・LINE

Button type:ボタンの種類です。選択すると横にサンプルが出るので便利。
Protocol:http://を選択してください。

SNS設定を反映させるとこんな感じになるかと思います↓

これであなたのブログにも簡単にSNSシェアボタンを追加することが出来ます!

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    色相環でグラデーションを描いてみよう

    最近めっきり寒くなりまして熱燗のおいしい季節になってきました、こんにちはともさんです。今回は色相環を使ってグラデーションを描いてみましょう、という…

  2. WEBデザイン

    【illustrator】簡単トレース方法

    こんにちは!ゆかちんです(^^)/あっという間に寒くなってきましたね。コーヒーが美味しい季節です。グランフロントの中にあるDOWNSTAIRS…

  3. WEBデザイン

    Photoshopで空模様の画像を作る方法

    はじめまして、テイクフォーの谷口です。今回初めて記事を書きます。さてその初回は、Photoshopで空模様の画像を作る方法をご紹介しま…

  4. WEBデザイン

    WordPressのバックアップを取ろう!BackWPUpの使い方

    おはようございます、ふきちゃんです。ご無沙汰しておりました。記事を書いていない1年3ヵ月の間、金髪をやめ、髪は暗くなり、自宅を引っ越し、自宅用のP…

  5. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    どうも僕です、テイクフォー谷口です。先週末は佳境を迎えたプロ野球日本シリーズやサッカーJリーグとスポーツネタで盛り上がってました^^(大阪…

  6. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編

    どうも僕です、テイクフォー谷口です。季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
  2. コピーライティング

    コピーライティング心理学 そのに ~スノッブ効果~
  3. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!
  4. コピーライティング

    キャッチコピーに役立つキュレーションメディア5選!
  5. レポート

    通勤でおすすめできるロードバイクの選び方
PAGE TOP