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

    投稿記事を複製しよう!Duplicate Postの使い方

    おはようございます、気圧にずっとやられています、ふきちゃんです。気象病を紛らわすために薬を飲むと今度は眠くなって寝てしまうし、Dead or De…

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

    WEBデザイン

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

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

  3. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)

    おはようございます、私です。8月半ばから胃の不調に悩まされ続け、一時は胃潰瘍かとも思われておりましたが、先日とうとうお茶漬けを前にして一口…

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

    WEBデザイン

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

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行ったり、心斎橋一帯のライブハウスを巡るイベントに行ってきました^^さて…

  5. WEBデザイン

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

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

  6. WEBデザイン

    【Photoshop】ボタントレース方法

    こんにちは。ゆかちんです!すっかり寒くなってきましたね。ローソンのMACHIcafeで買ったココアがカップかわいくってほっこりします。入社…

コメント

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

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

CAPTCHA


最近の記事

  1. お知らせ

    テイクフォーでは社食を導入しています(社食導入のメリット・デメリット)
  2. WEBデザイン

    よく見る方眼紙のようなパターンの作り方
  3. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)
  4. レポート

    モンストフェスティバル2015に行ってきました。
  5. コピーライティング

    この秋オススメお菓子のキャッチコピー
PAGE TOP