Facebook Share Option: Any idea how to create this?

ScreamingMidget · Feb 6, 2017

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?

sandandkush · Feb 6, 2017

Have you tried taking a look at the page source?

chakde · Feb 7, 2017

Search social plugins for wordpress

ScreamingMidget · Feb 7, 2017

chakde said:
Search social plugins for wordpress

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.

ScreamingMidget · Feb 7, 2017

sandandkush said:
Have you tried taking a look at the page source?

Yep, and I had a go at recreating it, but no luck.

stebenjames · Feb 7, 2017

im looking for this also.... there should be a plugin iv installed like 100s non look or have options to look like that

ScreamingMidget · Feb 7, 2017

stebenjames said:
im looking for this also.... there should be a plugin iv installed like 100s non look or have options to look like that

Yeah I'm pretty sure it needs to be customised from scratch.

BABAA · Feb 7, 2017

I am also looking for this

mariuselll · Feb 7, 2017

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

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>

stebenjames · Feb 8, 2017

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>

mariuselll · Feb 8, 2017

mariuselll said:

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

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>

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 "

Facebook Share Option: Any idea how to create this?

ScreamingMidget

Elite Member

Attachments

sandandkush

Supreme Member

chakde

Power Member

ScreamingMidget

Elite Member

ScreamingMidget

Elite Member

stebenjames

Regular Member

ScreamingMidget

Elite Member

BABAA

Newbie

mariuselll

Registered Member

stebenjames

Regular Member

mariuselll

Registered Member

Main Menu

Marketplace

Making Money

BlackHat World