I hope someone can help me with my problem with tumblrs lightbox.
I only have very basic html knowledge and because of that, I thought, it might be a good idea to work with tumblr themes. Everything works fine, but if you click on a picture on my site, tumblrs lightbox shows up and its back button does not bring you back to my main site, instead it shows the picture on another site.
Thats annoying, but I do not know how to change the options of the tumblr lightbox back button?
http://andreasschmitten20062010.tumblr.com/
Is there anyone here, who knows something about tumblr and how to change this?
Also it would be great if you could move through the other pictures from the lightbox.
Thank you very much
Andre
Get rid of the {LinkOpenTag} and {LinkCloseTag} surrounding the image tag.
Eg.
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{LinkCloseTag}
becomes
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
Related
I'm trying to debug/troubleshoot why the content that is displayed in the share link/window continues to show our browser detection content which we do not want displayed. I've updated our code to detect the Facebook crawler and not show this content if it's detected but the share link is still showing this. I've even tried to use the Facebook debugger to refresh the cache but it is still not working.
The share button code I'm using is this:
<div class="fb-like"
data-href="https://www-dev.hoopladigital.com/title/11042831"
data-layout="button_count"
data-colorscheme="dark"
data-action="like"
data-show-faces="true"
data-share="true"></div>
So either the cache is not being cleared, or my browser detection code is still getting executed when it shouldn't be. The text pointed to in the arrow in this screenshot should not be getting displayed.
How do I go about troubleshooting this?
http://note.io/LvbN5K
Your og:description is empty, so most likely Facebook takes the first text content that looks relevant to it … so provide a description!
I have a blog theme which does not include captions in photo posts. I have been successful with plugging in {block:Caption} {Caption} {/block:Caption} before {/block:Photo}, but the caption seems to be floating on the background and not inside the post box as seen below:
How do I include the caption to be apart of the same box as the date?
Any help is appreciated!
It would be much easier if you posted the relevant code here. I don't know what theme you are using but if you take a look at this site http://www.tumblr.com/docs/en/custom_themes you'll see that dates are rendered by {block:Date} {/block:Date}, {Timestamp}, {DayOfYear} etc. Take a look and see which one suits you theme. When you have found it, simply Ctrl + F in you code and find where in your HTML code the date box is rendered and then put the {block:Caption} {Caption} {/block:Caption} inside.
I am having a problem getting a div containing facebook like/send buttons to expand when the buttons are clicked. I have searched and tried and tried to fix this, but I'm hitting a wall. I believe it has something to do with how the buttons render an iframe, but I'm not sure.
Here's the code, plain and simple (with an example link for og data).
<div id="fb_btns">
<fb:like href="http://www.imdb.com/title/tt0117500/" data-send="true" layout="button_count" width="450" show_faces="false" ></fb:like>
</div>
and the non-expanding div can be seen here
http://spadeballink.com/GALLOWS/TheGoddamnGallows.html
Any help counts! Thanks in advance!
*Also there is no css declaring the height of this div, the only heights declared are for html and body to be 100% (needed for the background image).
Are you using XFBML or Iframe version of like button? For Iframe version you need to use layout=standard for people to be able to see fly-out comment box.
is it possible to create simple Like button for fan page? When I create official Like button, insert my fan page URL in form, it always generate button with image and page title as it is Like box not Like button. I just want simple Like button only with "Like" label and users count.
Is this an issue or default behavior, or just my misunderstanding?
Thanks for advice
Tomas Teicher
Did you mean you want this button?
http://developers.facebook.com/docs/reference/plugins/like
Alternatively, you may use AddThis widget - They even provide analytics for you.
http://www.addthis.com/
I use the widget on this website: http://muamalat.com.my/consumer-banking/financing/mortgage/
I must have misread your question. In that case I've only come across this: http://developers.facebook.com/docs/reference/plugins/like-box/
Uncheck show faces, stream and header; that's the cleanest you could get. Is this what you're looking for?
I don't think AddThis has that feature you speak of. :)
One way to only show the like button by itself is to hide the top part of the button by setting the iframe dimensions to the size of the button: 60x20.
<iframe src="http://www.facebook.com/plugins/like.php?&href=&send=false&layout=button_count&width=60&height=20&show_faces=false&action=like&colosheme=light"
allowtransparency="true" frameborder="0" scrolling="no"
style="width: 60px; height: 20px;">
</iframe>
If you are using Iframe you need to place an http or https: because >iframe starts as
<iframe src="//www.facebook.com/plugins/likebox.php?href= ................></iframe>
and you need to place
<iframe src="**http:**//www.facebook.com/plugins/likebox.php?href= ................></iframe>
The above answer did help me in finding that out.
If i read this correct, then it is definitely possible:
https://developers.facebook.com/docs/reference/plugins/like/
Put in your Page URL, for example: https://www.facebook.com/bladauhu
(that is my own page)
Uncheck Send Button, use Layout Style "button_count", uncheck Show Faces. Leave the rest as it is and click on the "Get code" button. Use the HTML5 or XFBML Version.
For me, this works just like every other Website and it shows the correct number of likes from the Facebook Page. No additional Images, just the plain and simple Like button.
Adding data-layout='button_count' to the HTML5 version worked for me:
<div class="fb-like" data-href="http://facebook.com/wewantoo" data-send="false" data-width="90" data-show-faces="false" data-layout='button_count'></div>
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.