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
Replies
Thanks for sharing Kyryl!
I'll test it out... one thing i might add as a tip on the tip is when you insert jquery scripts into Ning you must always add 'x' before '$' like so:
<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 x$ = function (id){
return document.getElementById(id);
}
var shareButton = document.createElement("BUTTON");
var socialActions = x$("socialActionscf");
var text = document.createTextNode("F share");
shareButton.appendChild(text);
socialActions.insertBefore(shareButton, socialActions.childNodes[0]);
shareButton.setAttribute("id", "fbsharebutton");
shareButton.className = "fbsharebutton";
</script>
thanks again!
Hi there!
Thanks for the information.
I have made necessary changes to the post.
Best regards,
Ning Team.
I boosted padding from 0px to 10px
But after going through the instructions, and the instructions for the Facebook integration, I got this error message. I think I need to step back for a while.............Facebook hates me.
Hi Kos,
In the regular situation I won't request such information but could you please sent your AppID and AppSecret altogether with the screenshots of the facebook app settings that you have to our email address (I know you know it but it's basically for the other creators who will be reading this post) which is support@ning.com. Also please mention that this email should be passed to me.
Thanks,
Ning Team.
I'm just giving up for now. Will revisit it when I feel a bit better.
Hi Kos ... what happens to you ... I irradiate you ... light love of life ... soon on foot warrior ...
Manuel it's not you *lol* - it's me dealing with my illnesses. It will improve. I just need to lay back and give it some time.
Confío ... Puedo ayudar ... la vida escucha ... Yo entiendo la salud ... no la hago dura ... el corazón es amor ... usted sabe que soy ... cuando es necesario ... comunicar ... the translator is not much of a friend of mine ... regards ...
Hi Kos,
I have updated the code a little, please check the second update it could be useful for you.
Best regards,
Ning Team.
Hi Alex,
Yes, I know, unfortunately right now the resolution depends on the developers.
I have decided to create this post as the work around of the existing issue, basically because I have succeeded with it here on creators, so I have decided that it might work as the temporary solution before the fix has been released by the tech team.
Best regards,
Ning Team.
-
1
-
2
-
3
-
4
-
5
of 5 Next