キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

コピペで OK!バイラルメディア風オリジナル SNS ボタンの設置方法

   

コピペで OK!バイラルメディア風オリジナル SNS ボタンの設置方法

思っていた以上に上出来、キャリコ( @calicocatxyz )です。

Facebook を見ていると、たまに気になる記事がタイムラインに流れてくることがあります。その中にバイラルメディアもあったりするのですが、記事の下部にアイキャッチ画像を使った SNS ボタンが配置してあったのです。

もしかしたら見たことがある人もいると思いますが、いいな~なんて思っていたらタイムリーな記事を見つけたのです。ままはっくを運営している、まなしば( @manami1030 )さんの記事だったのですが、今回はそれをちょっと改良しました。

リンクFacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

ありがたや、ありがたや~ってことで、それじゃあラテよろしくね♪

ラテ

こんにちは、ラテにゃ。

バイラルメディア風オリジナル SNS ボタンの設置は STINGER5 に合うようにレスポンシブに改良したにゃ。あとはサイズや文言を少し変更したくらいで、まなしばさんのソースをほぼ流用しているにゃ。

Ads by Google

バイラルメディア風オリジナル SNS ボタン

ソースコード

html

css

変更するのは2か所で、【 Facebook の URL 】の部分を差し替えるだけにゃ。

PC での見た目

PC での見た目

スマホでの見た目

スマホでの見た目

効果は人それぞれ

まなしばさんは設置してから1か月100いいねくらいで増加しているそうですが、キャリコの場合は3いいねしか増えなかったにゃw この辺は人気ブログがそうじゃないかで明暗が分かれそうな感じがするにゃ。

まとめ

効果はさておき、キャリコの場合は自己満足度が高い仕上がりになったにゃ。アイキャッチは目を引くし、なかなかのインパクトがあると思うにゃ。背景の色や文言を変えれば、さらにオリジナリティーが高まるにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - ウェブサービス ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

  おすすめ記事

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

pocket のブックマーク数の取得方法とオリジナル SNS ボタンの設置方法

週3でペペロンチーノを食べてるキャリコ( @calicocatxyz )です。 …

LINE が本気だしてきた!エイベックス、ソニーミュージック、サイバーエージェント、グリーなどと新会社設立

今日の Gunosy 朝刊で驚きのニュースを知ったキャリコ( @calicoca …

Twitter のフォローボタンとタイムラインプラグインを設置しよう

退院したはいいものの、2kg も太ったキャリコ( @calicocatxyz ) …

キャリコでも導入!今さら聞けない pocket の登録方法と使い方

久しぶりにハングオーバー、キャリコ( @calicocatxyz )です。 飲ん …

忍者 AdMax が Google AdSense よりも稼げる理由
忍者 AdMax が Google AdSense よりも稼げる理由

忍者 AdMax をブログに導入、キャリコ( @calicocatxyz )です …

カエレバなどで楽天ボタンを表示してるブログは要確認。その商品は本当にオススメ出来る?

こんにちは、キャリコ( @calicocatxyz )です。 先日こんな記事を目 …

クリック率が250%増!nend の単価が低けりゃ CTR を増やせばいいじゃない♪

まずまずの結果、キャリコ( @calicocatxyz )です。 小学生のお小遣 …

nend を1年間掲載してみてわかった平均クリック単価

nend は稼げない、キャリコです。 冒頭から夢のないことを言っちゃいますが… …

Facebook のファンページを作成してプラグインの Like Box を設置しよう

数日の入院が終わり無事に退院しました、キャリコ( @calicocatxyz ) …

Web アイコン Font Awesome の最新版 Version 4.3.0 が公開
Web アイコン Font Awesome の最新版 Version 4.3.0 が公開

これを知った当初はフォントアウェサムと読んでいた、キャリコ( @calicoca …