将动态OG标题，描述和图像传递到javascript中的Facebook共享对话框
Passing Dynamic OG title, description and image to Facebook share dialog in javascript
我正在尝试实现一个动态的Facebook共享按钮，该按钮在每个引用的同一URL上共享自定义的"标题"+"描述"，在这里：http://codepen.io/ryanabi/pen/mVoJGp
问题是Facebook不允许传递自定义参数，而只能使用主标题OG标签......这是我无法动态更改，因为我使用的是 jQuery 而不是 PHP。
关于如何传递不同的标题+图像但具有相同URL的任何建议。
//this array is declared outside the $(document).ready function to make it accessible in
//both $(document).ready and changeQuote() function
var quote = [
{
quotes: '"Keep all Jealous people away from you"',
speaker: "DJ Khaled"
},
{
quotes: '"Massage twice a week"',
speaker: "DJ Khaled"
},
{
quotes: '"Use cocoa butter in vibe + dove body soap"',
speaker: "DJ Khaled"
},
{
quotes: '"Keep a clean heart and clean soul"',
speaker: "DJ Khaled"
},
{
quotes: '"Take care of your plants"',
speaker: "DJ Khaled"
},
{
quotes: '"Keep the pathway to more success clean"',
speaker: "DJ Khaled"
},
{
quotes: '"Surround yourself with greatness"',
speaker: "DJ Khaled"
},
{
quotes: '"Stay focussed"',
speaker: "DJ Khaled"
},
{
quotes: '"The ones closest to you want to see you fail"',
speaker: "DJ Khaled"
},
{
quotes: '"Keep your head above water"',
speaker: "DJ Khaled"
},
{
quotes: '"Dont be a crab"',
speaker: "DJ Khaled"
},
{
quotes: '"Work hard"',
speaker: "DJ Khaled"
},
{
quotes: '"Give Thanks"',
speaker: "DJ Khaled"
},
{
quotes: '"Never give up on the journey"',
speaker: "DJ Khaled"
},
{
quotes: '"You must believe"',
speaker: "DJ Khaled"
},
{
quotes: '"Name your plants"',
speaker: "DJ Khaled"
},
{
quotes: '"Cardio is important"',
speaker: "DJ Khaled"
},
{
quotes: '"Brush your teeth"',
speaker: "DJ Khaled"
},
{
quotes: '"There will be struggle before success"',
speaker: "DJ Khaled"
},
{
quotes: '"Have a lot of pillows"',
speaker: "DJ Khaled"
},
{
quotes: '"Use mouth wash"',
speaker: "DJ Khaled"
},
{
quotes: '"Enjoy life"',
speaker: "DJ Khaled"
},
{
quotes: '"You have to work hard for success"',
speaker: "DJ Khaled"
},
{
quotes: '"3 multi vitamin gummies per day"',
speaker: "DJ Khaled"
},
{
quotes: '"Set iguanas free away from flowers"',
speaker: "DJ Khaled"
},
{
quotes: '"Never disappoint your loved ones"',
speaker: "DJ Khaled"
},
{
quotes: '"Keep the theory smooth"',
speaker: "DJ Khaled"
},
{
quotes: '"Bless up"',
speaker: "DJ Khaled"
},
{
quotes: '"Foot rubs"',
speaker: "DJ Khaled"
},
{
quotes: '"They have to know what you are saying"',
speaker: "DJ Khaled"
},
{
quotes: '"Jus know"',
speaker: "DJ Khaled"
},
{
quotes: '"Smell like success"',
speaker: "DJ Khaled"
},
{
quotes: '"Take rest"',
speaker: "DJ Khaled"
},
{
quotes: '"Give thanks to the most high"',
speaker: "DJ Khaled"
},
{
quotes: '"Drink water every morning"',
speaker: "DJ Khaled"
},
{
quotes: '"Believe in yourself"',
speaker: "DJ Khaled"
},
{
quotes: '"Have egg whites for breakfast every day"',
speaker: "DJ Khaled"
},
{
quotes: '"Drink coconut water"',
speaker: "DJ Khaled"
},
{
quotes: '"No pork"',
speaker: "DJ Khaled"
},
{
quotes: '"Salt water"',
speaker: "DJ Khaled"
},
{
quotes: '"Dry your back"',
speaker: "DJ Khaled"
},
{
quotes: '"Have the key to every door"',
speaker: "DJ Khaled"
},
{
quotes: '"Have apples"',
speaker: "DJ Khaled"
},
{
quotes: '"When people close the door on you just open it"',
speaker: "DJ Khaled"
},
{
quotes: '"Keep Blocking, Keep Dunking, Keep winning"',
speaker: "DJ Khaled"
},
{
quotes: '"Manicure and Pedicure once a week"',
speaker: "DJ Khaled"
},
{
quotes: '"Dont Panic"',
speaker: "DJ Khaled"
},
{
quotes: '"Never Give Up"',
speaker: "DJ Khaled"
},
{
quotes: '"Take the trash in your life out"',
speaker: "DJ Khaled"
},
{
quotes: '"Surround yourself with angles"',
speaker: "DJ Khaled"
},
{
quotes: '"Overcome the roadblocks"',
speaker: "DJ Khaled"
},
{
quotes: '"Make it"',
speaker: "DJ Khaled"
},
{
quotes: '"Be better than the evil people"',
speaker: "DJ Khaled"
},
{
quotes: '"The better the landscaping the more success"',
speaker: "DJ Khaled"
},
{
quotes: '"Gluten free in all your food"',
speaker: "DJ Khaled"
},
{
quotes: '"Embrace your blessing"',
speaker: "DJ Khaled"
},
{
quotes: '"Dont let people pull you down"',
speaker: "DJ Khaled"
},
{
quotes: '"Have a hammock"',
speaker: "DJ Khaled"
},
{
quotes: '"Never fold"',
speaker: "DJ Khaled"
},
{
quotes: '"Clear your mind and find peace and love"',
speaker: "DJ Khaled"
},
{
quotes: '"Keep people around you thats gonna uplift you"',
speaker: "DJ Khaled"
},
{
quotes: '"Over stand never understand"',
speaker: "DJ Khaled"
},
{
quotes: '"Move forward"',
speaker: "DJ Khaled"
},
{
quotes: '"You have to make it through the jungle to make it to paradise"',
speaker: "DJ Khaled"
},
{
quotes: '"In the jungle there is a lot of they. You must overcome they to make it to paradise"',
speaker: "DJ Khaled"
},
{
quotes: '"When you win, you must celebrate"',
speaker: "DJ Khaled"
},
{
quotes: '"Almond milk and cinnamon toast crunch"',
speaker: "DJ Khaled"
},
{
quotes: '"Stay clean at all times"',
speaker: "DJ Khaled"
},
{
quotes: '"Dont entertain they, keep they away from you and tell they to bow down"',
speaker: "DJ Khaled"
},
{
quotes: '"Stat fresh, Stay blessed"',
speaker: "DJ Khaled"
},
{
quotes: '"They want you to stop. Never stop"',
speaker: "DJ Khaled"
},
{
quotes: '"Weather the storm"',
speaker: "DJ Khaled"
},
{
quotes: '"Vitamin C"',
speaker: "DJ Khaled"
},
{
quotes: '"Find happiness and embrace it"',
speaker: "DJ Khaled"
},
{
quotes: '"Always remember"',
speaker: "DJ Khaled"
},
{
quotes: '"Make the right choices"',
speaker: "DJ Khaled"
},
{
quotes: '"Have good relationships"',
speaker: "DJ Khaled"
},
{
quotes: '"Counter Sue"',
speaker: "DJ Khaled"
},
{
quotes: '"Never back down"',
speaker: "DJ Khaled"
},
{
quotes: '"Be honest"',
speaker: "DJ Khaled"
},
{
quotes: '"Dont care about the haters"',
speaker: "DJ Khaled"
},
{
quotes: '"Dont make decisions when you are in a bad mood"',
speaker: "DJ Khaled"
},
{
quotes: '"Stay on course**"',
speaker: "DJ Khaled"
},
{
quotes: '"Believing in GOD!!! Loving GOD!!!GOD IS THE GREATEST!!!"',
speaker: "DJ Khaled"
},
{
quotes: '"Clean face"',
speaker: "DJ Khaled"
}
];
$(document).ready(function() {
//adding an onclick function to newQuote button. just calling the changeQuote() function in it
$("#newQuote").click(function() {
changeQuote();
});
//calling changeQuote() in $(document).ready function so that a random quote shows on page load
changeQuote();
});
//made a function to change quote so that it can be used in $(document).ready and
//newQuote button on click event
function changeQuote(){
var randomQuote = Math.floor(Math.random() * quote.length);
$("#quotes").fadeOut('fast', function() {
$("#quotes").text(quote[randomQuote].quotes).fadeIn(700);
//searching the anchors by their unique id and setting their href attribute
$('#tweetme').attr('href', 'https://twitter.com/intent/tweet?text=' + $('#quotes').html() + $("#speaker").text(" -" + quote[randomQuote].speaker).html() + ' @ryanabii');
$('#facebookit').attr('href', 'https://facebook.com/sharer.php?u=' + 'http://codepen.io/ryanabi/pen/mVoJGp' );
});
$("#speaker").fadeOut('fast', function() {
$("#speaker").text("-" + quote[randomQuote].speaker).fadeIn(700);
});
}
//change the bg color
$(function(){
$('#anotherone').click(function() {
document.body.style.background = getRandomColor();
});
});
function getRandomColor() {
var bgColorArray = ['#DFD9C9','#F5D5CE','#F1F5EA','#AEDBC9','#F3F7FF','#E8AB9C','#FFE9BD','#F1FFC7','#B7E8D8','#E1EDFF','#D3FFF6','#F5E4C9','#FFD3DE','#BBB7E8','#E7F5C7','#EEEEEE','#'],
selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];
document.body.style.backgroundColor = selectBG;
}body {
background-color: #E4FFEC;
-webkit-font-smoothing: antialiased;
}
p, h1, h2 {
text-align: center;
}
h1 {
font-family: bebas-neue, sans-serif;
font-size: 66px;
line-height: 1.3;
}
h2 {
font-family: kotta-one, serif;
}
h4 {
font-family: cabin;
font-style: italic;
padding-bottom: 10px;
}
p {
font-family: cabin;
line-height: 1.3;
font-size: 110%;
}
.heading a {
float: right;
top:0;
}
#anotherone {
text-align: right;
margin-bottom:20%;
}
#main {
backgroud-color: #E4FFEC;
padding: 40px;
max-width: 860px;
margin: auto;
transition: all 0.2s ease-in-out;
}
.changebg {
background-color: #86E2D5 !important;
transition: all 0.7s ease-in-out;
}
#newQuote {
font-family: cabin;
font-weight: bold;
}
#quotes, #speaker {
text-align: center;
}
#quotes {
font-family: kotta-one;
font-size: 58px;
padding-top: 30px;
}
#speaker {
font-family: cabin;
font-size: 125%;
text-align: right;
margin-bottom: 2%;
margin-top: 5%;
}
#tweetme {
color: #00aced;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
#tweetme:hover {
color: #4099FF;
transform: translate(2px,-2px);
-webkit-transform: translate(2px,-2px);
}
.btn {
border-radius: 0;
text-transform: uppercase;
border: none;
}
.another-button {
padding: 10px 30px;
margin: 0px 10px 10px 0px;
font-size: 18px;
color: #FFF;
text-decoration: none;
cursor: pointer;
border: none;
background-color: #2ECC71;
border-bottom: 3px solid #27AE60;
transition: all 0.2s;
-webkit-transition: all 0.2s;
z-index: 2;
}
.another-button:hover {
opacity: 0.9;
transform: translate(0px,-2px);
-webkit-transform: translate(0px,-2px);
border-bottom: 5px solid #27AE60;
-webkit-font-smoothing: antialiased;
z-index: 2;
}
.another-button:focus {
outline:0;
}
.another-button:active
{
transform: translate(0px,3px);
-webkit-transform: translate(0px,3px);
border-bottom: 1px solid #27ae60;
}
.main-quote {
padding-top: 50px;
min-height: 250px;
overflow: none;
}
.footer {
z-index: 1;
position: relative;
text-align:center;
padding-top:90px;
}
.footer p {
font-size: 16px;
text-align:center;
display: inline-block;
margin:10px;
line-height:1.3;
}
.footer a {
color: #2ECC71;
text-decoration:none;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.footer a:hover {
opacity: 0.5;
transform: translate(0px,3px);
-webkit-transform: translate(0px,3px);
border-bottom: 1px solid #2ECC71;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="//use.edgefonts.net/bebas-neue;kotta-one;cabin.js"></script>
</head>
<body id = "main">
<div class= "heading">
<h1>Keys to success</h1>
<p><i>#blessup</i></p>
<a target="_blank" id="tweetme"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class = "main-quote">
<div id = "quotes">
</div>
<div id = "speaker">
</div>
</div>
<div id = "anotherone">
<button class="btn another-button" id = "newQuote">ANOTHER ONE!</button>
</div>
<div class="footer">
<p>Design by <a href="#">yours truly</a></p>
<p>List by <a href="https://www.reddit.com/r/pathwaytomoresuccess/comments/3wleje/the_complete_list_of_keys_to_success_and_things/" target="_blank">pbaylis</a></p>
</div>
</body>问候
在做了更多的研究之后，以下是Facebook关于这个问题的声明：
我们已将共享器插件的行为更改为一致 与我们平台上的其他插件和功能一起使用。
共享者将不再接受自定义参数，Facebook将 将预览中显示的信息拉取相同 它将作为帖子出现在Facebook上的方式，来自URL OG meta 标签。
来源： https://developers.facebook.com/x/bugs/357750474364812/
相关文章：
- javascript中的数组出错
- JavaScript中的函数和对象之间没有区别吗?
- Javascript中的空白是什么
- 为什么要使用0>javascript中的0
- 如何制作简单的php'在Javascript中的foreach等价物
- javascript中的布尔条件
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 验证Javascript中的Textarea
- 可以't使用Appcelerator将JSON文件解析为JavaScript中的TableView
- 是“;x＝＝a||b”;以及“;x＝＝a||x＝＝b”;JavaScript中的等效语句
- 仅在IE中，javascript中的时区名称不正确
- JavaScript 中的嵌套函数和 “this” 关键字
- javascript中的命名空间，IDE中支持代码完成/内容辅助's
- JavaScript 中的高阶函数
- Javascript中的备选注释方法
- 如何使用JavaScript中的用户输入创建序列/序列
- 无法理解JavaScript中的静态方法
- 如何附加'#'到Javascript中的值
- javascript 中的全局函数
- 用javascript中的param执行动态函数
