WordPressでオリジナル画像のSNSボタンを作る方法

WordPressでオリジナル画像のSNSボタンを作る方法




WordPressでブログを作る時に必要なのがSNSボタン。

このSNSボタンがないとユーザーに拡散してもらえません。

今の時代、SNSでの拡散は必須ですね。

今回は、以下4種類のオリジナル画像のSNSボタンを作る方法を紹介します。

  • Facebook
  • Twitter
  • Pocket
  • はてなブックマーク

FaceBookの場合

<a class="fb btn" 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;">
<img src="画像のパスを入力してください" alt="alt属性を指定してください。">
</a>

Twitterの場合

<a href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&hashtags=<?php echo get_post_meta($post->ID, _aioseop_keywords, true); ?>
" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow">
<img src="画像のパスを入力してください" alt="alt属性を指定してください。">
</a>

このコードでSNSボタンが設置されているページURLと記事タイトルとページごとに設定しているメタキーワードをハッシュタグとして自動で追加しツイートできるようになります。
※ハッシュタグはプラグインAll In One SEOを使ってページ毎のキーワードを設定している場合です。

Pocketの場合

<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">
<img src="画像のパスを入力してください" alt="alt属性を指定してください。">
</a>

はてなブックマークの場合

<a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>">
<img src="画像のパスを入力してください" alt="alt属性を指定してください。">
</a>

まとめ

今回、紹介したコードはコピペでいけると思いますので使ってみてくださいね。
毎回、使うときに調べていたのでこれからは自分のブログ見てコピペでやっていこうと思います。
こんなのに時間使っていたらもったいないですからね。