ソーシャルでのシェア増を目的にStinger6にバイラル風シェアボタンを設置した

2017年9月28日ウェブマーケティングStinger6, WordPress, シェア, ソーシャル, バイラル, ボタン

スポンサーリンク

最近ではFacebookとTwitterで広告を始め、ソーシャルでのシェアの導線をそろそろ整えて相乗効果を狙わないとなぁと思っており、昨日思い立って諸々カスタマイズしました。

具体的には、Facebook独自のウィジェットの埋め込みを廃止し、バイラルメディア等で良く見かける「この記事が気になったらいいね!お願いします。」とか、「Twitterで○○をフォローしよう!」といったボタン(?)を設置しました。

※コードの内容はままはっくで公開されているものをそのまま流用させてもらいました。ありがとうございます!

スポンサーリンク

コピペで簡単にバイラル風のシェアボタンを追加しよう!

今回僕が追加したのは、以下の部分。

記事のウィジェットの画像と、Facebookの「いいね!」ボタンの設置、そしてTwitterのフォローボタンを置きました。

以下コードをコピペすれば、できます。

まずは下準備、functions.phpにモバイルかどうか判別する記述を追加(Stinger使用者は既に入っているのでいりません。)

※functions.phpを変更する場合は、必ずバックアップ取っておきましょう。突然ページが真っ白になることもあります。

header.phpの最初のbodyタグの後にFacebook用の記述を追加

WordPressでない場合についても同様で、bodyタグの後に入れておきましょう。

jsの読み込みの関係上、bodyタグ内の最初の方に書いておくのが無難です。

footerに置いておくと、当サイトの場合動かなくなります。

single.phpに記事出力部分を追加

○○の部分は適当に変えてください。

後はCSSで綺麗に整形しよう

これだけ。あっという間に実装終了しました。

Facebook公式のウィジェットだとなぜか横幅が500px以上広がらなかったり、Twitter公式ウィジェットだと謎のh1タグが挿入されるので今の実装内容で大満足です。

スポンサーリンク