ハイリンクス

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

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

関連記事

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

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

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

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

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

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

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

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

131223_2301
WordPressのRSS feedがエラー表示されているときの対処法!

当サイトではRSSフィードとIFTTT(イフト)を連携させてTwitterとfa …

140105_1903
Google Analytics(アクセス解析)をWordPressに導入する方法!

サイトを運営するにあたってアクセス解析は必ず導入しておきましょう。いつ誰がどんな …

medium_3008912290
WordPressをインストールしたら絶対行なうべき6つの設定変更!

お名前ドットコムやムームードメイン、バリュードメインなどのレジストラでドメインを …

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

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

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

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

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

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