WordPressでプラグインなしでソーシャルブックマークを挿入
この記事を読むのに必要な時間は約 12 分です。
WordPressの投稿に表示されるソーシャルブックマークですが、 プラグインやテーマ附属のまま って方も多いですね。 ソーシャルブックマークを自作する方法について解説しています。
目 次
ソーシャルブックマークとは
ソーシャルブックマークは、インターネット上のサービスの一つで、オンラインブックマークサービスの発展形。自分のブックマークをネット上に公開し、不特定多数の人間と共有する事で、これらを有益な情報源とすることができる。
出典：ＷｉＫｉペディア
プラグインやテーマ附属のアイコン表示の不満
- 自社にとって必要なメディアがない
- 組み込みが難しい・追加が難しい
- プラグインを使う場合は、プラグインが増える
- 自作アイコンが使えないメディアがある
- 廃止された場合にプラグインやテーマの対応が遅い場合があっていつまでも表示されてしまう
各ソーシャルブックマークタグ作成
Tweet
|
1 2 |
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
follow
|
1 2 |
<a href=“https://twitter.com/あなたのID?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @あなたのID</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
メンション
|
1 2 |
<a href="https://twitter.com/intent/tweet?screen_name=あなたのID&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-show-count="false">Tweet to @あなたのID</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
参考サイト
|
1 2 |
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2&appId=673861046016725&autoLogAppEvents=1"></script> |
いいねボタン(シェアボタン付き)
|
1 |
<div class=“fb-like” data-href=“設置ページアドレス" data-width=“290" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> |
おすすめボタン(シェアボタン付き)
|
1 |
<div class="fb-like" data-href="設置ページアドレス" data-width=“290" data-layout="standard" data-action="recommend" data-size="small" data-show-faces="true" data-share="true"></div> |
参考サイト
LINE
LINEに送るボタン
|
1 2 |
<div class="line-it-button" style="display: none;" data-lang="ja" data-type="share-a" data-ver="3" data-url="<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" data-color="default" data-size="small" data-count="true"></div> <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script> |
友だち追加ボタン
|
1 2 |
<div class="line-it-button" style="display: none;" data-lang="ja" data-type="friend" data-lineid="@あなたのID" data-count="true" data-home="true"></div> <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script> |
参考サイト
|
1 |
<a data-pin-do="buttonBookmark" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/"></a> |
|
1 |
<script async defer src="//assets.pinterest.com/js/pinit.js"></script> |
参考サイト
|
1 2 |
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: ja_JP</script> <script type="IN/Share" data-counter="top"></script> |
参考サイト
Tumblr
|
1 2 |
<a class="tumblr-share-button" data-color="blue" data-notes="right" href="https://embed.tumblr.com/share"></a> <script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://assets.tumblr.com/share-button.js";ajs.parentNode.insertBefore(js,ajs);}}(document, "script", "tumblr-js");</script> |
参考サイト
mixi(ミクシィ)
|
1 |
<div data-plugins-type="mixi-favorite" data-service-key="識別キー" data-size="medium" data-href="" data-show-faces="false" data-show-count="true" data-show-comment="true" data-width=""></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = '//static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script> |
参考サイト
GREE
|
1 |
<iframe src="http://share.gree.jp/share?url=<?php echo $url_encode;?>&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe> |
参考サイト
はてなブックマーク
|
1 |
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> |
参考サイト
|
1 2 |
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a> <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script> |
参考サイト
|
1 |
<script type="text/javascript" src="//www.redditstatic.com/button/button1.js"></script> |
参考サイト
feedly
|
1 |
<a href='https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fwp908.com%2Ffeed%2F' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a> |
参考サイト
evernote
|
1 2 3 4 5 6 |
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script> <a href="#" onclick="Evernote.doClip({url:'<?php the_permalink();?>', providerName:'<?php bloginfo('name'); ?>', title:'<?php the_title();?>', contentId:'the-content', }); return false;" class="evernote-btn-link"><img src="<?php echo get_stylesheet_directory_uri();?>/image/evernote1.png" width="23" height="23" alt="Evernoteに保存"class="evernote-btn-img" /><span class="snstext <?php echo $plug; ?>" >Evernote</span></a> |
参考サイト
お気に入り追加
お気に入り追加JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { $('#bookmarkme,#bookmarkme2').click(function() { if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark window.sidebar.addPanel(document.title,window.location.href,''); } else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite window.external.AddFavorite(location.href,document.title); } else if(window.opera && window.print) { // Opera Hotlist this.title=document.title; return true; } else { // webkit - safari/chrome alert('ブラウザ付属のブックマーク機能をご利用ください。' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? '【 Command 】' : '【 Ctrl 】') + ' + 【 D 】ボタンを押すとブックマークできます。'); } }); }); |
お気に入り追加HTML
|
1 |
<a id="bookmarkme" href="" rel="sidebar" title="bookmark this page"><img src="/img/fav.png" alt="お気に入り追加"></a> |
Delicious
|
1 |
<a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>" target="_blank">Delicious</a> |
Digg
|
1 |
<a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink();?>" target="_blank">Digg</a> |
StumbleUpon
|
1 |
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">StumbleUpon</a> |
子テーマの中にPHPファイルを作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /** * 投稿ページのSNSボタン */ $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); if(function_exists('scc_get_share_twitter')){ $plug = "smanone"; }else{ $plug = ""; } ?> <div class="sns"> <ul class="clearfix"> <li>各ソーシャルメディアのタグを入れる</li> </ul> |
子テーマの中にsns.phpを作成します。子テーマの作成については、下記のページを参考にしてください。
Windowsユーザーの方は、Terapadなどで保存する前に文字コードがUTF-8になっているかしっかりと確認してください。
single.phpに表示タグを挿入
|
1 |
<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?> |
上記のタグをsingle.phpの表示させたい場所に挿入して上書きします。
自作していれば廃止になったソーシャルメディアの削除も可能です。廃止になったボタンは、削除する必要があります。間違ってクリックされるとエラーの原因になります。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
Evernoteに保存