I am working on a share button on facebook. I want it to display a custom message in the description of the content sharing but I am unable to do so. Below is the code that I am working on,
<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_button {
display: -moz-inline-block;
display:inline-block;
padding:1px 20px 0 5px;
height:15px;
border:1px solid #d8dfea;
background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
}
html .fb_share_button:hover {
color:#fff;
border-color:#295582;
background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
text-decoration:none;
}
</style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;www.adsterr.com>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>
Please help me out with the values of u,t and other parameters so I can make it work. Thanks
The facebook share button has been deprecated, you can read it here: http://developers.facebook.com/docs/share/
The Share button has been deprecated in favor of the Like button, and
will no longer be supported. Please use the Like button whenever
possible to drive maximum traffic to your apps.
Instead of that you can either use one of the social plugins:
https://developers.facebook.com/docs/plugins/ (such as the Like Button, Send Button or the Like Box) or open the facebook dialogs yourself using the facebook javascript sdk: http://developers.facebook.com/docs/reference/javascript/FB.ui/
Related
I'm in the process of building a web site that needs to be viewable on mobile devices. When viewing it in safari on an iphone 4s it looks great. If I view it chrome on the same device none of the styles for the navigation list show up. It ends up looking like basic html links. The links in question are, Va Leadership, Nursing, and Anesthesiology staff
Bellow is a link to the live dev site, as well as the CSS.
link: http://xeroproject.com/sqwm/category/resources/
CSS:
#leftNav{
max-width:402px;
}
#leftNav ul li a {
list-style-type: none !important;
width:100%;
text-decoration:none;
font-weight:bold;
font-size:24px;
color:#FFF;
}
#leftNav ul a:hover {
color:#85b6ce;
}
#leftNav ul li:nth-child(odd){
padding:10px;
margin-bottom:5px;
background: #0b5a42 url('images/arrow_dark.jpg') no-repeat right;
}
#leftNav ul li:nth-child(even){
padding:10px;
margin-bottom:5px;
background: #688879 url('images/arrow_light.jpg') no-repeat right;
}
The site renders fine for me using Google Chrome for iOS Latest on my iPhone 4s (at least it looks exactly the same as it does on Safari running on the same phone).
Try clearing Chrome's cache.
If that doesn't help, connect your iphone to Fiddler2, and see what requests are being made by your site, and see if the style-sheet request is erroring out.
I have just added new Facebook like box for my website but unfortunately the dark color scheme not function properly.
Attached is the iframe code:
<iframe style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; WIDTH: 250px; HEIGHT: 520px; OVERFLOW: hidden; BORDER-TOP: medium none; BORDER-RIGHT: medium none" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fifocussolutions.com.my&width=250&height=520&colorscheme=dark&show_faces=true&border_color&stream=true&header=true& " frameborder="0" scrolling="no"></iframe>
It will not allow me to add in allowTransparency code inside the iframe.
Can you help?
The facebook "lightbox" effect isn't accomplished with iframes. It's done using absolute positioned divs. There are a number of javaScript libraries out there that make it very easy to create a facebook-like lightbox. Google for facebook lightbox and select one you like.
I have a page with an image. When you hover over the image, a slightly transparent white div appears on top of it with a couple of action buttons and some info. When you move your mouse off the image, the info/button box disappears (display: none).
In that hidden/mouseover box is a facebook like button. It shows up perfectly fine in all other browsers, but As you might have guessed, it has strange behaviour in the notorious IE browsers.
In IE7 - IE8, the like button appears for just a second and then disappears. It still leaves a space in the design like when it would be there, it just isn't. Doesn't matter if I rollover first or not. Button appears for a second, then disappears.
In IE9 however, the button does appear and stays there. When I rollover a second time though, the iframe gets a white background, even though the first rollover got me a transparent background.
html code of hidden mouseover div:
<div id="hoverPopup">
<div class="fbLikeWrapper">
<div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</div>
<a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button1</div>
<div class="btn_small_suffix"></div>
</a>
<a href="##">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button2</div>
<div class="btn_small_suffix"></div>
</a>
</div>
css code:
.fbLikeWrapper
{
/*width : 50px;
margin-left : auto;
margin-right: auto;*/
}
.fbLikeWrapper div
{
display : block;
line-height: normal;
}
screen captures:
IE9
IE7
Try this:
#hoverPopup .fb-like {
width: 47px;
}
.fbLikeWrapper
{
display : inline-block;
width : 51px;
text-align : center !important;
margin : 30px auto 10px;
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
overflow : hidden;
}
If this not helps, may the javascript causing the problem, not the css and you have to share more information (javascript, html, etc.)...
I found the answer through one of my colleagues who's had a similar problem.
When the page was loaded, the popup needed to be hidden, so I gave them a class that said display:none;. When I hover I toggle the class on and off. In every browser that works with a facebook like button, with IE it doesn't.
I don't exactly know why yet, but I did find out that if I use the jquery .hide() and .show() functions to toggle and initially set the hidden div and not use a class, it works like a charm.
Case closed. IE continues to suck.
I have always wanted to add Facebook share buttons to my applications, but the problem that I have is that they all look different. I see sites like this that have custom designed share buttons. Does anybody know a good tutorial, or have any pointers, about how to tackle this?
Sharing something one facebook is quite easy, here is the HTML for my custom share button.
<div id="share_div">
<div id="share">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
Share
</a>
</div>
</div>
Where all the {{variables}} are to be replace by correct value :
fbapp_id is the id of your facebook application.
link_url is a link attached to the shared content (like a link to your site)
and share_message|urlencode is the message that is shared and it needs to be urlencoded.
Also here some css to style this like a real facebook button :
#share {
border:1px solid #0D386F;
background-color:#5D7DAE;
height:24px;
width: 100px;
}
#share a.click {
font-size:13px;
font-weight:bold;
text-align:center;
color:#fff;
border-top:1px solid #879DC2;
background-color:#5D7DAE;
padding: 2px 10px;
cursor: pointer;
text-decoration:none;
width:80px;
display:block;
}
But I let you the pleasure of customizing as you like, the important part being the href of the a tag
Does it answer your question ?
I have a facebook iframe application with share functionality. Currently when i share something its showing the custom text Comment · Like· Share when posted on profile page.
I want to give customized text like view result etc.
How can i achieve this please guide me ?
I am using the code
<script>function fbs_click() {u='<?php echo $shareURL;?>';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_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://b.static.ak.fbcdn.net/rsrc.php/z … 8q506x.gif) no-repeat top right; } html .fb_share_button:hover { color:#b5b8d3; border-color:#295582; background:#3b5998 url(http://b.static.ak.fbcdn.net/rsrc.php/z … 8q506x.gif) no-repeat top right; text-decoration:none; } </style> Share
Thanks
If you're using Facebook's dialogs you can specify custom action links with your posts, but if you're using the old sharer.php this isn't possible.