ハイリンクス

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は投稿ページ・固定ページの …

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

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

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

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

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

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

131110_2301
プラグインなしでmoreタグ部分にアドセンス広告を挿入する方法

Google AdSenseの配置でクリックされやすい効果的な配置場所として「記 …

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

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

medium_8663075893
WordPressの記事公開前に「いいの?」と警告メッセージを表示する方法

WordPressでサイト・ブログを作成しているなら一度は経験したことがあるあれ …

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

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

131220_2102
WordPressでソースコードをファイル毎に分けて管理する方法!これは断然ラク!

WordPressをインストールしたらデフォルト設定のまま使用するってことは(た …

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

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