ハイリンクス

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

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

関連記事

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

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

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

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

medium_192635773
Stinger3で記事中に広告やTwitterを入れスマホで見ると半分に切れているのを直す方法!

WordPressのテーマでStinger3を使用しているユーザーさんは今ではか …

medium_2797544238
ping送信先一覧!生きてる・効果があるURL20個をご紹介!

突然ですが・・・pingを送信していますか? まぁ正直ping送信したからアクセ …

140110_1801
【Mobilizer】スマホ表示をPCで確認できるフリーエミュレーターソフト

Mobilizerはスマートフォンで表示されるサイトをパソコン上で簡単に確認でき …

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

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

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

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

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

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

141118_1904
エックスサーバーからワンクリックでWordPressの表示速度が高速化!

はてブをチェックしていたらこんな記事を発見しました。 レンタルサーバーの速度向上 …

131205_2221
【IFTTT(イフト)】WordPressプラグイン不要でTwitterやfacebookに自動投稿する方法

IFTTTは「If This Then That」ということだ!・・・まったく意 …