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デザイン

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

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

  3. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法

    おはようございます、新入社員のふきちゃんです!私はライブハウスに行くのが好きなのですが、バーカウンターに飾られてるレッドブルやハイネケンのネオ…

  4. WEBデザイン

    【illustrator】簡単トレース方法

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

  5. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?

    おはようございます、ブログ連続更新中のふきちゃんです。会社の下にあるコンビニで温かい飲み物とシュークリームを買ったら「同じ袋にまとめてもいいですか…

  6. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使い方!

    おはようございます、最近のお気に入りはYogi TeaのSkin DeToxです。ハーブティーですが、効果のほどは不明なので気休めに飲んでます。…

コメント

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

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

CAPTCHA


最近の記事

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

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法
  2. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方
  3. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう
  4. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!
  5. HTMLコーディング

    cssでグラデーションを描いてみよう
PAGE TOP