Facebook Share Option: Any idea how to create this?

S

ScreamingMidget

Elite Member
Joined
Mar 17, 2013
Messages
2,493
Reaction score
590
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?
 

Attachments

  • fbshare.png
    fbshare.png
    4.6 KB · Views: 177
Advertise on BHW
im looking for this also.... there should be a plugin iv installed like 100s non look or have options to look like that
 
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
gggggggg.png


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>
 
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 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
gggggggg.png


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>
Click to expand...


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 "
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top