ソーシャルボタンにもCanonical URLを

TwitterやFacebookなどへの共有を簡単にする、いわゆるソーシャルボタンに渡すURLをCanonical URL(正規化されたURL)に統一する方法を調べました。たとえば、ユーザーがこのエントリに

href="http://www.ki-dousen.net/modules/docs/index.php?content_id=2821

でアクセスしてきたとしても、Twitterボタンを押すと

http://www.ki-dousen.net/docs/content/2821

が共有されるようにしたいということです。

Canonical URLを作成し、Smartyに渡す

Canonical URLを設定する」というエントリでは、Smartyオブジェクトが作成された後に呼び出されるデリゲート(XoopsTpl.New)に、新たに処理を加えました(サイトプリロードによって)。その処理の中でCanonical URLを作成し、{$xoops_module_header}というSmarty変数にセットしました。しかしCanonical URLをソーシャルボタンにも渡すことにしたので{$xoops_module_header}に相乗りするのは止めて、独自の変数に格納することにシマした。さらにページによってCanonical URLがあったりなかったりすると面倒なので、複数のURLを持たないページにも、すべてCanonical URLをセットすることにしました。

Canonical URLを設定する」で紹介したコードのsetCanonicalUrl()だけを修正したので再掲します。

    function setCanonicalUrl(&$xoopsTpl)
    {
        
$canonUrl '';

        
// Get module dirname if possible
        
if( isset($this->mRoot->mContext->mXoopsModule) ) {
            
$module null;
            
$dirname '';

            
$module =& $this->mRoot->mContext->mXoopsModule;
            
$dirname =  $module->get('dirname');

            
// Set canonical url by module
            
switch( $dirname ) {
            case 
'docs':
                if( 
!= (int)$contentId $this->mRoot->mContext->mRequest->getRequest('content_id') ) {
                    
$canonUrl XOOPS_URL.'/'.$dirname.'/content/'.$contentId;
                } else if( 
!= (int)$catId $this->mRoot->mContext->mRequest->getRequest('cat_id') ){
                    
$canonUrl XOOPS_URL.'/'.$dirname.'/cat/'.$catId;
                }
                break;
            default:
            }
        }

        if( 
'' == $canonUrl ) {
            
$canonUrl = (empty($_SERVER['HTTPS']) ? 'http://' 'https://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        }

        
$xoopsTpl->assign('canonical_url'$canonUrl);
    }

そのCanonical URLを、テーマファイル(theme.html)のheadタグ内にセットします。

<{if $canonical_url}><link rel="canonical" href="<{$canonical_url}>" /><{/if}>

{$canonical_url}は必ずセットされるのでif文は本来不要です。ただ僕の場合修正ミスなどでプリロードが動かなくなり、しかもそれを見過ごすことが間々あるので、保険をかけておきます。誤ったURLが指定されるのはまずいですからね。

Canonical URLをソーシャルボタンに渡す

主要なソーシャルサービスを調べてみました。多くはコードを設置するだけでもURLを取得してくれるし、共有対象としたいURLを明示することもできます。なかでもGoogle+は<link rel="canonical" href="...">を見に行ってくれるみたいですね。

Twitter(設定ページ
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<{$canonical_url}>" data-via="khoriuchi" data-lang="ja">ツイート</a>
<script>(略)</script>
Facebook(設定ページ
<iframe src="//www.facebook.com/plugins/like.php?href=<{$canonical_url|escape:'url'}>&amp;width=150px(略)></iframe>
Google+(設定ページ
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="<{$canonical_url}>"></div>
<script type="text/javascript">(略)</script>
はてなブックマーク(設定ページ
<a href="http://b.hatena.ne.jp/entry/<{$canonical_url}>" class="hatena-bookmark-button" data-hatena-bookmark-title="<{$xoops_pagetitle}> | <{$xoops_sitename}>" (略) ><img (略) /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
Pocket(設定ページ
<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="<{$canonical_url}>" data-pocket-count="horizontal" data-pocket-align="left">Pocket</a>
<script type="text/javascript">(略)</script>

これをまとめてテンプレートファイルに入れて、docモジュールのテンプレートファイルから呼び出します。

 


友達に伝える
作成: 2013/10/6 by:koji
更新: 2013/10/6 by:koji


テキスト解析WebAPI(Yahoo!)を使ったタグ付け・執筆支援

Tech

Canonical URLを設定する

新規ユーザー登録(無料)

  • メールニュース[週刊起-動線]の購読
  • コメントなどの投稿
  • ココロミの利用
  • 一部コンテンツの購読

ログイン

コメント

タグ(キーワード)