ハイリンクス

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

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

関連記事

140104_1901
WordPressのパーマリンク設定において最適でオススメな形は?

WordPressをインストールして最初に行なう設定の1つとしてパーマリンクの設 …

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

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

140105_2201
【WordPress】画像をアップロードし記事に貼り付ける方法!

WordPressに画像をアップロードして記事に貼り付ける方法をご紹介しておきま …

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

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

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

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

140416_2101
WordPressでカテゴリーごとに広告表示を切り替える条件分岐タグのやり方

WordPressで広告を掲載しているんだけど、カテゴリーによってはマッチしない …

131212_2138
WordPressのコメント欄をカスタマイズ!メルアド・サイト項目を削除

WordPressのデフォルトのコメント欄って要らない項目を削除することが素人に …

140105_2301
【WordPress】YouTubeやデイリーモーションの画像を記事に貼り付ける方法!

WordPressにYouTubeやDailymotionなどの動画を記事に貼り …

medium_9044771759
WordPressのビジュアルリッチエディタとテキストエディタが表示・使用できないときの対処方法

この記事を書く一つ前の記事にてビジュアルリッチエディタとテキストエディタがまった …

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

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