I couldn't find any solutions on google which can make the newly introduced facebook posts embed to responsive. Does anyone got a solution or tricks? Thanks
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore">Post by Facebook Security.</div></div>
Set data-width to auto to use fluid width:
<div class="fb-post" data-href="url" data-width="auto"></div>
I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-width attribute, we can listen for width changes on our page, update the data-width attributes and then re-render the plugins.
See http://jsfiddle.net/brohde/GRcen/
Usage: $('#post').autoResizeFbPost();
Plugin logic:
On document ready:
Save original HTML of $('#post') to preserve any <div class="fb-post"> elements – the Facebook SDK removes this from the DOM.
The Fix: Update all <div class="fb-post"> elements with the correct data-width attribute (Uses $('#post').width() ).
On window resize, run The Fix again and also call FB.XFBML.parse(); to render the Facebook plugin(s). The plugin will wait 1 second after the last window resize to avoid multiple DOM updates and FB.XFBML.parse(); calls.
If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:
Can I customize how the post is displayed on my web page?
Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.
If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.
Details:
Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.
Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:
[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.
so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...
Another option would have been to just try on an http:// site only. At that point, I got the following errors:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
This confirms my suspicion -- you need an app ID. I added an app ID and it works.
Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.
Added - style="overflow-x: auto; max-width: 100%;"
To result in the following fb-post portion of the embed;
<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">
If you want a little more elegance can always implement styling on the scrollbar.
CSS Webkit Scrollbars - http://css-tricks.com/custom-scrollbars-in-webkit/
jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/
Hope someone finds this useful.
If yours posts are video, you can use Embed Videos instead of Embed Posts, they are responsive. You can get all others datas from open graph and create your own design.
https://developers.facebook.com/docs/plugins/embedded-video-player
Related
Sorry for the length, my problem is very simple, but specific.
I'm building a wordpress site that automatically imports image galleries from a Tumblr account, then styles and displays them. The backend is finished, and all that I need now is have all images in posts be displayed as thumbnail sized links. They are not behaving well with the importer (I've tried 6), so I have to edit the HTML display (rather than the images as they are uploaded).
I have decided to do this by applying class="attachment-thumbnail size-thumbnail" on all images on the site (in HTML). I have tested this and they will open the proper gallery in a lightbox as necessary so long as they belong to those two classes.
I have a two part problem.
I do not know PHP past basic syntax, and while I can intuit most of what is happening I don't trust myself to edit Wordpress source code without understanding exactly what I am breaking.
From other answers I've learned that I should most likely edit the wp_insert_attachment() function in post.php under wp_includes/. I have found the function, but don't really know where to go from there, as it does not appear to be specific to image attachments. I don't want to throw any errors by assinging image classes to non-image attachments. How do I add those two classes (attachment-thumbnail and size-thumbnail) to all post images (and only images)?
There is a single exception to this rule. I want a large image on the homepage, and have it not be a link.
It seems like the way to handle this would be to allow page attachments to be handled normally, while attachments that are both images and attached to posts should trigger this:
if [attachment is an image AND is on a post, not a page]:
<img src="https://whatever">
becomes
<img src="https://whatever" class="attachment-thumbnail size-thumbnail">
tl; dnr: ^^ that's all I need to happen, in PHP, in the right file, in Wordpress ^^
Thanks!
So likely you will want to do it via php but instead you could do it with javascript ie jQuery:
<script>
$(function() {
$("body img").addClass("attachment-thumbnail size-thumbnail");
});
</script>
Put that on any page or site header and it will add the class to all images. You can modify the search filter to suit.
You might need to re-call your lightbox initialization code too, or put this before it gets called initially.
I have placed some custom HTML, CSS, and jQuery inside an HTML box in my google site. but as the page loads, the unformatted content shows for several seconds until the loading is complete. attempts to add the following:
html { visibility: hidden; }
and then turning it back on later in jQuery do not appear to work inside a Google site.
Does anyone have another suggestion?
I don't know if this works on a google site or not, but using
<body style='display:none;'>
and then in the jQuery document ready function place
$("body").show(); has worked for me.
For some reason using style on the body statement works faster than the CSS file even if the CSS file appears in the head section.
I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.
Looks like this doesn’t work anymore. Maybe Facebook stopped respecting the “css” attribute? Does this still work for anyone?
Facebook has deprecated the Fan Box (introduced in 2009) in favor of the new Like Box. While the features of each are similar, they use different JavaScript APIs.
You can still customize the appearance of the Fan Box with your own external CSS, but it's unclear how long Facebook will continue to support this ability.
Here's some sample FBML code that shows how the Fan Box accepts external CSS:
<div id="fb-root"></div>
<fb:fan
profile_id="104818966496"
backgroundshow_faces="true"
stream="false"
header="false"
connections="8"
css="http://example.com/css/stylesheet.css?1310162522">
</fb:fan>
<script>
// Initialize Facebook JavaScript SDK
// http://developers.facebook.com/docs/reference/javascript/FB.init
window.fbAsyncInit = function() {
FB.init({
appId: '136570223089806',
xfbml: true
});
};
// Asynchronously Load Facebook Fan Box Social Plugin
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Some things to keep in mind:
Your custom CSS will be filtered through Facebook's content rendering servers and needs to be public facing. (Meaning, you'll have to upload/edit your CSS file to a web server to test how it looks when making changes).
It's recommended to append (and update) a query string to your CSS during development, since Facebook will heavily cache your CSS. After making a change, update your query string variable to instruct Facebook to fetch a new copy of your stylesheet.
Facebook will prefix all your HTML/CSS/JS elements with a "namespace" created using your application id. By doing this, Facebook ensures that your CSS can't manipulate standard Facebook elements and layouts.
Be aware, not all CSS properties and selectors are allowed, and Facebook will remove many CSS3 rules from your CSS.
Most frustrating of all though, is that Facebook seems to remove allow some vendor prefixes while disallowing others. For example, Facebook removes Webkit vendor prefixes (-webkit-border-radius) but allows Mozilla prefixes (-moz-border-radius). Annoying!
This means that rounded corners, drop-shadows and other vendor specific CSS may not appear in all browsers for your custom Facebook Fan Box. So, try as you might, you just may not be able to get your Facebook Fan Box to look the same in all browsers.
I can see this web site is somewhat over my head, but I'm having trouble finding an answer.
I want to put my header, with links to other pages, over external content. Here's why: My MLM gives me a replicated web site that they maintain. I want to add links to my blog, contact info, even meta tags to the site. I though I had it done by using an iframe. I have my content at the top, and the MLM site shows up in the iframe. (here is the link www.trivanijoanne.com) The problem is that the iframe doesn't resize when the external content changes, and it is confusing for the user to need to scroll up to see the page. Also, the pdf pages don't load inside the iframe.
I looked around online and see that iframes are a thing of the past. What should I be using to accomplish this task?
you could use PHP to get the page markup (possibly using cURL or fopen) and display it whilst putting your own content into the body section
(str_replace()
<body>
with
<body><div id='header'>my content</div>
)
and attach your own css stylesheet with
*{
position:relative;
top:-100px;
}
if you cant use PHP for some reason then this could also be done using javascript and iFrames