2013-09-26 13 views
5

मैं एक कोणीय जेएस एप्लीकेशन विकसित कर रहा हूं जो एक दृश्य में एफबी-जैसे एकीकृत करता है। यह केवल पहली बार काम करता है और यदि मैं ब्राउज़र को भी रीफ्रेश करता हूं, जब मैं अन्य दृश्य पर नेविगेट करता हूं और वापसी करता हूं तो प्लगइन काम नहीं करता है।कोणीयजेएस + फेसबुक जैसे निर्देश काम नहीं कर रहे हैं

मैंने एक निर्देश बनाया है।

angular.module('myApp.directives', []).directive('fbLike',['$timeout', function($timeout) { 
return { 
    restrict: 'A', 
    scope: {}, 
    template: "<div class=\"fb-like-box\" data-href=\"{{page}}\" data-width=\"{{width}}\" data-show-faces=\"{{faces}}\" data-height=\"{{height}}\" data-show-border=\"{{border}}\" data-stream=\"{{stream}}\" data-header=\"{{header}}\"></div>", 
    link: function($scope, $element, $attrs) { 
     var working, _ref, _ref1; 

     $scope.page ="https://www.facebook.com/company_name"; 
     $scope.border = false; 
     $scope.height = (_ref = $attrs.fbHeight) != null ? _ref : '260'; 
     $scope.faces = $attrs.fbFaces != null ? $attrs.fbFaces : 'false'; 
     $scope.stream = $attrs.fbStream != null ? $attrs.fbStream : 'true'; 
     $scope.header = $attrs.fbHeader != null ? $attrs.fbHeader : 'false'; 
     $scope.width = (_ref1 = $attrs.fbWidth) != null ? _ref1 : $element.parent().width()-19; 
     $timeout(function() { return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse($element.parent()[0]): void 0; }); 
    } 
};}]); 

मेरा विचार

<script> 

window.fbAsyncInit = function() { 
FB.init({ 

appId: '', 
    status: true, // check login status 
    cookie: true, // enable cookies to allow the server to access the session 
    xfbml: true, // parse XFBML 
    oauth: true 

    }); 

    }; 

(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/es_LA/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

</script> 

<div fb-like></div> 

मैं दूसरा विकल्प है, लेकिन कोई भाग्यशाली लिए देख रहा था।

मुझे नहीं पता कि क्या गलत है।

बहुत बहुत शुक्रिया

+0

पर एक डेमो आप कभी भी यह पता लगा था नहीं है? मुझे एक ही समस्या है – rob

+1

@rob हैलो, हाँ, मैंने फेसबुक यूआई का उपयोग करने की प्राथमिकता दी है। इसलिए मैं ऐप में कोणीय-easyfb.js मॉड्यूल शामिल करता हूं। तो फिर तुम डाल अपने तरह इंटरफ़ेस

में btn आशा है कि यह आप – schwertfisch

उत्तर

4

मैंने पाया कि सबसे अच्छा समाधान मेरे ऐप में ezfb मॉड्यूल जोड़ रहा है, अब यह बहुत अच्छा काम कर रहा है।

मैं पूरी तरह से इस मॉड्यूल की अनुशंसा करता हूं।

.config(function ($FBProvider) { 
    $FBProvider.setInitParams({ 
    appId: '386469651480295' 
    }); 
}) 

Plunker Demo

Github Link

+1

मैंने exfb का उपयोग करने की कोशिश की। लगता है कि गतिशील पथ को फिर से प्रस्तुत करने के लिए प्लगइन प्राप्त करने के लिए अभी भी ताज़ा करने की आवश्यकता है। प्लंकर दिखाना प्रतीत होता है कि इसे सिर्फ काम करना चाहिए (बटन प्लगइन की तरह एफबी)। – Chaddeus

+0

विशेष रूप से: ezfb.init() यदि आप कॉन्फ़िगरेशन चरण में अपने FB.init पैरामीटर को कॉन्फ़िगर नहीं करना चाहते हैं (या आप नहीं कर सकते), तो आप चरण चरण में ezfb.init का उपयोग कर सकते हैं। और ezfb.init कॉल होने तक कोई ezfb API कॉल तब तक नहीं चलेगा। '386469651480295' }); : angular.module ('MyApp') .run (समारोह (ezfb) { ezfb.init ({ // यह के लिए plunker डेमो एप्लिकेशन AppID मेरे अमेरिकन प्लान एप्लिकेशन आईडी है }); – charneykaye

1

वहाँ एक खुला स्रोत सेवा ngFacebook यह बाहर की जाँच

है
+0

यह फेसबुक की तरह नहीं है ..... –

2

आप के रूप में सरल कुछ करने के लिए सक्षम होना चाहिए: HTML में

directives.directive('fbLike', function() { 
    return { 
     restrict:'E', 
     template: '<div class="fb-like" data-href="{{page}}" data-colorscheme="light" data-layout="box_count" data-action="like" data-show-faces="true" data-send="false"></div>' 
    } 
}); 

... और यह बस है:

<fb-like /> 

भी ध्यान रखें कि आप पर अनुप्रयोग की मेजबानी नहीं कर रहे हैं, तो डोमेन जैसे कोड में निर्दिष्ट है, यह प्रदर्शित नहीं होगा। क्रोम में, आप डेवलपर टूल में नेटवर्क पर क्लिक कर सकते हैं और विजेट की जावास्क्रिप्ट से किए गए पिंग के परिणाम देख सकते हैं।

<div><span>Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App&#039;s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App&#039;s domains.</span><script>if (typeof console !=="undefined" && console.log) console.log("Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.");</script></div> 
+0

मदद भी ध्यान रखें, आपके टेम्पलेट में आप उद्धरण से बचने। आप इसके बजाय एकल कोट्स के साथ टेम्पलेट स्ट्रिंग के आस-पास से बच सकते हैं। –

+0

धन्यवाद मेरे दोस्त। – schwertfisch

संबंधित मुद्दे