Google+ Follow Button - javascript

I'm adding social media button to a website to follow / like a specific page and looking through Google's documentation on adding a follow button to your website, all I can see is their pre-made buttons:
https://developers.google.com/+/web/follow/
What I want to do is have a little image of their logo and when this image is clicked, open up a box in a popup or new window to follow a Google+ page. Is there any URL I can put as a href around the image or some JavaScript to use instead of having to use the button that Google's JavaScript generates as it is a total pain to style.
Many thanks.

See The Demo Here
<a href="https://plusone.google.com/" onclick="popUp=window.open('https://plus.google.com/share?url=YOUR WEBSITE URL', 'popupwindow', 'scrollbars=yes,width=800,height=400');popUp.focus();return false">
<img src="http://placehold.it/50x50/" alt="Google+" title="Google+"/>
</a>

Related

get only facebook profile picture using embed code

I am trying to get only facebook profile picture using embed code but page name and like button display in the preview.
<div class="fb-page"
data-tabs=""
data-href="https://www.facebook.com/facebook"
data-width="10"
data-hide-cover="true"
data-show-facepile="false"
data-small-header="true">
You might be able to put the button in a div with a fixed width and overflow hidden, but ultimately this widget is not intended for this use.
There is an API endpoint intended for this use, though - /[user/page ID]/picture.
So, you can simply do <img src="https://graph.facebook.com/page-id/picture">.
For example: https://graph.facebook.com/facebook/picture

Image Thumbnail Load behaviour (Pretty Photo Lightbox functionality preferred)

I'm trying to make a picture portfolio like the first demo example on this page http://www.no-margin-forerrors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto . However, instead of have it invoke an image when clicked it takes me to another page, I'd like it to have a pop up image instead. I had already checked possibilities in theme settings but none available.
This is the link http://tile.johnzuh.com/unsere-fliesen/ to the Page with this behaviour. You will realise that once u click on the gallery image item it sends you to another page using this
<a itemprop="url" class="eltdf-pli-link" href="http://tile.johnzuh.com/portfolio-item/home-interior-2/" target="_self"></a>
linked element to image. This is an unexpected behaviour
How it should behave
I would appreciate a behaviour similar to that on this page instead http://tile.johnzuh.com/portfolio-item/plava-identity-design-4/
Once you click on an image it should invoke a bigger image from thumbnail.
I see it uses
<a itemprop="image" title="portfolio-single-13" data-rel="prettyPhoto[single_pretty_photo]" href="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg">
<img itemprop="image" src="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg" alt="s" />
</a>
It uses the prettyPhoto element instead of linking to the href. How do i adopt this ? Some quick workarounds, examples will be appreciated.
Issue was solved by changing some dynamic settings in theme.

How to display a link on my page

I want to display google link like that in my page.
whenever we post a link on a Facebook page its look like as the above picture. how to do the same in my webpage .how to display the google link like that
That looks like a link shared on Facebook. The styling of a link like that doesn't happen automatically. You'll have to use html and css to format a link to look like that yourself.
Here's an example using pseudo html. You'd need to actually style this yourself to achieve the desired result. If you don't know how, some websites to start learning html / css are codecademy.com & w3schools.com
<a href="link_url">
<img src="google_logo_url" />
<div>
<h3>Google</h3>
<p>Search the world's information....</p>
</div>
</a>
Embed.ly can be useful for you. It takes a URL and generates a piece of code, which you can paste in your HTML document to get similar look to that of your picture. Below is an example of its code in usage
From this link you can access it for free: http://embed.ly/code

Facebook share button

I want to add Facebook share button to my site. But when I use the code given by Facebook, it doesn't show any FB logo image in button style & also doesn't count any share. Please help me figure out a better code.
Currently, I'm using:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
Share on Facebook
</a>
The easiest way to add Facebook share button would be to visit http://www.facebook.com/share_partners.php and copy the code and paste it in your webpage after replacing the text "url" with the actual URL of the page you want to share. If it is dynamic content, you can use the variable or object name.
<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>
<img src= "http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981" alt="" />
Take a look at the official documentation: Facebook For Developers: Share Button.
If you merely click the "Get Code" option on the Facebook Share Button Configurator & Generator, you'll see that the URL generated is rather simple:
https://www.facebook.com/sharer/sharer.php?u={yourURLhere}
At least it seems that way to me:

I need help making a lightbox with a flash game embedded inside it

I am making a games website and I have little knowledge in computer language and I need to create a lightbox that will appear when a image is click linking to this box. The box doesn't need to be too fancy or anything, all i need is for it to have an embedded flash games at a set size without scrolling. I have had a look at jquery and mootools but I find them confusing and don't know how to embed a flash based game inside them, so any help would be very useful.
PrettyPhoto jQuery makes it easy to lightbox media such as Flash.
From their example:
<a title="Flash 10 demo" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[mixed]">
<img src="/wp-content/themes/NMFE/images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="50"/>
</a>
Put a link to the SWF with rel=prettyPhoto[groupName] in your anchor.
Within the anchor, you may place an image thumbnail.
<a href="flash.swf" rel="prettyPhoto[group]">
<img src="thumbnail.png" />
</a>
Download source.
One simple solution that I think might be good looking would be having a container that's hidden from start. When you click at the image this container turns visible. This way you don't have to embed flash to jquery/javascript but to html.
With jquery it would look like this.
$(document).ready(function(){
$('#yourimage').click(function(){
$('#containerwithgame').show();
});
});
This way you don't use an annoying pop-up lightbox, but that's a personal opinion.

Categories

Resources