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

  • Hi. I have implemented this on my site kpopway.com  and it works, but all the other buttons stopped working (twitter share, G+). Any fix for this? Thanks!

    Kpopway - Kpop Music Radio 24/7
    Enjoy the best kpop music radio 24/7 and join our community. Listen to the latest kpop music hits and meet people all over the world.
    • Hi there!

      Sure, since the last update made to the social buttons it's possible that they stop working if you insert there any fb share option with the code. However, it could be fixed with the following line of the code .fb-like.fb_iframe_widget { display: inline-block!important;} that should be placed in the custom CSS section of the design studio.

      Best regards,

      Ning Team.

  • Worked like magic! Thank you so much!

  • Ok, the G+ and Twitter share are now working fine, but the "Network like" is not working, in those places where the Facebook share appears. Any fix for this? Thanks!

    • Hi there!

      Please check it now, I have corrected the code a bot and it should be fine, well at least on my PC on Chrome and Firefox everything is clickable now.

      Best wishes,

      Ning team.

      • Cool, I have tested it on mobile also and on PC with Explorer too. Many thanks!

        • You are welcome :-)

          • Facebook sharing suddely stopped working. Any clues on this? Thanks!

            • Facebook and Instagram were down for a period today.  I wonder if your issue has anything to do with this https://creators.ning.com/forum/topics/facebook-requiring-https-on-...

               

              Facebook requiring https on sharing your website
              Just received this from Facebook. How will effect our sites: We're requiring that all uses of Facebook Login come from pages served over HTTPS by Oct…
            • Hello!

              Please check my reply here.

              Best regards,

              The NING Team

              Facebook Sharing Issue
              Hello. I am having an issue when sharing blog posts to Facebook in my site (kpopway.com) Please help with this. Thanks!
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