WordPressにAddThisをプラグインなしで導入する

以前こんなことがあったのでAddThisプラグインはやめていました。
URLの最後に勝手に謎の文字列が追加される

でもやっぱりAddThisはどれだけシェアされたかをメールでお知らせしてくれたり、グラフで見れたりと便利な点も多いので、プラグインは使用せずに導入してみました。

AddThis

導入方法1. ブログトップページに貼付ける用

この方法だと現在表示されているページのURLのみをシェアします。ブログのトップページのアドレスをシェアしたい場合や、個別ページを開いた時にのみシェアボタンが表示されるように設置する場合によいと思います。

Get AddThisのページを開き、ログインします。

1.左側の”Options”の”Platform”を”Website”を選択します。

2.”Style”をお好きなものを選択します。
Styleを選択

3.右側の”Install AddThis (it’s free!)”の下にコードを出してくれるのでそれをコピーして、表示させたい箇所に貼付けます。
Install AddThis (it’s free!)の下のコードをコピペ

基本的にはこれで完了です。

ただ、デフォルトだとAddThisからツイートした場合にツイートの宛先が@addthisになっています。上で貼付けたコードのすぐ下に下記のようなコードを追加する事で、ツイートの内容を設定できます。

<script type="text/javascript">
var addthis_share = 
{ 
// …
    templates: { twitter: 'check out {{url}} (from @example_dot_com)' }
}
</script>

↓このコードで下のようにツイートされます。
ツイート表示

twitter: ‘check out {{url}} (from @example_dot_com)’
の中を下記に置き換える事ができます。

{{url}} //表示されてるページのURLをツイート
{{lurl}} //URLを短くする
{{title}} //ページのタイトルを表示
{{html}} //任意のHTMLを表示
(from @example_dot_com) //"from @"を自分のIDに変更

導入方法2. トップの記事一覧の個別記事の箇所、個別表示のページに表示する用

個別記事のタイトル、URLをシェアしてくれます。

下記のコードでボタンを設置できます。

<a href="http://www.addthis.com/bookmark.php?v=250&pubid={自分のIDを入力}" 
      class="addthis_button"
      addthis:url="<?php the_permalink(); ?>"
      addthis:title="<?php the_title(); ?>"
      addthis:description="An Example Description"></a> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=自分のIDを入力"></script>

↓こんな感じです。
表示例

このHelpを参考にすればToolboxで表示したりもできます。

このブログにつけたコードは下記です。

<div class="addthis_toolbox addthis_default_style "
       addthis:url="<?php the_permalink(); ?>"
       addthis:title="<?php the_title(); ?>"
       addthis:description="An Example Description">
<a href="http://www.addthis.com/bookmark.php?v=250&pubid={自分のIDを入力}" class="addthis_button_compact">Share</a>
<script type="text/javascript">
var addthis_share = 
{ 
// …
    templates: { twitter: '{{title}} {{url}} (from @mo0_0sao)' }
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=自分のIDを入力"></script>
</div>

↓こんな感じの表示です。
表示例

最初に設置した時に、初めに書いた方法で個別記事のシェアボタンもつけてしまい、記事の一覧で個別記事をシェアしようとしても、トップページのアドレスしかシェアできなかったという事がありました!使い分けをしないといけませんね。

Related Article

1 Comments & Tracbacks

  • Loree 2017-03-15 8:46 PM

    Great post. I was checking conlunuoisty this blog and I’m impressed! Very useful info specially the last part I care for such info much. I was seeking this particular info for a very long time. Thank you and good luck.

    Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ