特定記事でバイラルメディア風SNSシェアボタンを表示する方法

このエントリーをはてなブックマークに追加

らふらく^^(@TwinTKchan)です。
バズる記事の大半を占めるようになったバイラルメディア。
バイラルメディアの「バズ」には、独特なSNSボタンが寄与しているはず!

ユーザーが心を揺さぶられた後、「俺こんなの知ってるぜ、すげーだろ」というドヤ感と共に伝えたくなったとき、あの目立つSNSシェアボタンがあったら、ついシェアしたくなってしまいます。

その実装方法を紹介していきます。バイラルメディア風の記事を書こうと思っているあなたの役に立てればと思います。

今回表示するのはこんなボタン

今回はバイラルメディアでよく目にするこういうボタンを実装していきます。
特定記事でバイラルメディア風SNSシェアボタンを表示する方法
各サービスこぞってこのスタイルをとっているだけに、きっと効果があるのでしょう。

作業も簡単で、
・SNSシェアボタンのコードを書いて記事に埋め込む
・特定記事でPHPを実行できるプラグインを有効化する
だけです。

それではいきましょう。

スポンサーリンク

SNSシェアボタンのコードを書く

今回は、@enigamid1020さんのこちらの記事を参考にさせて頂きました。

バイラルメディア的なシェアボタンの実装方法(Facebook,twitter) | まいるすえるびんバイラルメディア的なシェアボタンの実装方法(Facebook,twitter) | まいるすえるびん

ありがとうございます!
紹介されているコードをそのまま利用すればOKです。ちなみにこんな感じ。

<div class="snsshare">
	<a id="share_fb" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>"onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Facebookでシェア</a>
	<a id="share_tw" href="http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink(); ?>&text=<?php the_title(); ?>&url=<?php the_permalink(); ?>"onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">Twitterでシェア</a>
</div>
.snsshare {
width: 100%;
height: 50px;
margin-bottom: 20px;
}
 
.snsshare a {
width: 50%;
height: 30px;
padding: 14px 0;
float: left;
font-size: 18px;
font-weight: lighter;
color: #ffffff;
text-align: center;
letter-spacing: 0.1em;
display: inline-block;
font-family: 'Avenir','Helvetica neue';
}
.snsshare a:hover {
    color: #dd3333;
}
.snsshare a#share_fb {
background-color: #3b5998;
border-bottom-color: #314a7f;
}
.snsshare a#share_tw {
background-color: #00acee;
border-bottom-color: #007fb2;
}

あとは、このHTMLコードを記事の表示させたい部分に貼付けるだけ。

スポンサーリンク

特定記事でPHPを実行できるプラグインを有効化する

しかし、ここで問題が。
特定記事の中ではPHPコードを実行できません。
こういうヤツね↓

<?php the_permalink(); ?>

ですので、PHPを実行できるようにするプラグインをインストールして有効化してあげる必要があります。
そこでインストールするのがExec-PHPというプラグインです。

Exec-PHPの詳細な使い方はアルファシスさんのこちらの記事を参考にさせて頂きました。

Exec-PHP | 投稿記事内等で PHP を実行させるWordPressプラグインExec-PHP | 投稿記事内等で PHP を実行させるWordPressプラグイン

わかりやすくまとめていただき感謝です!

インストールして有効化の流れは、いつも通りWordPressのダッシュボードから「プラグインの新規追加」で「Exec-PHP」と検索して
特定記事の中でPHPを実行できるプラグイン
こちらをインストールして有効化します。

有効にした後は特に設定すべき所はありませんでしたので、初期設定のままでOKです。
あとは、上記のコードを記事に貼付ければ完了です!

バイラルメディア風のシェアボタンの効果が楽しみ

完成したSNSシェアボタンがこちらです。
特定記事でバイラルメディア風SNSシェアボタンを表示する方法
今回、始めての特定の記事で導入したわけですが、作成したビッグサイズのSNSボタンによりどれだけの効果が出るのか楽しみです。もし、いい結果が出るのであれば、今後他の記事でも採用してきたいと思います。

みなさんもバイラルメディア風の記事を書くときはピンポイントで利用してみてはいかがでしょうか。

仕事で悩む人から人気の記事

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

ブログ「らふらく」を購読する→follow us in feedly

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

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!