WordPressの記事をアメブロで記事を書くボタン設置

WordPressの記事をアメブロで記事を書くボタン設置

記事をブックマークできるソーシャルブックマークボタンの設置はよく見かけますが、アメブロで記事を書くボタンを設置しているところは現時点ではあまり見かけません。現時点で設置している有名なサイトは、All AboutとYouTubeがあります。All Aboutでは抜粋した内容をアメブロの記事に自動追加でき、YouTubeでは動画を自動追加できるボタンを設置してあります。

アメブロで記事を書くボタンのコード

アメブロに表示される記事のスタイルはAll Aboutのスタイルが見やすかったので、そのような形でアメブロの記事に表示するようにしてあります。

<a href="http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text=%3cp%3e%3ca%20href%3d%22<?php the_permalink(); ?> %22%20target%3d%22_blank%22%3e<?php echo urlencode( get_the_title()); ?>%3c%2fa%3e%3cbr%20%2f%3e<?php echo urlencode(mb_substr(get_the_excerpt(),0,90)); ?>%e2%80%a6%3c%2fp%3e%3cdiv%20align%3d%22right%22%3e%3ca%20target%3d%22_blank%22%20href%3d%22<?php bloginfo('url'); ?>%22%3e%5b<?php echo urlencode(get_bloginfo()); ?>%5d%3c%2fa%3e%3c%2fdiv%3e" target="_blank" class="ameba_button">Amebaで記事を書く</a> 

このコードを使ったときにアメブロに投稿されるスタイルが下記のような感じになります。

amebaに記事を投稿

投稿された記事のプレビューは下記のような感じになります。

ameba投稿記事のプレビュー

コードの中にclass=”ameba_button”と言うのを入れてますので、「アメブロで記事を書くボタン」用のスタイルシートを設ければボタンのレイアウト変更も出来ます。不要な場合はclass=”ameba_button”は削除されても構いません。

アメブロで記事を書くボタンの不具合

記事の内容によっては「クロスサイト スクリプトを防止する為に、このページを変更」と言う内容が現れ上手く投稿されない場合があります。ちなみ現時点で設置している有名なサイトAll Aboutでも記事の内容によっては、この内容が表示され上手く投稿できない場合があります。

クロスサイトスクリプト

ここで紹介したコードの中の「get_the_excerpt(),0,90」の90の部分が投稿される文字数になっているんですが、内容によってはこの文字数を少なくすることによって解決できる場合もありますが、それは単なる一時的な解決法になります。違うコードを使うことによって解決出来る方法をご存知の方がいらしたら助言していただけると助かります。

アメブロで記事を書くボタンのコードの説明

コードの中身は大まかに分けると下記の様になります。

  • アメブロの記事に投稿できるhref=”http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text=
  • WordPressのphpコード
  • 通常のhtmlタグをurlエンコードに変換したコード

この組み合わせで作成してあります。アメブロの記事に投稿できるアドレスとWordPressのphpコードはそのまま表示されているので分かると思いますが、urlエンコード(%3e%3ca%見たいなコード)のみが何が書かれているか分からないと思います。

urlエンコード(%3e%3ca%見たいなコード)の中身は難しいコードではなく、通常のhtmlタグをurlエンコードに変換してあるだけです。htmlタグをurlエンコードに変換出来るサイトがあるので紹介します。

簡単urlエンコードに変換

TAG index WebサイトさんのWeb便利ツール/URLエンコード・デコードフォームでhtmlタグや文字などを簡単にurlエンコードに変換出来ますので、とっても便利です。ちなみにここで使っているurlエンコードは、エンコードする時の文字コードをUTF-8を選択して変換し使用しています。

以上がアメブロで記事を書くボタンの説明になりますが、色んな記事で試してない為、もしかしたら他にも不具合があるかもしれません。不具合を見つけた場合にはそれに対する解決法を助言いただくと助かります。

最終更新日: 2013年2月5日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

WordPressの記事をアメブロで記事を書くボタン設置の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*