• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / Wordpressブログを作ったらこれだけは押さえたいSNSのシェア設定

WordPressブログを作ったらこれだけは押さえたいSNSのシェア設定

池田祐太郎 | 2013年10月18日 公開

WordPressで念願のブログを作った。記事も書いた。あとは更新をして…

ちょっと待った!Wordpressブログを作ったら是非これだけは設定して欲しいものがあります。それは

SNSのシェア設定です。

目次

  • 1 SNSのシェア設定とは?
  • 2 WordPressプラグイン:WP Social Bookmarking Lightを追加して設定
    • 2.1 プラグイン導入
    • 2.2 プラグインの設定
      • 2.2.1 一般設定
      • 2.2.2 スタイル
      • 2.2.3 facebook
      • 2.2.4 twitterとgoogle+
    • 2.3 表示されているか確認
    • 2.4 facebookの表示を確認
  • 3 まとめ

SNSのシェア設定とは?

SNSはtwitterやfacebookやgoogle+などのサービス。これのシェアの設定を行うだけで良いと思った記事が見た人からSNSを通して広がっていきます。逆にこれをしないとせっかく「いいね!」とおもった記事も広がりがなくなってしまうという状態です。
今回は特にこの3つの中でも拡散されやすいfacebookの設定も行いましょう。
設定はとても簡単なので数分でできます。早速やってみましょう。

WordPressプラグイン:WP Social Bookmarking Lightを追加して設定

SNSボタンを表示させるためのプラグインを使います。Wordpressの便利な所はこういったプラグインが無償で手に入るというところですね。これを自分で実装ってなると割と手間がかかるので非常にありがたい。
では早速プラグインの導入手順から説明します。

プラグイン導入

WordPressのダッシュボードにログインし、サイドバーのプラグイン→新規追加から検索窓に「WP Social Bookmarking Light」と打ち込みます。

sns_search_101813_120108_PM

「今すぐインストール」をクリック。「本当にしていいですか?」と聞かれるので「OK」

sns_install_101813_120322_PM

インストールできたら「プラグインを有効化」を押します。

sns_activate_101813_120603_PM

するとサイドバーの設定の中に「WP Social Bookmarking Light」が追加されているのでクリック。これでプラグインが無事追加されました。

sns_sidebar_101813_120747_PM

プラグインの設定

一般的なSNSとして今回はFacebook, Google+, Twitterの3種類を表示させます。

一般設定

設定のページでまずは開いた最初のページ「一般設定」を以下のようにします。

sns_setting_101813_121511_PM

・位置:Top
・個別記事のみ:No
・ページ:No
・サービス(上から):Facebook_like/google_plus_one/twitter

できたら変更を保存をおします。

スタイル

次の設定、「スタイル」です。

sns_style_101813_122001_PM

Facebookの「いいね!」を押した後にコメント欄が出て自由にコメントが書けます。しかしこのままだとコメント欄が横幅100px程で切れるという仕様になっているのでこれを修正します。以下の一行をstyleの一番したに追加してあげます。

.wsbl_facebook_like iframe{max-width:none !important} /*facebookのコメントが切れるのを解決*/

出来たら変更を保存。

facebook

続いてfacebook設定です。ここ重要。

sns_facebook_101813_122252_PM

Locale:ja-JP
version: xfbml

このversionがxfbmlではなくiframeになっているといいねクリック後のコメント欄が出てきません!大きな理由がなければxfbmlにしておきましょう。

twitterとgoogle+

twitterアカウントも紐付けたい場合はtwitterタブの「Via」に設定したいアカウント名をいれましょう。google+は特にいじらなくてもOKかと思います。
全部の設定が終わったら必ず「変更を保存」をクリックしておきます。

表示されているか確認

確認してみましょう。問題なければこんな感じにタイトルと本文の間に表示されているかと思います。

sns_blog_101813_122929_PM

ブログ記事自体のページにいっても同様です。「やっぱり個別記事だけにしたい」って方は先ほどの「個別記事のみ:Yes」にしましょう。個人的にはどちらにも表示されているほうがお勧めです。全員が全員個別記事まで読みにいくとは限らず一覧から流し読みしたりするので。

facebookの表示を確認

試しに記事にあるfacebookいいね!ボタンを押すとコメントが出てきます。適当になにか入力して自分のfacebookプロフィールページに行ってみましょう。

facebookプロフィールページとは
https://www.facebook.com/あなたの固有ID
です。
※僕の場合https://www.facebook.com/yutaro.ikeda

ログインして右上のサムネクリックでいけますね。
sns_fbprofile_101813_123847_PM

ここにさきほどいいねとコメントした投稿が上がっているはずです。

sns_fbpost_101813_123512_PM

これで設定は完了!お疲れ様でした。

まとめ

ブログを書いても最初は知り合いや友達に見てもらって…というのは多いと思います。そのため皆が使っているfacebookやtwitterといったSNSをサイトに置くのは今やマスト。
プラグインを導入するのは簡単なんですが、facebookのコメントの設定等もしっかり最初にやっておくと拡がりに差が出てきます。
その他はてなブックマーク、tumblr、LINEなどのSNSボタンもたくさんあるので自分にあったボタンを後々追加していくことも可能なんですよね。

楽しいブログライフを!

WordPress保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法
2018年3月22日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.