ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

Vertacalタイプ(箱型)のソーシャルメディアボタンをプラグインなしで実装する方法!

   

131221_1302

サイトにソーシャルメディアの共有ボタンがあるとないとでは記事の拡散にかなりの違いが出てきます(当サイトはまだまだできたてなので拡散されていないですが・・・orz)。

そこでWordPressにソーシャルメディアボタンを導入しようとするとなると、一番有名なのがプラグインのWP Social Bookmarking Lightですよね?おそらくほとんどのサイト・ブログに導入されている結構標準的なプラグインだと思います。

スポンサーリンク

 

でも、このプラグイン・・・確かに高性能ですけど、我慢できないところがあります!それは・・・Verticalタイプの共有ボタンがないこと!Pocketは選択できますけど、それだけで表示されても他のfacebookやツイッターはhorizontalなのでデザインがグチャグチャ・・・

なので自分で実装することにしました!

 

実装した結果、記事の上下にこのようなVerticalタイプの共有ボタンが表示されました!

131220_2201

感動でございます!!これで視覚的にボタンが強調されて少しでも拡散される確率がアップ!!・・・したと思いたい(笑)

 

 

 

ソーシャルメディアボタンを用意する

使用するソーシャルメディアボタンを用意しておきましょう。ここでは一般的な6つを使用してみます。

 

facebook share

 

facebookいいね!

 

twitter

 

google plus

 

hatena bookmark

 

Pocket

 

 

 

phpファイルに保存する

これらのコードをdiv属性、ul属性、li属性でまとめましょう。

 

最終的にこういったコードになります。

 

このコードをphpフォルダに保存して、こちらの記事にあるようにsingle.phpと同じディレクトリに保存しましょう。
WordPressでソースコードをファイル毎に分けて管理する方法!

 

 

 

CSSで調整する

stlye.cssに下記のコードを入れましょう。

 

 

 

サイトに反映(実装)させる

すべての用意が完了したら・・・phpファイルにあるコードを引き出す魔法のコードをsingle.phpの表示したい場所に入れましょう。それがコレ。

 

ボクの場合は、記事の上下に表示させました。

131220_2201

 

ここで注意点ですが、facebook shareボタンは他のボタンに比べて高さがあります。見やすいように?下を揃えていてfacebook shareの<li>属性に下記のコードを入れています。

これですべてのボタンの下部分がキレイに揃っています。

 

 

 

まとめ

Verticalタイプのソーシャルメディアボタンの実装方法をご紹介させて頂きました。ただ、テンプレートによっては表示に誤差が生じるのでCSSで微調整する必要があります。当サイトの場合、なぜだかtwitterボタンの幅が広くなっています。

いろいろ手を掛けたのですが、解消できませんでした。ほかのサイトで同じコードを使用するとバッチリなんですけどね。やっぱり相性ってあるんですね。今のところは現状維持で。

 

サイトの脇にあるスクロール追従するソーシャルメディアボタンも実装していますので、興味があれば参考にして下さい。
スクロール追従するソーシャルメディアボタンを実装する方法

 

 

 - SNS, WordPress


  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。

関連記事

131215_1860
【WP Social Bookmarking Light】ソーシャルメディアボタンを設置できるWordPressプラグイン

WP Social Bookmarking Lightは投稿ページ・固定ページの …

131209_2011
【Sharebar】ソーシャルメディアボタンがスクロール追従するWordPressプラグイン

Sharebarはサイトの左右や下辺りにソーシャルメディアボタンがカタマリになっ …

credit: WingedWolf via FindCC
WordPressサイトのテーマ・テンプレートやプラグインがチェックできるウェブサービス

ウェブサイトやブログを見ていて「このサイトって何のWordPressテーマ使って …

medium_6040687408
サーバーを使用してWordPressをドメインに自動インストールする方法

サイトを運営するにあたってWordPressというのはとても優れものです。無料ブ …

medium_2536017020
無料ブログではなく独自ドメイン(WordPress)を使用する意味!

初めてブログを運営する。こう考えたときに頭に思い浮かぶことはFC2やseesaa …

medium_5598172
WordPressでの記事の投稿方法を簡単にまとめました!

WordPressでの記事投稿方法をご説明していきます。 今まで無料ブログで記事 …

140105_1803
WordPressにテーマ(テンプレート)をインストールする方法!

WordPressの初期インストールされているテンプレートってちょっとだけ見栄え …

131217_2202
WordPressにビデオ動画を埋め込んでもwindow幅に合わせて自動でリサイズする神ワザ!

WordPressの記事中にyoutube動画を埋め込むときってこんな感じですよ …

141122_2101
Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる

Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont …

140419_1704
WordPressで記事ごとに広告表示・サイズを切り替える方法

前回コチラの記事で WordPressでカテゴリーごとに広告表示を切り替える条件 …