【WordPress】Stingerの記事下にSNSシェアボタンを置いてみた

こんにちは!「人気者になりたいぜ!」って願望はあるがそのスキルがない 空くうかい海@kuukai13です。

本日のテーマ SNSとStinger(゚∀゚〃)

今日はStingerのカスタマイズ記事です。

全然忘れてたというか、気にしていませんでしたというか、 そんな感じなんですけど、 記事が終わったあとのすぐ下にSNSのフォローボタンを設置しました。

設置した理由(ワケ)はせっかく twitter, Google+,facebookと3大ソーシャルを開設しているので 1個にまとめて記事下の置くと何かが起こるのかって? 検証です(記事が全てだよってことは脇に置いといてねw)

今回参考にした記事

今更説明する必要がないですけどもENJIさん。

僕のWordPressブログで効果を出している+αなカスタマイズ

こちらを参考にというかほぼ 真似をさせて頂いたという方が適切(スミマセン)

各コードを取得

右サイドバーにもSNSコード貼っていますが また改めてコードを取得します。

twitter

twitterはこちらです。

自分のユーザー名を入力 各部、自分のお好みに合わせてチェックマークを入れ 右側のコードを取得
取得したものをEvernoteなどテキストエディタにコピーします。

スクリーンショット 2014 03 22 07 10 41

facebook

facebookはこちらです。

facebookも似たようなもので 自分のfacebookアドレスを入力 あとはどのような形式にするかをきめ

Get Codeを取得

スクリーンショット 2014 03 22 07 06 32

ちなみにShow Friends Facesにするとこんな感じ

スクリーンショット 2014 03 22 07 07 02

IFRAMEをクリックして こちらもコードをコピーして テキストエディタにコピー

スクリーンショット 2014 03 22 07 07 47

Google+

Google+はこっちです。

Google+も自分のお好みに合わせて コードを取得しコピーして テキストエディタにおいておきます。

スクリーンショット 2014 03 22 07 16 19 スクリーンショット 2014 03 22 07 17 28

Feedly

せっかくなのでfeedlyもやってしまいましょう!! feedlyはここ。

好きなボタンサイズをを選択

Feedly your news delivered

自分のサイトのRSSのURLを記入します。 僕はWordPressなので 僕の場合は

http://kuu-kai13.net//feed/

OR

http://kuu-kai13.net//?feed=rss2と記入してくれれば オッケーなんです(゚∀゚〃)
ここは当然ご自分のURLでお願いします(^_^;)。

Feedly your news delivered

そして最後に表示されたコードをコピーして
テキストエディタに貼り付けておきます。
Feedly your news delivered

最後の仕上げです SNS.PHP

いままでコピーしたコードちゃんと保存されていますか??
最後の仕上げがやってきました。

最後はコードをSNS.PHPに貼り付けます。

※ここまで順調でしたが最後がうまく反映されませんでした。
そこはENJIさんのソースを覗かせてもらって整形。
そこはもうENJIさんに向かって
永田さんの敬礼ポーズをして拝借

<div style="background-color:#f3f3f3;padding:10px;margin-bottom:10px;">
<pclass="b"style="padding-bottom:0px;">空海Blogの情報はこちらで配信しています(*´・ω・)ノシ</p>
<div style="padding-bottom:10px;">
<a href="https://twitter.com/kuukai13" class="twitter-follow-button" data-show-count="true" data-lang="ja" data-size="large">@kuukai13さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/103253741429226526862" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</div>
<div style="padding-bottom:10px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkuukai13&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowTransparency="true"></iframe> 
</div>

<div>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fkuu-kai13.net%2F%3Ffeed%3Drss2'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>

こちらも当然ご自分のURLを入れてくださいね。

やりました(*´゚∀゚`)ノ
無事反映成功です。
デザインとかもホントは弄りたいのですが
まずはデフォルトのまま置いてみたいと思います。
7d015c64807c4fd03d38e6ac5094bc4c.jpg

今日のまとめ(´∀`)うん!

まずはベースとなるSNSフォローページが完成です。
小手先のなんちゃらですが良記事を書いて頑張るぞえ(*´゚∀゚`)ノ

それではまた~


スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です