-
The upcoming official release of v1.0.88 includes a social connect shortcode with custom options to allow you to plug social connect apart from your main login/register form, anywhere you wish – whether the user is logged in or not.
The social shortcode can be integrated in post content, or via php method:
[userpro_social_connect] is the shortcode!
PHP way:
The options are:
– You can show/hide facebook, twitter, google+. This means that you can enable / disable specific button to allow users to connect, you can also control the width of button(s), plus button title for each network.
e.g. facebook_title=”Sign In with Facebook”
e.g. facebook=0 will turn off facebook.
e.g. width=”300px” will make the button width 300px
e.g. twitter_title=”Sign with Twitter!” will adjust the button title for Twitter.
etc.
This new feature DOES NOT USE IMAGES, It uses css only plus customizable text/language as you see. So it will fit in any site, size, and no images required.
This long awaited shortcode is already available in the “developing v1.0.88” in customer portal.
Many thanks ! 🙂
Fantastic news!
Is there a way I can download v 1.0.87 though, as my profile photos are unable to upload.
Wow Ahmed, just tried this out and it is fantastic. Really great idea, so thank you to whoever suggested it! This provides a lot of flexibility to push website users to register with social connect rather than the regular way, and once you provide an update for facebook viral marketing I think this new shortcode in combination with viral marketing will really help a website to increase it’s membership! I also love how it is CSS based and not image based It will look great on retina devices!
Great work
@Robin Can you please tell me what’s the problem you have with photo upload in v1.0.88? It should be very little conflict, and I can help you fix it. 🙂
@FXsuccess UK This update is available soon. 🙂
@peem Yes, I love that it does not depend on Images anymore, and people always asked for BIG social connect buttons, because this invite more users to sign up. The nice thing about shortcodes is that you can plug it anywhere. The width of button takes the entire width of its column 100% by default, or custom width you specify via shortcode. So you can place it floated next to login form, or place it above everything to give it more priority and focus, etc. 🙂
Many thanks – I am still working on v1.0.88 and hope to do some more things before I release it soon
Hi @peem I’ll document it as soon as I release this version in DOCS site, to turn off google, google=0 here are all args:
$defaults = array(
‘width’ => ‘auto’,
‘facebook’ => 1,
‘facebook_title’ => __(‘Login with Facebook’,’userpro’),
‘facebook_redirect’ => ‘profile’,
‘twitter’ => 1,
‘twitter_title’ => __(‘Login with Twitter’,’userpro’),
‘google’ => 1,
‘google_title’ => __(‘Login with Google+’,’userpro’),
);@ahmed You may have an issue with hiding the google+ button in the shortcode. google=0 does not hide the google+ button for me. The facebook and twitter =0 works just not google+.
This is the shortcode I used: [userpro_social_connect facebook=0 twitter=0 google=0] The result is Google+ is the only one that shows.
With this shortcode [userpro_social_connect google=0] all the buttons show when google+ should be hidden.
Can you check this on your end please
Strange 🙁 That code [userpro_social_connect facebook_title=”Sign In with Facebook” width=”300px” google=0]
hides google for me. :/ That’s strange.
Hey! Not at all 😉 I am so concerned about similar issues, and I am happy that it works now!
Ok thought I would share the CSS changes I have made to this new feature in case anyone wants to improve the look of the buttons. For the style of my site I have removed the social icon in the button just to leave the text. Here is the CSS I added/changed to achieve this effect:
div.userpro-social-big a {
padding: 20px 20px;
font-size: 19px;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-bottom: 5px solid rgba(0,0,0,0.25);
-webkit-font-smoothing: antialiased !important;
font-weight: 400;
text-align: center;
transition: 0.25s;
}div.userpro-social-big i {
display: none;
}div.userpro-social-big a:hover {
opacity: 0.85
}And if you want the buttons to include the icon, use the following CSS:
div.userpro-social-big a {
padding: 20px 20px;
font-size: 19px;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-bottom: 5px solid rgba(0,0,0,0.25);
-webkit-font-smoothing: antialiased !important;
font-weight: 400;
text-align: center;
transition: 0.25s;
letter-spacing:0.5px;
}div.userpro-social-big i {
margin: 0px 15px 0px 0px;
float: none;
}div.userpro-social-big a:hover {
opacity: 0.85
}I’m adding a “size” option to dynamically show button as large, medium, or small to add more flexibility and also include the new css, plus option to turn on/off icons. 🙂
The plugin will updated shortly
You must be logged in to reply to this topic.