網頁上facebook分享功能的具體實現

時間 2019-11-24

標籤網頁分享功能具體實現欄目 HTML 简体版

原文原文鏈接

1，一個連接：參數是要分享的頁面的連接 javascript

代碼以下:

<a style="width:35px; height:40px; position:relative; top:10px; left:48px; " title="Share on Facebook" target="_blank"

 
 onclick="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('https://www.baidu.com')+'&t='+encodeURIComponent(document.title), 'newWindow', 'width=800, height=400','center');void(0);">  

2.fb識別的標籤：

代碼以下:

   <title>test</</span>title>  
  
<meta property="og:image" content="test/test.jpg" />  
  
<meta property="og:description" content="test>" />  
  
<meta property="og:url" content="https://www.baidu.com" />

注意：
1.title fb能夠自動讀取要分享頁面的title 這個要設置在fb的sharer.php參數裏
你也能夠本身設置方式就是

2.image標籤能夠寫多個分享人能夠本身選擇圖片
3.url就是你的要分享的頁面
4.description 介紹信息

提示：
圖片像素必須是100*100 這樣的格式我用90*90 就是OK的
例如：300*100 150*50在www.facebook.com圖片會截取90x90圖片顯示就不正確了
若是圖片小了更不行了，分享的那個彈出框就不會顯示你的圖片這個狀況發生在圖片小於90x90的狀況吧

facebook分享理解：要分享的頁面傳遞url過去，facebook經過這個url自動的去抓取符合要求的圖片和標題和description。url後面能夠帶titile參數，帶image和description 參數無效。

注意 ---》實際工做中遇到一個問題，使用

<title>test</</span>title>
<meta property="og:image" content="test/test.jpg" />
<meta property="og:description" content="test>" />
<meta property="og:url" content="https://www.baidu.com" />

這種方式去分享到facebook中，分享發給facebook過去的連接是上面meta的這個頁面地址（由於要抓取的內容都在meta標籤中寫了）；而分享成功以後點擊分享的內容，並無跳轉到https://www.baidu.com；

這個問題我用的解決方法是

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />php

就是頁面跳轉，看着有點彆扭java

應該換成google facebook 給出的官方分享代碼google

https://developers.facebook.com/docs/javascript/examplesurl