ソーシャルボタンの設置っていちいち調べるのめんどくさいよね。
ぼくは、wordpressでブログを構築しているので
wordpressでソーシャルボタンを作成する時に自分がメモとして読んでいるドキュメントを公開するよ。
まずは、公式のそれぞれのソーシャルメディアのボタンのドキュメント
Google+ボタンのドキュメントは、こちらから
https://developers.google.com/+/plugins/+1button/?hl=ja
Facebook LIKEボタンのドキュメントは、こちら
https://developers.facebook.com/docs/reference/plugins/like/
はてなブックマークボタンのドキュメント
http://b.hatena.ne.jp/guide/bbutton
Twitterボタンのドキュメントは、こちら
https://twitter.com/about/resources/buttons
worrdpressで設置する上で覚えておきたい関数
Wordpress のパーマリンクの指定方法 <!--?php the_permalink(); ?--> Wordpressのタイトルの文字列 <!--?php the_title(); ?--> |
記事中で、僕のソースコピペになっているので、http://attrip.jpになっているところは、上記のタグに変更して使ってね。
具体的なソーシャルメディアのwordpressにコピペソース用にソースです。
Facebookの設置方法
facebookは、jsの読み込みをする場所は、先においたほうがサイト全体の速さは、はやくなるので上に置いた方がいいよ。
facebookの注意点は、アプリケーションIDをここで作成する必要アリ。
https://developers.facebook.com/apps
<br> |
facebookボタン 大
<br> |
facebookボタン小
<br> |
Twitterボタン
twitterボタン小
<a class="twitter-share-button" href="https://twitter.com/share" data-url="http://attrip.jp" data-text="タイトル" data-via="attrip" data-lang="ja" data-mce-href="https://twitter.com/share">ツイート</a><script type="mce-text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
twitterボタン大
<a class="twitter-share-button" href="https://twitter.com/share" data-url="http://attrip.jp" data-text="タイトル" data-via="attrip" data-lang="ja" data-count="horizontal" data-mce-href="https://twitter.com/share">ツイート</a><script type="mce-text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
Twitterはツイートというテキストが入っているんだけど、これがgoogleにクロールされるとテキストを読まれてディスクリプションに表示されているので消しています。
Google+ボタンの設置方法
Google+ボタン大
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <br> |
Google+ボタン小
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <br> |
Google+を呼び出す為のjsは、フッターに入れています。
<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --><script type="mce-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/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> |
はてなボタンも、jsはフッターに入れてます。
はてブボタン小
<a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/http://attrip.jp" data-hatena-bookmark-title="タイトル" data-hatena-bookmark-layout="standard-balloon" data-mce-href="http://b.hatena.ne.jp/entry/http://attrip.jp"><img style="border: none;" src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" data-mce-src="http://b.st-hatena.com/images/entry-button/button-only.gif" data-mce-style="border: none;"></a><script charset="utf-8" type="mce-text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" data-mce-src="http://b.st-hatena.com/js/bookmark_button.js"></script> |
はてブボタン大
<a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/http://attrip.jp" data-hatena-bookmark-title="タイトル" data-hatena-bookmark-layout="vertical-balloon" data-mce-href="http://b.hatena.ne.jp/entry/http://attrip.jp"> <img style="border: none;" src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" data-mce-src="http://b.st-hatena.com/images/entry-button/button-only.gif" data-mce-style="border: none;"></a><script charset="utf-8" type="mce-text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" data-mce-src="http://b.st-hatena.com/js/bookmark_button.js"></script> |
2012のattrip.jpのソーシャルボタン設置箇所のwordpress上でのソース
<!-- social button start --> <a href="#commenttop" data-mce-href="#commenttop"><img src="http://attrip.jp/wp-content/uploads/2012/11/comment.png" alt="" data-mce-src="http://attrip.jp/wp-content/uploads/2012/11/comment.png"></a> <a href="line://msg/text/<?php the_permalink();?> <?php the_title(); ?>" data-mce-href="line://msg/text/<?php the_permalink();?> <?php the_title(); ?>"><img src="http://attrip.jp/wp-content/uploads/2012/10/i_line0426.png" alt="" width="60" height="60" data-mce-src="http://attrip.jp/wp-content/uploads/2012/10/i_line0426.png"></a> <a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fattrip.jp/<?php echo $post->ID; ?>&t=<?php echo urlencode(get_the_title()) ?>" data-mce-href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fattrip.jp/<?php echo $post->ID; ?>&t=<?php echo urlencode(get_the_title()) ?>"><img src="http://attrip.jp/wp-content/uploads/2012/10/GW_Tumblr_Icon_60x60.png" alt="" width="60" height="60" data-mce-src="http://attrip.jp/wp-content/uploads/2012/10/GW_Tumblr_Icon_60x60.png"></a> <br> <br> |
