Current status of the Ning Platform is always available on the Ning Status Blog.

Hi there!

As the share from Facebook comments doesn't work, I have been thinking is there any way around, so you could share discussions/blogs etc to your Facebook timeline. And basically I'm not guru (actually I think I'm not even on beginner level) of javascript, CSS and so on, however here you will see one solution that I have been able to create myself, as our developers are really busy right now (and also I told myself "why not").

Probably this solution isn't the best, as unfortunately, I'm not aware of all functions available in javascript and jQuerry. But anyway I haven't seen such post on creators so something is better than nothing, and probably more experienced creators would be able to adjust the code so it would work better.

So let's start. As I have mentioned before I have used the mix of javascript and JQuerry so it's necessary to add the library for the last one.

Copy and paste this code on the custom code page into <head> section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Next step as easy as the previous one. Copy the code below and past it on the code page into End of Page Code section:

<!–– Facebook share ––>

<script>
x$(".socialActions.cf").attr("id","socialActionscf");
</script>

<script >
x$(document).on("click", "#fbsharebutton", function(){FB.ui({method: 'feed', link: window.location.href, caption: 'Share to facebook',}, function(response){});});
</script>

<script type="text/javascript">
var $ = function (id){
return document.getElementById(id);
}
var shareButton = document.createElement("BUTTON");
var socialActions = $("socialActionscf");
var text = document.createTextNode("F share");
shareButton.appendChild(text);
socialActions.insertBefore(shareButton, socialActions.childNodes[0]);
shareButton.setAttribute("id", "fbsharebutton");
shareButton.className = "fbsharebutton";
</script>

Note: if you wish to change the text that would be displayed on the button, just change "F share" to something you else you want to be there. Unfortunately, I haven't had enough of time to find out how to assign the background image to this button, so probably somebody would be able to suggest some solutions in comments, if not I would try to do this later and update the post.

Next step is styling of your button as right now it looks really strange. Here is the code I used for this purpose, it should be pasted in design studio into the custom CSS field:

/* Facebook share button */

.fbsharebutton {height: 20px; background-color:#3b5998;border-width:0px; border-radius:3px; color: #ffffff;letter-spacing:-1px;padding:0px;line-height: 0.6;float:left; margin-right: 10px;}

button.fbsharebutton:hover { background-color:#5b72a5;}

Note: if you need to change the initial color of the button, just replace #3b5998 with the other color code. If you are not familiar with color codes you can use for example the next color picker http://htmlcolorcodes.com/color-picker/. There the code you need would be displayed on top and called "HEX", also keep in mind that it starts always from the sign "#". Also, you can change the other properties just to see what will happen if you are not satisfied with the form of the button and etc (if there will be any need to style this button a bit just let me know and will try to help). The second string of code determines the color of the button when you have put your cursor over it, it could be changed the same way I have described before, just replace #5b72a5 with the color code you wish to have.

Congratulations it's almost done.

The last step is the integration of the facebook API. You can find detailed instructions here https://creators.ning.com/forum/topics/facebook-integration-instructions. The one that should be integrated to make everything from above work is located under 3rd party integration tab (not sure whether sign in/sign up integration would serve for this purpose as well as I haven't had enough of time to test it).

Right now, the button should be in its place and it should work.

You can check what the result would be just here on creators, as I have implemented it. Such button would be displayed for any type of the content because it will appear in the share bar (under share bar I have meant the line where all sharing options are presented). There is only one thing I'm not sure about, there is the chance that all this code won't work if there is no other sharing option enabled, I hope you don't mind if I would test it tomorrow.

Hope that you will find this post useful :-)

Best regards,

Kyryl

The Ning Team.

P.S. Fabricio, I have seen your comments under the post regarding the implementation of the Facebook API. It seems that the network doesn't accept the API credentials for completely not connected with the settings reason. I will notify developers that your issue is a little bit different and probably more complicated so they will take a loot into this carefully. Sorry for the inconveniences. Besides of this, I hope you are having a great day.

Update #1:

The code has been changed a little according to the ⚡JFarrow's comment. I haven't made changes to the last longest script block as it's native javascript and basically $ is used as the variable.

Update #2 (another way):

To make your button look like this:

You should post the following code into the End of Page Code section:

<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_GB/sdk.js#xfbml=1&version=v2.10&appId=INSERT_YOUR_APP_ID_HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Note: You should inseret app id that you have gotten from facebook instead of "INSERT_YOUR_APP_ID_HERE", if you have the app of the version which is not 2.10 it won't work I suppose based on code that I see.

Then put the following code after the one you have just posted:

<script>
x$(".socialActions.cf").attr("id","socialActionscf");
</script>

<script type="text/javascript">
var $ = function (id){
return document.getElementById(id);
}
var shareButton = document.createElement("div");
var socialActions = $("socialActionscf");
socialActions.insertBefore(shareButton, socialActions.childNodes[0]);
shareButton.className = "fb-share-button";
shareButton.setAttribute("data-href", window.location.href);
shareButton.setAttribute("data-layout", button_count);
</script>

To make this button appeared in on line with the other buttons paste the following code to the custom css in the design studio:

.fb-share-button.fb_iframe_widget {float:left; margin-right: 10px;} 

Pros:

- If for some reason, the network doesn't accept your app id and app secret, this is the way around, as there is no need to integrate the app by using 3rd party integration if you are using this method. However, if you have followed all the instructions from here https://creators.ning.com/forum/topics/facebook-integration-instructions and replaced the app id in code and share still doesn't work (no action after you clicked it, or the button isn't displayed) that means that likely you haven't set your app right.

- There is the sign of the facebook on the button, so the users won't be confused with "F share" like it could have happened with the previous version of the code.

Cons:

- Don't actually know why but the button is displayed incorrectly it still doesn't look bad but not as I suppose it would be. If some one has any ideas regarding this please let me know. Thanks.

Update #3 (should be the last update as it's the best solution):

Basically it's also should work without the 3-rd party integration completed but the properly set app with the facebook still required. So here we go the step by step guidance.

Copy and paste this code on the custom code page into <head> section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Next step. Copy the code below and past it on the custom code page into End of Page Code section:

<!–– Facebook share ––>

<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_GB/sdk.js#xfbml=1&version=v2.10&appId="Facebook_app_id";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script>
x$(".socialActions.cf").attr("id","socialActionscf");
x$(".after-content").attr("id","aftercontent");
</script>

<div class="fb-share-button" data-href="" data-layout="button_count" id="fbsharebutton"></div>

<script type="text/javascript">
var $ = function (id){return document.getElementById(id);}

var container=$('socialActionscf');
if(!container){ $('aftercontent').removeChild($('fbsharebutton'));
} else { $('socialActionscf').appendChild($('fbsharebutton'));
}
</script>

Note: Please don't forget to replace the "Facebook_app_id" with the id of your app.

And the last step, you should put the following code into the custom CSS section in the design studio:

.fb-share-button.fb_iframe_widget {float:left; margin-right: 10px;} 

And it's all set. You will have the native Facebook share button with the counter, I have attached the screenshot so you will see how it would look like

P.S. After I have realized that this could be done this way I fill myself really silly, as it's so simple and working without any graphic bugs

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Hello to everyone,

    Third and I hope final update is made to this code.

    Right now this share button looks like I have wanted from the start.

    Cheers,

    Kyryl

    The NIng Team.

  • My still not working....

  • I've just added the FB code to my site and I note that it's affected the display of an activity feed on the front page. See the before and after screenshots.

    Can anyone explain why this has happened?

    Before:

    3239964?profile=original

    After:

    3239998?profile=original

    • I've removed the various codes and the type remains enlarged. It may be a cache issue but wondered if anyone can throw any light on my problem and how to sure it?

      • Hi Philip,

        I have visited your network and activity on the main page doesn't look the same like in your screenshots. As far as I have understood you haven't put back your previous styles. Could you please share the facebook code you have added? Or just let me know if it's the code that I have posted above.

        Best regards,

        Ning Team.

        • Hi Kyryl

          I added the last code on from your post above. But I removed it within 10 minutes because something affected the size of type on the Business Objectives Group's activity feed (as per above screenshot).

          Even though the code has now gone the writing is still enlarged.

        • Can you provide a screenshot of what you are seeing?

          • Hi there!

            Sorry I have checked the wrong page now I see what's wrong and it's not because of the code I have posted. as I see after you have saved the changes all signs ">" in your CSS code have been saved as "&gt;" so that's why your old code isn't working now. But there is the temporary solution that I can provide. You can put all CSS with this sign ">" into the head section in the <style> section in such case it would be working like it was before if you wish I can do this for you.

            Best regards,

            Ning Team.

            P.S. After you will be able to use the code I have mentioned, and also I'm going to report this saving issue to the tech team, for the further fix.

            • Thanks for your help Kyryl:)

              • You are welcome, Philip :-)

                Best regards,

                Ning Team.

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels