[Beta] Dynamic Facebook and Twitter Meta Tags

A place for MOD Authors to post and receive feedback on MODs still in development. No MODs within this forum should be used within a live environment!
Suggested Hosts
jcocking
Registered User
Posts: 196
Joined: Wed Jun 08, 2005 6:47 pm

[Beta] Dynamic Facebook and Twitter Meta Tags

Post by jcocking » Sat Dec 21, 2013 5:46 pm

Modification Name: Dynamic Facebook and Twitter Meta Tags
Author: jcocking

This Mod is being converted to 3.1.x. The code base is viewtopic.php?f=456&t=2341191.

Modification Description:: Installation of Facebook Open Graph and Twitter Cards. This mod will:
  • Install Facebook Open Graph Meta Tags.
  • Install Twitter Cards Meta Tags.
  • Use first posting content of a topic to populate the og:description and twitter:description meta tag. It will use the board description for all secondary pages.
  • Use the first image posted, if present, to populate the og:image and twitter:image meta tag. It will use a default image if no image is present.
  • Option to select the last image of the topic versus the first by a true/false parameter in code.
  • Support video bbcode for creation of video facebook opengraph.
  • Will work on all pages within the forums.
Modification Version:: 0.3.0

Requirements: This mod requires the Canonical URL modification. (if you have another canonical mod, it will also work, like php-SEO.)

Features:
  • Use real content from the first topic posting to populate the description field. Makes each Facebook and Twitter post custom.
  • Uses the first photo from the posting, to populate the Facebook. This enables your Facebook page to have unique photos for each topic.
Demo URL: This modification has been implemented on this forum. http://www.lotuselan.net/forums
Example page: http://www.lotuselan.net/forums/lotus-e ... 23626.html

Modification Download: https://github.com/LotusJeff/phpbb-face ... itter-tags

Comments: If you install this modification, please indicate by replying to this post. We want to have several installs before submitting the modifications to the database.

This modification will end with the following items populated within your header:

Code: Select all

<meta property="og:locale" content="" />
<meta property="og:locale:alternate" content="" />
<meta property="og:type" content="" />
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content=""/>
<meta property="og:image" content="" />
<meta property="og:video" content="" />
<meta name="twitter:card" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content=""/>
<meta name="twitter:image" content="" />
Last edited by jcocking on Wed Oct 21, 2015 4:52 pm, edited 4 times in total.
LotusElan.net is a fully responsive phpBB forum dedicated to the Lotus Elan Sportscars of the 1960s.

User avatar
Theriddler1
Registered User
Posts: 448
Joined: Sat Aug 27, 2011 11:00 pm
Location: NL
Name: Theriddler❶
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by Theriddler1 » Sat Dec 21, 2013 11:33 pm

Tested and works great :)

Only for twitter the description is sometimes too long.
I changed if the description had been shorten to place 3 dots after

eg

Code: Select all

// Shorten description if it's longer than 150 characters
    if( ( utf8_strlen( $sMetaDescription )> 150 )&& ( $iSpace= utf8_strpos( $sMetaDescription, ' ', 150 ) )!== FALSE ) $sMetaDescription= substr( $sMetaDescription, 0, $iSpace ) . '...';
It seems that only attachments works for the sharing images, can this be extended like for normal photos from external url's eg. photobucket, imageshack ect... that have been posted within the img tag.

Object Debugger from facebook shows Responscode 200 so everything is oke
Last edited by Theriddler1 on Sun Dec 22, 2013 12:12 am, edited 1 time in total.
Theriddler - Moderator @ phpBB.nl | phpBBservice.nl Team-member
ImageSupport Tools | Image My Extensions | buy me a beer Image

Ozo
Registered User
Posts: 330
Joined: Mon Dec 13, 2010 7:57 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by Ozo » Sun Dec 22, 2013 12:08 am

$sMetaDescription, ' ', 150 ) You only need to change 150 to a lower number for less of a description. ;)


I think most will want also img from posts for the tags +1 :)

jcocking
Registered User
Posts: 196
Joined: Wed Jun 08, 2005 6:47 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by jcocking » Sun Dec 22, 2013 1:25 pm

Let me look into the image bbcode.

I forgot twitter is 140 characters, let me make that change.

jeff
LotusElan.net is a fully responsive phpBB forum dedicated to the Lotus Elan Sportscars of the 1960s.

User avatar
Theriddler1
Registered User
Posts: 448
Joined: Sat Aug 27, 2011 11:00 pm
Location: NL
Name: Theriddler❶
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by Theriddler1 » Sun Dec 22, 2013 6:11 pm

jcocking wrote:Let me look into the image bbcode.
+1 that would be great
Theriddler - Moderator @ phpBB.nl | phpBBservice.nl Team-member
ImageSupport Tools | Image My Extensions | buy me a beer Image

forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by forforce » Sun Dec 22, 2013 8:57 pm

Thank you for this great mod. You only forgot to comment: <!-- Dynamic Facebook Mod - http://www.cocking.com/dynamic-facebook ... tags-phpbb --> from "overall_header.html". Is there possible to make it so people can choose from 2,3 or 4 photos from a topic to appear on facebook post ? And not only the 1st picture ?
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .

jcocking
Registered User
Posts: 196
Joined: Wed Jun 08, 2005 6:47 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by jcocking » Sun Dec 22, 2013 9:07 pm

Version 0.2.0 has been placed on the website.

Changes:
  • Support for [img] BBCode
  • Fixed Twitter Length to 140 characters (Theriddler1)
  • Fixed the comment indicators for overall_header.html (forforce)
The sequence for images are:
  1. Any attached images
  2. Any [img] bbcode
  3. Default images
LotusElan.net is a fully responsive phpBB forum dedicated to the Lotus Elan Sportscars of the 1960s.

jcocking
Registered User
Posts: 196
Joined: Wed Jun 08, 2005 6:47 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by jcocking » Sun Dec 22, 2013 9:09 pm

forforce wrote:Is there possible to make it so people can choose from 2,3 or 4 photos from a topic to appear on facebook post ? And not only the 1st picture ?
I will look, but my initial review is probably not.

jeff
LotusElan.net is a fully responsive phpBB forum dedicated to the Lotus Elan Sportscars of the 1960s.

User avatar
Theriddler1
Registered User
Posts: 448
Joined: Sat Aug 27, 2011 11:00 pm
Location: NL
Name: Theriddler❶
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by Theriddler1 » Sun Dec 22, 2013 10:55 pm

tested Version 0.2.0

Works great the img tags are also being taken from first post without any problems,
the only thing i found out is that it not directly takes the description and or image from the first post
you have to click on the like button first and then unlike it ,then refresh the page and like again before it shows. Maybe i'm not using the right button codes or maybe it's because facebook bot has not crawled the page yet.

i use this within viewtopic_body.html

Code: Select all

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	<li id="twitter-icons"><a href="https://twitter.com/share" class="twitter-share-button" data-url="{U_CANONICAL}" data-text="{S_META_DESCRIPTION}" data-lang="nl"></a></li><li id="facebook-like"><div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-action="like"></div></li>
also if say were on page 2 and further on a topic it shares the description and or image from the first post on that pages not the one from the very first post of the topic.

now for twittercard to be working people need to get approval from twitter to use them
eg:

1. Click this https://dev.twitter.com/docs/cards/validation/validator link
2. sign in
3. select your card:e.g. summary card
You can see two tabs , try card and validate &apply
4. Select Validate and apply Card Validator

one suggestion though

change:

Code: Select all

<meta property="og:locale" content="en_US" />
with:

Code: Select all

<meta property="og:locale" content="{S_USER_LANG}" />
Theriddler - Moderator @ phpBB.nl | phpBBservice.nl Team-member
ImageSupport Tools | Image My Extensions | buy me a beer Image

jcocking
Registered User
Posts: 196
Joined: Wed Jun 08, 2005 6:47 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by jcocking » Mon Dec 23, 2013 3:04 am

Theriddler1 wrote:tested Version 0.2.0

Works great the img tags are also being taken from first post without any problems,
the only thing i found out is that it not directly takes the description and or image from the first post
you have to click on the like button first and then unlike it ,then refresh the page and like again before it shows. Maybe i'm not using the right button codes or maybe it's because facebook bot has not crawled the page yet.
Yes, Facebook will come and scrape the page every 24 hours or so. The Like=>Unlike=>Like forces Facebook to reindex your page. Once you have the tags correct, the pages will be index with the new data over the next couple of weeks.
Theriddler1 wrote:also if say were on page 2 and further on a topic it shares the description and or image from the first post on that pages not the one from the very first post of the topic.
Correct. The modification gets the first post and the first image from the topic to create the meta tags. It was not setup to create a like button for each posting, but for the topic in general.

I use a rss feed to my Facebook page. When ever I have a topic created, it is posted to Facebook within 30 minutes.
Theriddler1 wrote: one suggestion though
change:

Code: Select all

<meta property="og:locale" content="en_US" />
with:

Code: Select all

<meta property="og:locale" content="{S_USER_LANG}" />
I will add this to the next release.

Thank you for your feedback.

jeff
LotusElan.net is a fully responsive phpBB forum dedicated to the Lotus Elan Sportscars of the 1960s.

forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by forforce » Mon Dec 23, 2013 12:09 pm

Is it possible to crawl the last image from topic and post it on facebook instead of 1st one ? Thank you.
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .

jcocking
Registered User
Posts: 196
Joined: Wed Jun 08, 2005 6:47 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by jcocking » Mon Dec 23, 2013 3:11 pm

forforce wrote:Is it possible to crawl the last image from topic and post it on facebook instead of 1st one ? Thank you.
Can you help me understand why you would like this addition?

thank you.

jeff
LotusElan.net is a fully responsive phpBB forum dedicated to the Lotus Elan Sportscars of the 1960s.

forforce
Registered User
Posts: 323
Joined: Fri Oct 04, 2013 7:57 am
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by forforce » Mon Dec 23, 2013 5:08 pm

My forum is a website for tutorials so on each tutorial (topic) , the last image is the image with the final step or product witch is more important. The 1st picture is not so important because it`s the picture from the beginning of the tutorial :) .
https://www.cumseface.eu , We have tutorials for everything / Te ajutam se te descurci singur .

User avatar
Theriddler1
Registered User
Posts: 448
Joined: Sat Aug 27, 2011 11:00 pm
Location: NL
Name: Theriddler❶
Contact:

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by Theriddler1 » Mon Dec 23, 2013 6:25 pm

forforce wrote:My forum is a website for tutorials so on each tutorial (topic) , the last image is the image with the final step or product witch is more important. The 1st picture is not so important because it`s the picture from the beginning of the tutorial :) .
a better way to keep your suggestion is to have some acp control for this mod
with options like first post (yes/no) or last post (yes/no) or all posts (yes/no) within a topic.
maybe also add the twitter and like buttons in the posts to allow first,last or every post for sharing this way you can decide wich post you want to share and grab image and text from.
maybe with group permissions witch group can share.
much more like a combination with the share on mod and this mod.

But then again this is just an idea.
Theriddler - Moderator @ phpBB.nl | phpBBservice.nl Team-member
ImageSupport Tools | Image My Extensions | buy me a beer Image

Ozo
Registered User
Posts: 330
Joined: Mon Dec 13, 2010 7:57 pm

Re: [Beta] Dynamic Facebook and Twitter Meta Tags

Post by Ozo » Mon Dec 23, 2013 6:49 pm

Thanks for the update :)

Locked

Return to “[3.0.x] MODs in Development”