1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Facebook Share Option: Any idea how to create this?

Discussion in 'FaceBook' started by ScreamingMidget, Feb 6, 2017.

  1. ScreamingMidget

    ScreamingMidget Jr. VIP Jr. VIP

    Joined:
    Mar 17, 2013
    Messages:
    954
    Likes Received:
    99
    Please see attached image.

    I'm wanting to create the same thing, where they can like my Facebook page and/or share the current post/page.

    Does anybody know exactly how to go about doing this?
     

    Attached Files:

  2. sandandkush

    sandandkush Power Member

    Joined:
    May 29, 2015
    Messages:
    750
    Likes Received:
    190
    Have you tried taking a look at the page source?
     
  3. chakde

    chakde Power Member

    Joined:
    Feb 24, 2010
    Messages:
    644
    Likes Received:
    763
    Search social plugins for wordpress
     
  4. ScreamingMidget

    ScreamingMidget Jr. VIP Jr. VIP

    Joined:
    Mar 17, 2013
    Messages:
    954
    Likes Received:
    99
    I've already been down that road. I'm not sure it's a plugin. It's like it's been designed from scratch via css.
     
  5. ScreamingMidget

    ScreamingMidget Jr. VIP Jr. VIP

    Joined:
    Mar 17, 2013
    Messages:
    954
    Likes Received:
    99
    Yep, and I had a go at recreating it, but no luck.
     
  6. stebenjames

    stebenjames Junior Member

    Joined:
    Mar 30, 2014
    Messages:
    158
    Likes Received:
    18
    im looking for this also.... there should be a plugin iv installed like 100s non look or have options to look like that
     
  7. ScreamingMidget

    ScreamingMidget Jr. VIP Jr. VIP

    Joined:
    Mar 17, 2013
    Messages:
    954
    Likes Received:
    99
    Yeah I'm pretty sure it needs to be customised from scratch.
     
  8. BABAA

    BABAA Newbie

    Joined:
    Feb 7, 2017
    Messages:
    11
    Likes Received:
    1
    Gender:
    Male
    Home Page:
    I am also looking for this :(
     
  9. mariuselll

    mariuselll Newbie

    Joined:
    Mar 9, 2016
    Messages:
    25
    Likes Received:
    7
    Hy to all. here is the code . U need only to put your facebook page like and replace image s29.postimg.org/lh8bdk77b/9999.png with your image.
    This code work on Wordpress and is responsive.

    Its look like this [​IMG]

    Code:
    <style>
    .fb_share_like_box{display:block}.fb-wrapper{display:table-cell;min-width:85px;margin-right:20px;vertical-align:middle}.fb_share_like_box .fb_share_like_box_left{height:54px;display:table;margin:10px auto;border:2px solid #3c56a2;padding:0 20px}.fb_share_like_box_left{min-width:85px;border-top-left-radius:10px;border-bottom-left-radius:10px}.fb_share_like_box_left .fb_thumb{display:block;width:270px;float:left;margin-top:10px;line-height:20px;position: relative;}.fb_share_like_box_left .fb_thumb .icon{display:block;width:32px;height:32px;background-image:url( http://www.i-umor.net/src/fb_thumb.png);background-size:100% auto;background-repeat:no-repeat;float:left;margin-right:5px}.fb_share_like_box_left .fb_thumb .text{font-size:1.1em;color:#3c56a2;font-weight:700;float:left;height:32px;line-height:32px}.fb_share_like_box .fb-like{top:5px}.wrapper_fb_share{display:table-cell;width:100%}.pf-fb-share-wrapper-top{width:100%;margin:10px auto}.facebook-share-top-btn{display:table;background-color:#3c56a2;height:54px;text-align:center;border-top-right-radius:10px;border-bottom-right-radius:10px;cursor: pointer; transition: 0.3s ease-in;}.facebook-share-top-btn:hover{background: #364c8e;}.button-text{position:relative;font:700 16px/22px Arial,Helvetica,sans-serif;font-size:1.75em;display:table-cell;width:100%;text-align:center;vertical-align:middle;color:#fff;padding:0 5px}
    
    .dot-container {
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        margin: auto;
        width: 50px;
        height: 50px;
    }
    .lol-dot{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        border: 10px solid red;
        background: 0 0;
        -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        border-radius: 60px;
        height: 50px;
        width: 50px;
        -webkit-animation: pulsedot 3s ease-out;
        -moz-animation: pulsedot 3s ease-out;
        animation: pulsedot 3s ease-out;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        z-index: 999999;
        opacity: 0;
        }
        @-moz-keyframes pulsedot{0%{-moz-transform:scale(0);opacity:0}25%{-moz-transform:scale(0);opacity:.1}50%{-moz-transform:scale(.1);opacity:.3}75%{-moz-transform:scale(.5);opacity:.5}100%{-moz-transform:scale(1);opacity:0}}
        @-webkit-keyframes pulsedot{0%{-webkit-transform:scale(0);opacity:0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(.1);opacity:.3}75%{-webkit-transform:scale(.5);opacity:.5}100%{-webkit-transform:scale(1);opacity:0}}
    
    @media(max-width: 767px){.hidem,.fb_share_like_box_left .fb_thumb .icon{display:none}.fb_share_like_box_left .fb_thumb{width:auto}}
    </style>
       
    <div class="fb_share_like_box">
        <div class="fb-wrapper">
            <div class="fb_share_like_box_left">
                <div class="fb_thumb">
                    <div class="icon hidem"></div>
                    <div class="text hidem">&#206;&#355;Like our Page?&rarr;&nbsp;</div>
                   
                    <div class="dot-container"><span class="lol-dot"></span></div>
                   
                    <div class="fb-like" data-href="HERE U PUT FACEBOOK PAGE LINK" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                </div>
            </div>
        </div>
    
        <div class="wrapper_fb_share">
            <div id="facebook-share-top-gallery" class="button-facebook pf-fb-share-wrapper-top facebook-share-top-btn">
                <div class="button-text" id="shareBtn">
                <i class="fa fa-facebook-square" aria-hidden="false"></i><script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link"><img src="https://s29.postimg.org/lh8bdk77b/9999.png"  style="width:80%px;height:45px;" alt="Share on Facebook"></a>
    </span>
                </div>
            </div>
        </div>
    </div>
     
    • Thanks Thanks x 2
  10. stebenjames

    stebenjames Junior Member

    Joined:
    Mar 30, 2014
    Messages:
    158
    Likes Received:
    18
    I have added smaller share button and added like button text, But trying this on WordPress the share button does not work??

    Code:
    <style>
    .fb_share_like_box{display:block}.fb-wrapper{display:table-cell;min-width:85px;margin-right:20px;vertical-align:middle}.fb_share_like_box .fb_share_like_box_left{height:54px;display:table;margin:10px auto;border:2px solid #3c56a2;padding:0 20px}.fb_share_like_box_left{min-width:85px;border-top-left-radius:10px;border-bottom-left-radius:10px}.fb_share_like_box_left .fb_thumb{display:block;width:270px;float:left;margin-top:10px;line-height:20px;position: relative;}.fb_share_like_box_left .fb_thumb .icon{display:block;width:32px;height:32px;background-image:url( http://www.i-umor.net/src/fb_thumb.png);background-size:100% auto;background-repeat:no-repeat;float:left;margin-right:5px}.fb_share_like_box_left .fb_thumb .text{font-size:1.1em;color:#3c56a2;font-weight:700;float:left;height:32px;line-height:32px}.fb_share_like_box .fb-like{top:5px}.wrapper_fb_share{display:table-cell;width:100%}.pf-fb-share-wrapper-top{width:100%;margin:10px auto}.facebook-share-top-btn{display:table;background-color:#3c56a2;height:54px;text-align:center;border-top-right-radius:10px;border-bottom-right-radius:10px;cursor: pointer; transition: 0.3s ease-in;}.facebook-share-top-btn:hover{background: #364c8e;}.button-text{position:relative;font:700 16px/22px Arial,Helvetica,sans-serif;font-size:1.75em;display:table-cell;width:100%;text-align:center;vertical-align:middle;color:#fff;padding:0 5px}
    
    .dot-container {
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        margin: auto;
        width: 50px;
        height: 50px;
    }
    .lol-dot{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        border: 10px solid red;
        background: 0 0;
        -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        border-radius: 60px;
        height: 50px;
        width: 50px;
        -webkit-animation: pulsedot 3s ease-out;
        -moz-animation: pulsedot 3s ease-out;
        animation: pulsedot 3s ease-out;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        z-index: 999999;
        opacity: 0;
        }
        @-moz-keyframes pulsedot{0%{-moz-transform:scale(0);opacity:0}25%{-moz-transform:scale(0);opacity:.1}50%{-moz-transform:scale(.1);opacity:.3}75%{-moz-transform:scale(.5);opacity:.5}100%{-moz-transform:scale(1);opacity:0}}
        @-webkit-keyframes pulsedot{0%{-webkit-transform:scale(0);opacity:0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(.1);opacity:.3}75%{-webkit-transform:scale(.5);opacity:.5}100%{-webkit-transform:scale(1);opacity:0}}
    
    @media(max-width: 767px){.hidem,.fb_share_like_box_left .fb_thumb .icon{display:none}.fb_share_like_box_left .fb_thumb{width:auto}}
    </style>
      
    <div class="fb_share_like_box">
        <div class="fb-wrapper">
            <div class="fb_share_like_box_left">
                <div class="fb_thumb">
                    <div class="icon hidem"></div>
                    <div class="text hidem">Like our Page?&rarr;&nbsp;</div>
                  
                    <div class="dot-container"><span class="lol-dot"></span></div>
                  
                    <div class="fb-like" data-href="facebook page" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                </div>
            </div>
        </div>
    
        <div class="wrapper_fb_share">
            <div id="facebook-share-top-gallery" class="button-facebook pf-fb-share-wrapper-top facebook-share-top-btn">
                <div class="button-text" id="shareBtn">
                <i class="fa fa-facebook-square" aria-hidden="false"></i><script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link"><img src="http://3.bp.blogspot.com/-z-S37TI53oA/Ucl54sj9V8I/AAAAAAAACXs/MsUCZ-XqQaE/s1600/facebook_share_button-4.png"  style="width:80%px;height:45px;" alt="Share on Facebook"></a>
    </span>
                </div>
            </div>
        </div>
    </div>
     
  11. mariuselll

    mariuselll Newbie

    Joined:
    Mar 9, 2016
    Messages:
    25
    Likes Received:
    7

    Check again @stebenjames my code. I put Red color on what u should change.

    s29.postimg.org/lh8bdk77b/9999.png on the end of script


    HERE U PUT FACEBOOK PAGE LINK on middle of script

    Like our Page? on top of the "HERE U PUT FACEBOOK PAGE LINK "