কীভাবে আমার ওয়েবসাইটে ফেসবুক শেয়ার বোতাম যুক্ত করবেন?

102

আমার কাছে এই কোডটি রয়েছে যা মনে করি কাজ করে তবে কার্যকর হয় না। এটি যদি যাইহোক আপনাকে সহায়তা করে তবে তা দুর্দান্ত।

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

আমি আমার ওয়েবসাইটে ফেসবুক শেয়ার বোতাম যুক্ত করতে চাই, এটি কেবলমাত্র আমার ওয়েবসাইটের সামগ্রীটি দেওয়ালে পোস্ট করা উচিত। যারা এটি ভাগ করতে চান।

আমি অনেক গবেষণা করেছি কিন্তু কিছু পেলাম না। প্লিজ আমাকে এতে সহায়তা করে।

আগাম ধন্যবাদ.

javascript  facebook  facebook-javascript-sdk  share  facebook-social-plugins 
— সাহেবজোট সিং
সূত্র
4
— রনি
নোট করুন যে ফেসবুক এসডিকে ব্যবহার করে আপনার ব্যবহারকারীদের কেবল আপনার সাইটে গিয়ে ট্র্যাক করা হচ্ছে ; এমনকি তাদের আপনার শেয়ার বা লাইক বোতামগুলির কোনওটিতে ক্লিক করার দরকার নেই। নীচের উত্তরগুলি কেবলমাত্র একটি সাধারণ লিঙ্কের প্রস্তাব দিচ্ছে ( a href) এই সমস্যাটি সমাধান করুন।
— পিটারিনো

উত্তর:

266

আপনার এই সমস্ত কোডের দরকার নেই। আপনার যা দরকার তা হ'ল নিম্নলিখিত লাইনগুলি:

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

ডকুমেন্টেশন https://developers.facebook.com/docs/references/plugins/share-links/ এ পাওয়া যাবে

— asifrc
সূত্র
7
এই বিকল্পটি সত্যিই পছন্দ করবেন না ... ইচ্ছে করে কোনও স্টাইলযুক্ত লিঙ্ক
— সেরজ সাগান
106
আপনি কেন লিঙ্কটি স্টাইল করবেন না? আমি অবশ্যই এই বিকল্পটি পছন্দ করি। আমার ডিজাইনগুলি দেখতে কেমন তা নিয়ন্ত্রণ করতে চাই।
— শেরিফডেরেক
6
এছাড়াও, এই পদ্ধতিতে ফেসবুক জাঙ্ক কোড যুক্ত হয় না, এটি আপনার পৃষ্ঠাকে ধীর করে দেবে। শারার ডট কম জ্যুচুরি প্লাগইনটি দেখুন, চেহারাটি কাস্টমাইজ করা এবং বেশ কয়েকটি সামাজিক "মত" বোতামগুলিকে এক করে বান্ডেল করা সহজ করে তোলে।
— পিক্সলাইন
4
হ্যাঁ, আপনি এখনও সহজ শেয়ার লিংক ব্যবহার করতে পারেন। এছাড়াও, আপনার জনপ্রিয় সমস্ত সামাজিক মিডিয়া সাইটের জন্য সহজ লিঙ্কগুলি তৈরি করতে সহায়তা করার জন্য এই সাধারণ পৃষ্ঠাটি দেখুন: শেয়ারলিঙ্কজেনেরেটর ডট কম
— পিস্তল-
4
গুরুত্বপূর্ণ দ্রষ্টব্য: মোবাইলে এই ধারণাটি ফেসবুক ওয়েবসাইট খুলবে (এফবি অ্যাপ নয়)। ছোট (বা বড়) কন
— এজরা সিটন
26

আপনি ফেসবুকের দ্বারা সরবরাহ করা অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এসডিকে ব্যবহার করে এটি করতে পারেন

নীচের কোডটি দেখুন

এফবি জাভাস্ক্রিপ্ট এসডিকে সূচনা

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

দ্রষ্টব্য: আপনার অ্যাপ্লিকেশন আইডিটি আপনার ফেসবুক অ্যাপআইডির সাথে প্রতিস্থাপন করতে ভুলবেন না। আপনার যদি ফেসবুক অ্যাপআইডি না থাকে এবং কীভাবে তৈরি করতে হয় তা আপনি জানেন না দয়া করে এটি পরীক্ষা করে দেখুন

JQuery লাইব্রেরি যুক্ত করুন, আমি গুগল লাইব্রেরি পছন্দ করব preferred

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

ভাগ করুন ডায়ালগ বাক্স (আপনি পরামিতি সেট আপ করে এই ডায়ালগ বক্সটি কাস্টমাইজ করতে পারেন

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

এখন অবশেষে চিত্র বোতাম যুক্ত করুন

<img src = "share_button.png" id = "share_button">

আরও বিস্তারিত ধরণের তথ্যের জন্য। দয়া করে এখানে ক্লিক করুন

— বিরাট গায়ওয়ালা - সিএসএম
সূত্র
7
... এটি টুইটারের সমতুল্যের আরম্ভের সাথে তুলনা করুন। বাদাম
— মাইকেল
6
আপনার পদ্ধতির জন্য একটি অ্যাপ্লিকেশন আইডি প্রয়োজন, এটি একটি বেদনাদায়ক ব্যথা।
— ঘোড়াগুয়ে
এই এখনও একটি মোহন মত কাজ করছে! কাজের চমৎকার টুকরো!
— কোডিং ফ্রিক
সুন্দর !! সহজে বোধগম্য. তবে ব্যবহারকারী কীভাবে আমাদের বিষয়বস্তু ভাগ করে নেবেন তা আমরা কীভাবে জানব? PS: প্রতিক্রিয়া.অরর_মেসেজ কেবল তখনই প্রদর্শিত হবে যখন আপনার অ্যাপ্লিকেশন ব্যবহার করে কেউ আপনার অ্যাপটিকে সত্যায়ন করেছে
— পার্ল
14

আপনি এখানে ফেসবুক বিকাশকারীদের ওয়েবসাইটে শেয়ার বোতাম সম্পর্কে আরও পড়তে পারেন

জেএসএফআইডিডিএল ওয়ার্কিং

কাস্টম ফেসবুক শেয়ার বোতাম জেএসএফআইডিএলএল একবার দেখুন

খোলার <body>ট্যাগের ঠিক পরে ফেসবুক জাভাস্ক্রিপ্ট এসডিকে কোড অন্তর্ভুক্ত করুন

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

আপনি যেখানেই ফেসবুক শেয়ার বোতামটি দেখতে চান কোডের নীচে রাখুন

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

এখানে চিত্র বর্ণনা লিখুন

JSFIDDLE কাজ করে দেখুন

— সুবোধ গোলাপে
সূত্র
8
এই কোডটি আর কাজ করে না এটা কি সম্ভব? জেফফিডেও নয়
— এরডোমাস্টার
8
হ্যাঁ নিজেকে এই কাজ করতে গুরুতর সমস্যা হচ্ছে ... আমি খালি ডিভ দিয়ে শেষ করছি।
— মাইকেল
@ এরডোমাস্টার ক্রিম বা ফায়ারফক্সে এই পোড়াটি দেখাবে না। এটি ব্রাউজারগুলির সুরক্ষার কারণে স্যান্ডবক্সযুক্ত আইফ্রেমগুলি প্রতিরোধ করে। সাফারিতে jsfiddle আপ খুলতে হবে এবং আপনি একবার jsfiddle এর বাইরে প্রয়োগ করলে এটি অন্যান্য ব্রাউজারগুলিতে প্রদর্শিত হবে।
— JisuKim82
5

ফেসবুক শেয়ারের জন্য কোন চিত্র একটি ছাড়া এপিআই এবং ব্যবহার #একটি উপ পৃষ্ঠা গভীরে লিঙ্ক করতে, কৌতুক ইমেজ শেয়ার করতে ছিলেন picture=

পরিবর্তনশীল mainUrlহবেhttp://yoururl.com/ 

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
— tq
সূত্র
2

ফেসবুক লগইন না করে ডায়ালগ শেয়ার করুন

আপনি কোনও লিঙ্ক ভাগ করে নেওয়ার জন্য শেয়ার পদ্ধতি প্যারামিটারের সাথে FB.ui ফাংশনটি ব্যবহার করে একটি শেয়ার ডায়ালগটি ট্রিগার করতে পারেন। এই ডায়লগটি কোনও URL এ পুরোপুরি পুনর্নির্দেশ সম্পাদন করে জাভাস্ক্রিপ্ট, আইওএস এবং অ্যান্ড্রয়েডের জন্য ফেসবুক এসডিকেগুলিতে উপলব্ধ।

আপনি এই কলটি ট্রিগার করতে পারেন:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

আপনি ফেসবুকে ভাগ করে নেওয়া গল্পটি কাস্টমাইজ করতে এই URL এ পৃষ্ঠায় ওপেন গ্রাফ মেটা ট্যাগগুলি অন্তর্ভুক্ত করতে পারেন।

মনে রাখবেন যে প্রতিক্রিয়া.অরর_মেসেজ কেবল তখনই উপস্থিত হবে যখন আপনার অ্যাপ্লিকেশনটি ব্যবহার করে কেউ আপনার অ্যাপটিকে ফেসবুক লগইন দ্বারা প্রমাণীকরণ করেছে।

এছাড়াও আপনি জাভাস্ক্রিপ্ট ফেসবুক এসডিকে রেখে কলের সাথে সরাসরি লিঙ্কটি ভাগ করতে পারেন।

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id => আপনার অ্যাপের অনন্য শনাক্তকারী। (প্রয়োজনীয়।)

  • redirect_uri => কোনও ব্যক্তি ডায়ালগের বোতামে ক্লিক করার পরে পুনঃনির্দেশ করার URL টি। ইউআরএল পুনঃনির্দেশ ব্যবহার করার সময় প্রয়োজনীয়।

  • প্রদর্শন => ডায়ালগটি কীভাবে রেন্ডার করা হয় তা নির্ধারণ করে।

আপনি যদি ইউআরএল পুনর্নির্দেশের কথোপকথন বাস্তবায়ন ব্যবহার করে থাকেন তবে এটি ফেসবুক ডটকমের মধ্যে প্রদর্শিত একটি পূর্ণ পৃষ্ঠা প্রদর্শন হবে। এই প্রদর্শন ধরণের পৃষ্ঠা বলা হয়। আপনি যদি ডায়লগটি শুরু করতে আমাদের আইওএস বা অ্যান্ড্রয়েড এসডিকে ব্যবহার করেন তবে এটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট হয়ে গেছে এবং ডিভাইসের জন্য উপযুক্ত ডিসপ্লে ধরণের পছন্দ করে। আপনি যদি জাভাস্ক্রিপ্টের জন্য ফেসবুক এসডিকে ব্যবহার করছেন, এটি আপনার অ্যাপ্লিকেশনটিতে লগইন করা লোকদের জন্য বা অ্যাসিঙ্ক হিসাবে, এবং অন্য সবার জন্য একটি পপআপ উইন্ডো ডিফল্ট হবে। প্রয়োজনে জাভাস্ক্রিপ্টের জন্য ফেসবুক এসডিকে ব্যবহার করার সময় আপনি পপআপ বা পৃষ্ঠার প্রকারগুলি জোর করতে পারেন। মোবাইল ওয়েব অ্যাপ্লিকেশনগুলি সর্বদা স্পর্শ প্রদর্শনের ধরণে ডিফল্ট হবে। পরামিতি ভাগ করুন

  • href => লিঙ্কটি এই পোস্টের সাথে সংযুক্ত। পদ্ধতি শেয়ার ব্যবহার করার সময় প্রয়োজনীয়। গল্পটি ভাগ করে নেওয়া কাস্টমাইজ করতে এই ইউআরএলে পৃষ্ঠায় ওপেন গ্রাফ মেটা ট্যাগ অন্তর্ভুক্ত করুন।
— সোমনাথ মুলুক
সূত্র
1

আপনার নিজস্ব নির্দিষ্ট সার্ভার বা বিভিন্ন পৃষ্ঠা এবং চিত্র বোতামের জন্য আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন (কেবলমাত্র পিএইচপি)

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

আমি এর সাথে স্নিপেটটি ভাগ করতে পারি না তবে আপনি ধারণাটি পাবেন ...

— ডাগিকক্রস
সূত্র
0

এই ফেসবুক পেজে বিভিন্ন শেয়ার বোতাম তৈরি করার একটি সহজ সরঞ্জাম রয়েছে।

উদাহরণস্বরূপ, এটি আমি পেয়েছি এমন কিছু আউটপুট:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="dilSYGI6"></script>
<div class="fb-share-button" data-href="https://www.mocacleveland.org/exhibitions/lee-mingwei-you-are-not-stranger" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mocacleveland.org%2Fexhibitions%2Flee-mingwei-you-are-not-stranger&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
— জেসার
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.