Clever Geek Handbook

Webアプリケーションとソーシャルネットワークまたは「いいね！」の統合

必要なもの：ほとんどにfacebookとtwitterボタンを追加します

アプリケーションのセクション。

内容：静的アドレスのない1ページのアプリケーション。



したがって、3つのアクションを実行する必要があります。







＃！ 住所



ページアドレスと、できればタイトルをアプリケーションのセクションにバインドする必要があります。

私はjquery.addressと

正規表現の松葉杖。 ここのすべてはシンプルであり、非常に依存しています

アプリケーションなので、詳細に話すことは意味がありません。



静的ページ



ソーシャルネットワークのすべてのボタンは「ハッシュ」付きのアドレスを好まないため、

「＃！」のない特別なページを作成する必要があります。 ロボットに入るとき

facebookはそれらから情報を取得し、その人は「＃！」でページにリダイレクトされます。



これを行うには、次の形式のテンプレートが必要です。 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title></title> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" /> <meta property="og:type" content="" /> <meta property="og:site_name" content="" /> <meta property="fb:app_id" content="" /> <meta property="fb:admins" content="" /> <link rel="image_src" href="" /> </head> <body onload="document.location = 'http://' + document.location.host + '/#!' + document.location.pathname"> <img src='' /> </body> </html>


すべてのフィールドは必須です。

fb：app_idは、facebookのアプリケーションIDです。

fb：adminsでは、コンマで区切られたアプリケーションのユーザー/管理者ID。

og：image 、 image_srcおよびimgでは、画像の絶対アドレスを書き込みます。

ドメインを含む。

いくつかのテストの後、画像が

プレビューを複製する必要があります。 そうでなければ、状況は可能です、

プレビューなしで投稿した場合。

残りのフィールドの内容は、名前から明らかです。



ボタンを配置する



最初の問題はこの部分で発生します。ページに追加することはできません

いくつかのFacebookボタン。 しかし、これはjsでは非常に簡単に解決できます。 



 function addLike(holder, url) { try { $(holder).html('<fb:like href="'+ url + '" ></fb:like>'); FB.XFBML.parse(); } catch(err) {} }


try / catchでは 、クロスドメインで宣誓を開始するため、ラップされます。

お問い合わせ。 try / catchで -無視します。

ボタンのコードは任意に設定できます。主なことはFB.XFBML.parse（）をプルすることです。



TwitterはFacebookからそう遠くありません。 動的に追加されます

ボタンが機能しません。 これも簡単に解決できます。 



 function addTwitter(holder, url, title) { try { $(holder).html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + url + '" data-text="' + title + '">Tweet</a>'); $.getScript("http://platform.twitter.com/widgets.js"); } catch(err) {} }


try / catchは 、facebookと同様の理由で使用されます。



これで、「＃！」なしでこれらの関数にアドレスを設定することができます。すべてが機能します。


More articles:


All Articles