WP Social Bookmarking Lightに「メールで送る」ボタンをつけたい

WP Social Bookmarking LightはTwitter、Facebook、Line、Google +など、多くのソーシャルメディアシェアボタンを簡単にWordpressに追加できる。
しかし、「メールで送る」ボタン機能がないので、簡単に作ってみた。

仕様として、WP Social Bookmarking Lightのclass、.wp_social_bookmarking_lightの中の、最後にjQueryのaddpentToで追加するように作っている。

jQuery(document).ready(function($) {
var pageTitle = document.title;
var pageUrl = location.href;
var shareText =’ここにメール本文に書きたいテキストを書く%0d%0a%0d%0a’;
jQuery(‘<div class=”wsbl_mail”><a href=”mailto:?subject=’ + pageTitle + ‘&body=’ + shareText + pageUrl + ‘”><img src=”/wp-content/uploads/2016/02/mailto.jpg” alt=”メールで送る” width=”88″ height=”22″></a></div>’).appendTo(‘.wp_social_bookmarking_light’);

メールで送るボタンのサンプルはこんな感じで。
mailto


WP Social Bookmarking Lightでカテゴリ一覧ページにソーシャルボタンが表示されない場合

WordPressにソーシャルボタンを追加するプラグイン、WP Social Bookmarking Light。

カテゴリ一覧などWordpressが自動生成するページにもソーシャルボタンを追加するためには、設定画面の「個別記事のみ」を「No」にすればいい。
スクリーンショット 2016-02-10 12.20.38

しかし、なぜかうまく表示できない・・・というときは、archive.phpにWP Social Bookmarking Light表示用のコードを追加しちゃいましょう。

場所的には、以下のようにhave_posts()のwhileループの下、item-wrapの閉じタグの上あたりがいいんじゃないかと思います。

  <?php
wp_social_bookmarking_light_output_e();
?>
</div><!– .item-wrap –>
</div><!– .archive-wrap –>


WordPressをソーシャルシェア

WordPressのプラグイン、WP Social Bookmarking LightとAll in One SEOを使った方法の紹介です。

WP Social Bookmarking Lightの設定

「WP Social Bookmarking Light」をインストールして、設定画面からお好きなソーシャルメディアを右から左にドラッグしましょう。
ここではFacebook、Twitter、LINEを設定してみました。
スクリーンショット 2016-01-15 17.05.42

All in One SEOの設定

トップページや、各投稿毎にシェア画像を設定するのに、今回はWordpressプラグイン「All in One SEO」を使います。
「All in One SEO」をインストール。
スクリーンショット 2016-01-15 16.25.27
All in One SEOの「Feature Manager」から、「Social Meta」の「Activate」ボタンを押す。
スクリーンショット 2016-01-15 16.27.40
All in One SEOの「Social Meta」をクリック。
スクリーンショット 2016-01-15 16.28.15

トップページのシェア画像設定

まずはHome Page Settingsの各項目を設定。これでトップページのシェア設定ができます。
スクリーンショット 2016-01-15 16.37.03
とりあえず、ここではog:imageだけ設定しておきます。
・「Home Image」の「Upload Image」をクリックし、新規画像を追加する
・同じく「Home Image」の「Upload Image」で、メディアにアップロードされているファイルを選ぶ
・画像のURLを直接指定する
などの方法で設定可能です。

個別ページのシェア画像設定

1.「All in One SEO」の「Image SettingsーSelect OG:Image Source」から設定する方法
・Default Image:個別ページ共通で、同じ画像を使う
・アイキャッチ画像:個別ページに設定されたアイキャッチ画像を使う
・Image From Custom Field:カスタムフィールドで設定した画像を使う
などが選べます。
スクリーンショット 2016-01-15 16.47.04
2.個別ページのAll in One SEO設定する方法
投稿の下部にある「All in One SEO Pack」の「Social Settings」タブで、Custom Imageを設定します。
スクリーンショット 2016-01-15 17.00.46


SSL証明書の期限切れgithub serverにSourceTreeから無理やりプッシュする

github/ github enterpriseのSSL証明書の期限が切れてしまうと、「fatal: unable to access ‘: SSL certificate problem: Invalid certificate chain」のようなエラーが出て、プッシュできなくなる。
スクリーンショット 2016-01-08 12.07.24

無理やりプッシュするには、SourceTreeの環境設定ーGitで、「SSL証明書の検証をしない」にチェックを入れるといい。
スクリーンショット 2016-01-08 12.04.27

まあ、根本的な解決方法ではないけれど。


「私がFacebook上で、よく使う言葉は?」を使うと死ぬの?

結論から言うと、死にません。

「私がFacebook上で、よく使う言葉は?」をFacebook連携させると出てくるメッセージ。
スクリーンショット 2015-12-09 18.42.19

「提供する情報を変更」をクリックすると、詳細が出てきます。
スクリーンショット 2015-12-09 18.41.54

許可する情報は以下3つ。
1.公開プロフィール
2.友達リスト
3.タイムライン投稿

1.は自分で入力して、みんなに公開した情報ですよね。
2.はFacebookで友達を作ると、みんなに公開されてしまう情報ですね。
3.も自分で入力して、みんなに公開した情報ですよね。

この3つを秘密にする方法があります。
それは、今すぐFacebookを退会することです。

よく陰謀論的に「こんなアプリ使うと個人情報抜かれる!」とおっしゃる方がいますが、現在のFacebookアプリのpermission制限強化と申請・承認制度をご理解されているのでしょうか?
個人情報を抜けるようなpermission設定とか、Facebookのrejectを通り抜ける方法とか、graph apiでどのfieldsをgetすればいいのかとか、そんな方法があるのなら、是非とも教えて欲しいです。
(昔は秘密のグループへの投稿まで取得できるpermissionあったけど)

「私がFacebook上で、よく使う言葉は?」を使う上で、一点だけ、注意点。
タイムライン投稿にpermissionあげると、「友達のみ」で投稿したpostsもアプリにアクセス許可になります。
「友達のみ」投稿だからいいやと、「部長しねや」って呟きまくってる人は、「私がFacebook上で、よく使う言葉は?」を使うと「部長しねや」が一番大きく出てくると思います。
とは言っても、「私がFacebook上で、よく使う言葉は?」はpublish_actionsのpermissionとってないので、勝手に自分のタイムラインに投稿されることはありませんが。
「私がFacebook上で、よく使う言葉は?」の結果を「全員に公開」で投稿して、部長にバレないよう注意しましょう。


Androidでベーシック認証のページからはPDFはダウンロードできない

以前も書いたけど、Androidではbasic認証/digest認証がかかっているサイトからは、PDFがダウンロードできない。

具体的な症状としては、
・ダウンロードが終わらない
・PDFビューアソフトで「不正なPDF形式です」のエラーが出る
など。

Gingerbreadの頃から発生しているのだが、Lollipopでも同じ症状だった。
Chromeでも標準ブラウザでも、アプリ内ブラウザでもダメ。

「AndroidでPDFがダウンロードできない!」という話があったら、「認証かかってない?」と確認するようにしましょう。


iOSで「2回クリックしないとリンク先に遷移しない」原因はopacity

症状

iOS上でリンクをクリックしても、リンク先に遷移しない
しかし、もう一回クリックすると遷移する
SafariでもChromeでも同じ症状
AndroidやPCブラウザでは症状が出ない

原因

iOS8.4.1以降の、CSSのopacityの扱い方が原因。

対策

リンク部分のclassに

opacity:none;

を指定する。

症状が発生するバターン1

画像リンクで発生

<style>
.link_image{
opacity:0.6
}
</style>
<a href=”link.html”><img class=”link_image” src=”link.jpg”></a>

症状が発生するバターン2

リンクではなく、jQueryによるcss変更でも発生

<style>
.link_image{
background:url(‘link.jpg’);
}
<script>
jQuery(‘.link_image’).click(function() {
jQuery(‘.link_image’).css(‘background’,’none’);
jQuery(‘.link_text’).css(‘display’,’block’);
});
</script>
<a id=”link_image”>
<span class=”link_text”>リンクします</span>
</a>

それぞれ

<style>
.link_image{
opacity:none;
}
</style>

にすれば1クリックでリンクされる。

サイト内に

<style>
a:hover {
opacity: 0.8;
}
</style>

のような設定がある場合は要注意。


本番とステージングでGoogle Analyticsのトラッキングコードを自動で出し分ける(WordPress)

ステージング(開発環境)サーバーでと、本番(商用環境)のサーバーと、同じGoogle Analyticsプロパティを設定してしまうと、本番データにノイズが入る。
だからといって別プロパティにすると、アップロードのミスで「本番にステージングのトラッキングコードをアップしてしまった」というミスも発生しがち。
そんな時は、funcitions.phpで出し分けると良い。

以下の例は、本番のドメインがwww.hoge.jpで、本番のトラッキングコードがUA-xxxxxxxx-1、ステージングがUA-xxxxxxxx-2の場合。

function wp_google_analytics(){
$domain=$_SERVER[‘SERVER_NAME’];
if ($domain == ‘www.hoge.jp’){
$ua=’UA-xxxxxxxx-1′;
}else{
$ua=’UA-xxxxxxxx-2′;
}
?>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘<?php echo $ua;?>’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<?php }
add_action(‘wp_head’, ‘wp_google_analytics’);


Macの買い替えでVirtualboxのWindows環境を移行する

古いMacでの作業

Virtualboxのディレクトリに移動して、vmのexport

cd ./VirtualBox\ VMs/Windows8
vboxmanage export -o Windows8 -o Windows8.ovf

出来上がったWindows8.ovfとWindows8-disk1.vmdkを、新しいMacへコピー

新しいMacでの作業

virtualboxインストール
https://www.virtualbox.org/wiki/Downloads
Virtualboxにコピーしてきたvmをimport

cd ./VirtualBox\ VMs/Windows8
vboxmanage import Windows8.ovf

スクリーンショット 2015-11-17 14.34.54


Macの買い替えでvagrant環境を移行する

古いMacでの作業

vagrantのディレクトリに移動して、boxのexport

cd ./vagrant/centos65/
vagrant package

Vagrantfileと、出来上がったpackage.box、新しいMacへコピー

新しいMacでの作業

virtualboxインストール
https://www.virtualbox.org/wiki/Downloads
vagrantインストール
https://www.vagrantup.com/downloads.html
vagrantにコピーしてきたboxを追加

cd ~/vagrant/centos65
vagrant box add centos65-x86 ./package.box

box名称を変更した場合は、Vagrantfileを編集
vagrant起動

vagrant up