web如何将动态内容分享到facebook

网站分享到推特代码

<?php

if(isset($_GET["image"])){

$image=$_GET["image"];

$meta_image_fb = '<meta property="og:image" content="'.$image.'" />';

$meta_image_tw = '<meta name="twitter:image" content="'.$image.'" />';

}

if(isset($_GET["description"]))!{

$description=$_GET["description"];

}

if(isset($_GET["title"])){

$title=$_GET["title"];

$meta_title = '<meta property="og:title" content="'.$title.'" />';

$meta_title = '<meta name="twitter:title" content="'.$title.'" />';

}

if(isset($_GET["type"])){

$type=$_GET["type"];

$meta_type_fb = '<meta property="og:type" content="'.$type.'" />';

}

if(isset($_GET["url"])){

$url=$_GET["url"];

$meta_url_fb = '<meta property="og:url" content="'.$url.'" />';

$meta_url_tw = '<meta name="twitter:url" content="'.$url.'" />';

}

if(isset($_GET["video"])){

$video=$_GET["video"];

$meta_video_fb = '<meta property="og:video" content="'.$video.'" /><meta property="og:video:type" content="video/mp4" /><meta property="og:video:width" content="487" />';

$meta_video_tw = '<meta name="twitter:player" content="'.$video.'" />';

}

if(isset($_GET["card"])){

$card=$_GET["card"];

$meta_card_tw = '<meta name="twitter:card" content="'.$card.'" />';

}

?>

<!DOCTYPE html>

<html>

<head>

<!-- 这段是移动端需要的meta设置,假如是pc请按需要做相关修改 -->

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=yes" name="">

<?phpechoisset($image)?$meta_image_fb:''?>

<?phpechoisset($url)?$meta_url_fb:''?>

<?phpechoisset($video)?$meta_video_fb:''?>

<?phpechoisset($title)?$meta_title_fb:''?>

<?phpechoisset($type)?$meta_type_fb:''?>

<meta property="og:description" content="<?php echo isset($description)?$description:'' ?>" />

<?phpechoisset($image)?$meta_image_tw:''?>

<?phpechoisset($url)?$meta_url_tw:''?>

<?phpechoisset($video)?$meta_video_tw:''?>

<?phpechoisset($title)?$meta_title_tw:''?>

<?phpechoisset($card)?$meta_card_tw:'<meta name="twitter:card" content="summary" />'?>

<meta name="twitter:site:id" content="">

<meta name="twitter:title" content="<?php echo isset($title)?$title:'' ?>">

<meta name="twitter:site" content="">

<meta name="twitter:description" content="<?php echo isset($description)?$description:'' ?>" />

<meta name="description" content="<?php echo isset($description)?$description:'' ?>">

<title><?phpechoisset($title)?$title:''?></title>

<script type="text/javascript">

window.location.href="http://www.eaxmple.com/xxx.html";

</script>

</head>

<body></body>

</html>

前言:

facebook,twitter,pinterest 虽说在国内不是犹如微博,小伙伴圈那样非常的盛行,但是我么的工作中涉及到海外的业务时间就必须要去研究。为此,作为一个讨厌记密码又有高度庞杂密码逼迫症的开发员, 还是得把这3个交际平台全注册了一遍。

本文的例子非常简单,由于只是涉及到这3个交际平台的分享功能,以是不需要引入官方的sdk,也就不需要apikey等之类的密钥。用 <a>和<meta>标签就行了。

1.在你的html页面的head标签里参加这几个meta标签,关于每个标签的含义请参考: 点击打开链接


<!-- twitter--> <meta name="twitter:title" content="@ViewBag.Title" /> <meta name="twitter:description" content="@ViewBag.Description" /> <meta name="twitter:image" content="@ViewBag.ShareImg" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:url" content="当前分享的链接--可要可不要" /> <!-- facebook --> <meta property="og:image" content="@ViewBag.ShareImg" /> <meta property="og:locale" content="en-US" /> <meta property="og:type" content="website" /> <meta property="og:url" content="当前分享的链接--可要可不要" />

2.html+js编写分享按钮

<div> <a id="fbShare" href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrol!lbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"> <img src="../images/home/home_footer_share_facebook.png"> </a> <a href="javascript:window.open('http://twitter.com/home?status='+'My Item '+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrol!lbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"> <img src="../images/home/home_footer_share_twitter.png"> </a> <a href="javascript:window.open('https://www.pinterest.com/pin/create/button/?url='+encodeURIComponent(document.location.href),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrol。lbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"> <img src="../images/home/home_footer_share_pinterest.png"> </a> </div>

效果图:

facebook测试太多次被封了。这里提示下开发者,实在facebook的开发者平台登录后你会看到它有提供测试账号。

别的假如你发现你的分享功能有问题,可以到一下官方提供的验证站去测试下。

facebook: 点击打开链接 。

twitter 点击打开链接

输入你的html的url就可以,不外这就得要求你的站点可外网访问.


在开发一个针对海外的 网站 ,内里需要实现一个分享到Facebook/Twitter/Google+等的功能, facebook,twitter,Google虽说在国内不是犹如微博,小伙伴圈那样非常的盛行,但是工作中涉及到海外的业务时间就必须要去研究。下面为大家分享怎样实现 ?


js 代码 :

function share(type){//分享 var toOpen=function(url){ var option='toolbar=yes, location=yes, directories=no, status=no, menu!bar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350'; option=isDevice()=="Web"?option:''; window.open( url,'_blank',option, ); } var href=encodeURIComponent(document.location.href); var title=encodeURIComponent(document.title); switch(type){ case 'facebook'://分享到Facebook的代码 toOpen('http://www.facebook.com/sharer. php ?u='+href+'&t='+title); break; case 'google'://分享到Google的代码 toOpen('http://www.google.com/bookmarks/mark?op=add&bkmk='+href+'&title='+title); break; case 'twitter'://分享到twitter的代码 toOpen('http://twitter.com/home?status='+href+' '+title); break; case 'yahoo'://分享到yahoo toOpen('http://myweb2.search.yahoo.com/myresults/bookmarklet?u='+href+'&t='+title); break; case 'linkedin'://分享到linkedin toOpen('http://www.linkedin.com/shareArticle?mini=true&url='+href+'&title='+title); break; } }

meta标签:

在你的 html 页面的head标签里参加这几个meta标签 :以twitter和facebook为例。添加对应的meta可以实现分享固定的描述,图片等信息哦。

<!-- twitter--> <meta name="twitter:title" content="@ViewBag.Title" /> <meta name="twitter:description" content="@ViewBag.Description" /> <meta name="twitter:image" content="@ViewBag.ShareImg" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:url" content="当前分享的链接--可要可不要" /> <!-- facebook --> <meta property="og:image" content="@ViewBag.ShareImg" /> <meta property="og:locale" content="en-US" /> <meta property="og:type" content="website" /> <meta property="og:url" content="当前分享的链接--可要可不要" />

固然也有比较全面的分享插件,好比:share. js 。一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等

github地点:https://github.com/overtrue/share.js/


站长建议

1.云服务建议: 国内主流云服务商,各种云产品的最新活动,优惠券领取。地点: 阿里云 腾讯云 华为云

2.广告同盟: 整理了现在主流的广告同盟平台,假如你有流量,可以作为参考选择合适你的平台 点击进入

链接: http://www.fly63.com/div/detial/4578

本文网址: https://www.4008140202.com/pp/202102291942_2121_146019980/home

推荐阅读

tags

最新发布