I started blogging on free wordpress platform and I wanted to add official twitter widget to my blog.
I add following code as text widget to blog's side bar in twenty fourteen theme.
<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3" data-widget-id="695529194466504704">Tweets by #Menuka_cs3</a>
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
but it look like this
what I was able to detect when I save the widget it lost it's <script> tags so it just show the content letters. Here is what I get when I save the widget
<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3">Tweets by #Menuka_cs3</a> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Please help. Thanks
I think you are trying to add code javasript in text widget of WordPress.com blogs. You can't.
Users are not allowed to post JavaScript on WordPress.com blogs.
JavaScript can be used for malicious purposes. As an example,
JavaScript has taken sites such as MySpace.com and LiveJournal offline
in the past. The security of all WordPress.com blogs is a top priority
for us, and until we can guarantee scripting languages will not be
harmful, they will not be permitted.
JavaScript from trusted partners, such as YouTube and Google Video, is
converted into a WordPress shortcode when a post is saved.
https://en.support.wordpress.com/code/#javascript
But if you are in WordPress.com VIP, and need to embed your Twitter timeline, you could follow this post How To Embed a Twitter Timeline Widget.
When Wordpress saves the content, it filters it because it thinks its text, not code. One possible solution is to create a shortcode like this:
Open you theme/functions.php file and paste this at the end
function twitter_shortcode( $atts) {
$twitter = '<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3" data-widget-id="695529194466504704">Tweets by #Menuka_cs3</a>
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>';
return $twitter;
}
add_shortcode( 'twitter', 'twitter_shortcode' );
Then, on your post you call the shortcode:
[twitter]
Please note that this function is completely untested but was taken from the official wordpress page at:
https://codex.wordpress.org/Shortcode_API
Try this code
<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3" data-widget-id="710522346977824769">tweets by #Menuka_cs3</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Related
the facebook share button doesn't work anymore on my website. If I click on it, the facebook popup shows this error:
I've read this question, but the problem is that I don't have any Facebook App. Also, in the source code there isn't any reference to any AppID
My website is: this
Thanks for any help
First you need to create the app , after creating you need to write the following code in the page you need to share
<body>
<script>
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-appid',
xfbml : true,
version : 'v2.5'
});
};
//load the JavaScript SDK
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your code here -->
</body>
Note: It is better if you place facebook connect code inside the
<body> tag as i did
<p>
<a rel="nofollow" target="_blank" class=" facebook ">Share</a>
</p>
jQuery(document).ready(function($) {
jQuery('.facebook').click(
function(){
FB.ui(
{
method: 'share',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},//For checking the response you can use
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
)
});
}
);
then you need to make this app live ,for this go to your developer account on facebook (https://developers.facebook.com/) .select your app -> go to App Review -> then make yes in
Do you want to make this app and all its live features available to
the general public?.
Note : Don't forgot to give email in settings->contact email
I'm trying to use Facebook comments (https://developers.facebook.com/docs/plugins/comments). The problem is they only load when a page is refreshed, so if I come from any other route I get nothing loaded. I make the call in template.rendered, which is properly executed when I arrive at the page, both when refreshed and from another route. What may be causing this behaviour? I tried to debug this, but there's nothing I can see, nothing I've tried worked. Cheers.
PS: As requested in the comments - Fb function is a generic one, wrapped up like this:
function loadFbComments() {
(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 = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=694645587257406&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
I call it in Template.rendered:
Template.item.rendered = function(){
loadFbComments();
}
HTML:
<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5" data-colorscheme="light"></div>
Router:
Router.route('/item/:_id', function () {
this.render('Item', {
path: '/:permalink',
data: function(){
var permalinkVar = this.params.permalink;
return Items.findOne({permalink: permalinkVar});
},
});
});
This is really just the standard code, I guess the issue is to do with Iron Router, but it's just a guess.
I've ended up loading entire comments section into another template that then is loaded once in layout template (my main template). I use the comments in a modal anyway, so it's hidden by default. This worked for me.
You need to reload the template that contains fb comments.
You can do this using tracker dependency or updating a session variable for example.
how to make a meteor template helper re-run/render after another template has rendered?
i have been trying to get the Facebook SDK for JavaScript working on my wordpress website for a few days now but it keep failing for some reason
i followed the exact steps on this page https://developers.facebook.com/docs/javascript/quickstart/v2.2
i got it to work yesterday (the like button showed up in my header) but when i refresed the website today it was gone and the SDK code stopped working.
i have no idea how it happend since i didn't change anything on the website so i redid the whole thing but without results.
this is how most of my header.php (where the code is suppose to be) looks like
</head>
<body <?php body_class(); ?> data-layout="<?php echo esc_attr( stag_site_layout() ); ?>">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<?php
/**
* Aesop Story Engine theme hook.
*
* #since 1.1.0
*
*/
do_action('ase_theme_body_inside_top');
?>
<div
class="fb-like"
data-send="true"
data-width="450"
data-show-faces="true">
</div>
as you can see the code is directly below the body code. and below that the facebook like code, but it's not working...
if anyone could help me with this than that would be really great.
Thanks!
You need to create a new App ID here:
https://developers.facebook.com/docs/opengraph/getting-started#create-app
Choose "Website" as the platform.
Once you create a new app, you will see your unique code for "appID". In your code above where it says "your-app-id", place in your new unique code.
Also, your code can be updated to v2.3:
https://developers.facebook.com/docs/javascript/quickstart/v2.3
I've been looking for an up-to-date walkthrough of including Facebook's comments plugin in GA's social tracking system. There are a few tutorials available but all are dated and don't seem to work. Does anyone here have any suggestions?
Specifically, I'm trying to get the GA asynchronous tracker (ga.js) to report comments left with Facebook's XFBML version of the comments plugin. Any help would be appreciated.
Here's what I've done so far, though it doesn't appear to work:
Added this to the ga_social_tracking.js provided by Google:
FB.Event.subscribe('comment.create', function(opt_target) {
_gaq.push(_ga.getSocialActionTrackers_('Facebook', 'Comment',
opt_target, opt_pagePath));
});
FB.Event.subscribe('comment.remove', function(opt_target) {
_gaq.push(_ga.getSocialActionTrackers_('Facebook', 'Uncomment',
opt_target, opt_pagePath));
});
Added xmlns:fb="http://ogp.me/ns/fb#" to the document's opening .
Linked to that document in the page :
<script src="/includes/ga_social_tracking.js"></script>
Have installed the Facebook JavaScript SDK immediately after
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<MYAPPID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);
</script>
Called the Facebook comments plugin via the XFBML method, adding _ga.trackFacebook and notify="true":
<script type="text/javascript">_ga.trackFacebook();</script><fb:comments href="http://example.com" width="450" num_posts="10" notify="true"></fb:comments>
Clearly I've done something wrong here as comments are not tracking in GA's Traffic Sources/Social/Plugins reports, though Facebook Like/unlike, Twitter and even LinkedIn (after customization) are working.
Any help would be greatly appreciated. Thank you.
My goal is to have dynamic Facebook like buttons using a php variable in the url. I figured I'd first just try inserting a static like button to test it out, but I'm encountering some issues. When I first loaded the page, after inserting the FB code, the like button displayed correctly. Though, every time after that it just displays a white box, the size of the like button content, which flickers, then disappears.
My situation may be unique as this is a wordpress site, but I don't use any of the wordpress features, such as the post loop, or any design layout features. I just use wordpress to publish posts, which get forwarded to my own database, and I display them with my own code.
Right after <?php get_header(); ?> in my index.php, I've put:
<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 = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=293105884122762";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then in a random place on the site I've put:
<fb:like href="mysite.com" send="false" layout="button_count" width="450" show_faces="true"></fb:like>
I know I need to add the XML namespace for IE, but I figured it wasn't necessary yet.
If anyone has any suggestions, I'd really appreciate them.
include the below lines of code on the page where your like button is:
<script>
if (typeof(FB) != 'undefined' && FB != null ) {
FB.XFBML.parse();
}
</script>
hope it helps. this had solved my very similar problem.
The Facebook code just runs inline, so if it isn't included at the bottom of the page, you have to call FB.XFBML.parse() to re-parse the page HTML looking for <fb:/> tags. Another option would be to either place this javascript at the bottom of the page, or better yet use a hook in your functions.php to include it in wp_footer.
<?php
// this function will output the facebook javascript code
function add_facebook_javascript(){ ?>
<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 = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=293105884122762";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<?php
}
// this will hook your function to the "wp_footer" action
add_action('wp_header', 'add_facebook_javascript');
?>