How to make Facebook Like and Twitter Follow Pop Up Using Popup plugin?

Hey,
So I want to create a social popup so that once user visit any page, he/she first sees a popup with facebook like button and twitter follow button. How can I insert the iframe codes of these button to my popup or is there any shortcode to do so?

Here Is an example snapshot of popup which I want to show . Thank you.

    Rupok

    Hi themophiles, hope you had a wonderful day.

    You can simply create a PopUp and put your shortcode for showing social sharing icons in the popup content area. But for using shortcodes, go to "Dashboard > PopUp > Settings > PopUp Loading Method" section and set Load PopUp Using "Page Footer".

    In my test site, I installed This Plugin and it provided me the following shortcode:
    [wp_social_sharing social_options='facebook,twitter,googleplus,linkedin,pinterest,xing' twitter_username='arjun077' facebook_text='Share on Facebook' twitter_text='Share on Twitter' googleplus_text='Share on Google+' linkedin_text='Share on Linkedin' pinterest_text="Share on Pinterest" xing_text="Share on Xing" icon_order='f,t,g,l,p,x' show_icons='0' before_button_text='' text_position='' social_image='']

    I simple put this in the content area of my PopUp and it's showing fine in my test site. Please check attached screenshots for reference.


    Please let us know if you have any confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

    themophiles

    Hello Rupok. Thanks for the reply. I am already using addthis social share buttons and also have inbuilt share button provided by the premium theme that I use . So, I don't want to add one new plugin. Other thing is that , this plugin appears to provide share options but I want the like/follow button not the share button.

    In fact my requirement is very simple. Have a look at the snapshot I shared in first post of this thread. I only want to add a facebook like and twitter follow button on the popup screen , no SHARE BUTTON as I already have share button at various places. I want to increase my facebook page likes so, want to add this for people who has visited my site from facebook.

    Please have a look at my website, I hope you will be able to figure out my requirement. The iframe code for facebook and twitter like button can be easily found . For example: https://developers.facebook.com/docs/plugins/like-button

    Ash

    Hello themophiles

    The iframe is for page plugin, I don't think there is any iframe code for like button, I could be wrong though.

    If you want to insert the like box (currently page plugin) you can simply put the iframe code in the editor:

    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcreativemalaysia123%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=484027141776585" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

    It will show like the screenshot.

    If you want to show like button, and just in case you have the iframe code, just put in there and it should work.

    If you don't have iframe code, then you have to put the following in header.php just after body tag:

    <!-- Load Facebook SDK for JavaScript -->
    	<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_US/sdk.js#xfbml=1";
    	  fjs.parentNode.insertBefore(js, fjs);
    	}(document, 'script', 'facebook-jssdk'));</script>

    Then you can put the following in the popup editor:

    <!-- Your like button code -->
    	<div class="fb-like"
    		data-href="http://www.your-domain.com/your-page.html"
    		data-layout="standard"
    		data-action="like"
    		data-show-faces="true">
    	</div>

    Change the url in data-href attribute.

    Hope it helps Please feel free to ask more question if you have any.

    Cheers
    Ash

    themophiles

    Thank you Ash for such a detailed reply. The like button also has iframe code , Please have a look at this link and click the "iframe" section on the popped-up page after clicking "generate like button"

    Anyway, My biggest issue is to be able to write a simple line "Like us on Facebook" before the like button in the same horizontal line.

    Please check the attached snapshot to see what I want as a pop-up . Being non-programmer I am not able to write this text in the same line. When I tried, the like button appears in the second line not in the same line. Can you help me in writing such a box for me?

    Thank you.

    Nithin

    Hi themophiles,

    Hope you are doing good today.

    Please check the attached snapshot to see what I want as a pop-up . Being non-programmer I am not able to write this text in the same line. When I tried, the like button appears in the second line not in the same line. Can you help me in writing such a box for me?

    Since I don't have access to your code, I'm not sure how you have implemented the code, I just wrote an outline on how it could be, could you please try the code below, and check whether it works:

    <div class="fb-box">
    <h2 class="fb-head">Like us in facebook</h2>
      <div class="fb-like" data-href="https://www.facebook.com/WordPress/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>

    You'll then have to add the CSS in your child themes style.css file:

    .fb-box {
    	width: 300px;
    	position: relative;
    }
    .fb-head {
    	font-family: Lucida Grande,Verdana,sans-serif;
    	font-size: 19px;
    	color: #3b5998;
    	float: left;
    }
    .fb_iframe_widget {
    	float: left;
    }

    This should give the desired look for fb, please let me know if I'm missing anything. It would be easier if you could enable support access, so that we could test your code out.

    Have a nice weekend.

    Kind Regards,
    Nithin

    Nithin

    Hi themophiles,

    Will you please help me to make it appear ( the like box) in the same horizontal line ( where the text "Like Us On Facebook" is written)

    Thank you for sharing the screenshot. Once I'm able to check your code, I could give the exact CSS. Could you please enable support access, as the above code do appear fine in my default theme ie in horizontal line. You can grant access from WPMU DEV > Support > Support Access > Grant Access or see this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Or you could share the page where the Popup appears, I'm not able to find the popup in your website, please advise if I'm missing anything.

    Have a nice weekend.

    Kind Regards,
    Nithin

    Rupok

    Hi themophiles, hope you had a wonderful day.

    Thanks for granting Support Access. I checked the issue on your site, and added the following custom CSS code in "Appearance > Theme Options > Styling Options > Custom CSS" section:

    .fb_iframe_widget {
      left: 190px;
      top: -40px;
    }

    Now like share button and text are showing in the same line. Can you please check and confirm?

    Have a nice day. Cheers!
    Rupok

    Rupok

    Hi themophiles, hope you had a wonderful day.

    I went to tomatoheart.com but I can't see that top left "Like Us On Facebook" area anymore on your site. Please check the attached screenshot for reference.

    Can you please check and confirm? We can give you CSS code as soon as we can see that div live and we can inspect that element.

    I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok