‘FACEBOOK’

オリジナルタブで最新情報をレイアウトしてくれるfacebookアプリRSS for Pages

2012-07-08

これいいですね!

これはRSS情報をウォールに投稿するのではなく、オリジナルタブで最新情報をレイアウトしてくれるfacebookアプリです!

実際の表示はこんな感じです。

佐渡島net

こんな感じで自分のホームページのRSS情報一覧ページが出来上がります。

設定画面で1ページの表示数、ウォールに投稿するか等を設定できます。

導入方法

http://apps.facebook.com/involver_tdvjasdb/facebook_pages/landing

FacebookのRSS for Pages

上記のページより

Click here to installをおしてインストール。

すると次のページに推移します。

「RSS for Pages」を追加しますか

ここでタブを作成したいfacebookページを選択し、RSS for Pagesを追加するを押します。

すると会社名、電話番号を入力するページに推移します。

RSS for Pages

会社名、電話番号を入力し、 にチェックを入れSaveChangesを押せば完了です。

会社名、電話番号はすべて必須項目です。

以上で作業完了です。

佐渡島netページ

こんな感じでタブが追加されます。

WordPressにソーシャルボタンを設置する

2012-07-04

WordPressでのソーシャルボタンの設置方法

WP Social Bookmarking Light等のプラグインを使って設置してもいいのですが余計なプラグインは使いたくないのでプラグインを使わない方法。

下記コードをヘッダー(header.php)またはフッター(footer.php)に貼り付ける。

※ (ppId=***************の*にはFacebookのAppIDを入れる。

<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<!-- Google+ -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
 
<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

functions.php に下記のコードを貼る

// ソーシャルボタン
function socialbutton()
{ ?>
    <ul >
        <li class="hatebuButton"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
        <li class="tweetButton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="" data-lang="ja" >ツイート</a></li>
        <li class="likeButton"><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
        <li class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
        <li class="EvernoteButton"><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
    </ul>
<?php }

ソーシャルボタンを貼り付けたい位置に下記コードを貼る。(single.phpなど)
<!-- ソーシャルボタン -->
<div class="socialbutton">
<?php socialbutton(); ?>
</div>

ソーシャルボタン用のCSSをstyle.cssなどに追加
/* ソーシャルボタン */
div.socialbutton ul{
margin: 0;
padding: 0;
}
div.socialbutton li{
list-style-type: none;
float: left;
margin-right: 10px;
}

以上です。

OGP (Open Graph Protocol)について

2012-06-24

さて、今日の覚書

OGP (Open Graph Protocolってなんとなく耳にしてたんですがいままであんま気にせずにいました。

今回サイトをリニューアルするにあたって少し勉強したんで書き残しときます。

OGPとは簡単に言うとこのウェブページは何のことを書いているのかという情報を、プログラムから読めるように HTML に付加する記述方法のことらしいです。

私なりの解釈をすると最近よく見かけるソーシャルボタンありますよね?

facebookのいいねやシェアボタンとかtwitterのtweetボタンみたいなやつです。

OGPってのはそれらのボタンを押したときに正確な情報をfacebookやらtwitterやらに渡すために書く情報のことみたいです^^;

今現在はそういったソーシャルメディアが生活やビジネスの中で欠かせなくなってきているのでOGPはしっかり書いておいた方がいいと私は感じました。

具体的な書き方

書き方は非常に簡単です。

まず当サイトのOGPはこんな感じです。

<meta property="<a>og:title</a>" content="<a>佐渡島.NET | 佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:type</a>" content="<a>website</a>">
<meta property="<a>og:description</a>" content="<a>佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:url</a>" content="<a>http://sadogasima.net/</a>">
<meta property="<a>og:image</a>" content="<a>http://sadogasima.net/images/sado.jpg</a>">
<meta property="<a>og:site_name</a>" content="<a>佐渡島NET</a>">
<meta property="<a>og:email</a>" content="<a>mail@sadogasima.net</a>">
<meta property="<a>og:phone_number</a>" content="<a>080-3323-9112</a>">

みておわかりいただけるように<meta property=”<a>og:****</a>” content=”***</a>”>のような形のメタ情報を書くだけです。

簡単に説明すると

og:type
このウェブページが何のページであるかを記述(必須)
og:title
このウェブページが記述しているモノの名前(必須)
og:image
このウェブページが記述しているモノの画像(必須)
og:url
このウェブページの正式な URL(必須)
og:description
このウェブページの説明
og:site_name
このウェブページが何かのサイトに所属する場合そのサイト名
og:email, og:phone_number
という感じです。
このほかにも音声や動画を添付するときのOGPもあります。

あとwordpressで書くときはheader.phpに


<meta property="og:title" content="<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;</p>
<p>wp_title( '|', true, 'right' );</p>
<p>// Add the blog name.
bloginfo( 'name' );</p>
<p>// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";</p>
<p>// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>">
<meta property="og:description" content="<?php echo trim(wp_title('', false)); if(wp_title('', false)) { echo ' - '; } bloginfo('description'); ?>">
<meta property="og:url" content="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>">

のように記述すれば、title、description、urlは各ページごとに取得してくれます。

Facebook