將動態 OG 標題、描述和圖像傳遞到 JavaScript 中的 Facebook 共享對話框

Question

我正在嘗試實現一個動態 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>

問候，

Answer 1

在做了更多的研究之后，以下是 Facebook 關於這個問題的聲明：

我們已更改共享器插件的行為以與我們平台上的其他插件和功能保持一致。

共享者將不再接受自定義參數，而 facebook 將從 url OG 元標記中提取在預覽中顯示的信息，其方式與它在 facebook 上作為帖子顯示的方式相同。

來源： https : //developers.facebook.com/x/bugs/357750474364812/